/*
PHASE ID-DASH-01D LIVEUIN FINAL TRUST + PIPELINE UI SYSTEM
Canonical UI owner: /opt/liveuin/ui
Serving path: /var/www/ops_ui -> /opt/liveuin/ui
Backend owner: /opt/liveuin/ops_backend
*/

:root {
    --lu-bg: #f6f8ff;
    --lu-panel: #ffffff;
    --lu-panel-soft: #f9fbff;
    --lu-text: #111533;
    --lu-muted: #667085;
    --lu-line: #e6eaf5;
    --lu-purple: #7057f5;
    --lu-blue: #4f7df7;
    --lu-green: #36d39b;
    --lu-orange: #ff9f43;
    --lu-red: #f05262;
    --lu-shadow: 0 18px 50px rgba(37, 47, 101, 0.08);
    --lu-shadow-soft: 0 10px 28px rgba(37, 47, 101, 0.06);
    --lu-radius-lg: 24px;
    --lu-radius-md: 18px;
    --lu-radius-sm: 12px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 0% 0%, rgba(112, 87, 245, 0.10), transparent 30%),
        radial-gradient(circle at 100% 0%, rgba(54, 211, 155, 0.10), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, var(--lu-bg) 42%, #ffffff 100%);
    color: var(--lu-text);
}

a {
    color: inherit;
    text-decoration: none;
}

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

.lu-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.lu-logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--lu-purple), var(--lu-green));
    box-shadow: 0 10px 28px rgba(118, 87, 245, 0.25);
}

.lu-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 245px minmax(0, 1fr);
}

.lu-sidebar {
    min-height: 100vh;
    padding: 24px 18px;
    background: rgba(255, 255, 255, 0.92);
    border-right: 1px solid var(--lu-line);
    backdrop-filter: blur(18px);
    box-shadow: 12px 0 40px rgba(37, 47, 101, 0.04);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.lu-sidebar .lu-logo {
    padding: 0 10px;
    font-size: 20px;
}

.lu-nav {
    display: grid;
    gap: 8px;
}

.lu-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border-radius: 14px;
    color: var(--lu-muted);
    font-weight: 750;
    font-size: 14px;
}

.lu-nav a.active,
.lu-nav a:hover {
    background: linear-gradient(135deg, rgba(118, 87, 245, 0.13), rgba(70, 211, 154, 0.09));
    color: var(--lu-purple);
}

.lu-sidebar-bottom {
    margin-top: auto;
    display: grid;
    gap: 12px;
}

.lu-user-mini {
    padding: 14px;
    border-radius: 18px;
    background: var(--lu-panel);
    border: 1px solid var(--lu-line);
}

.lu-user-mini strong {
    display: block;
    font-size: 14px;
}

.lu-user-mini span {
    color: var(--lu-muted);
    font-size: 12px;
}

.lu-main {
    padding: 28px;
}

.lu-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
}

.lu-kicker {
    color: var(--lu-muted);
    font-size: 14px;
    margin-top: 6px;
}

.lu-title {
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.04em;
    font-weight: 900;
}

.lu-button {
    border: 0;
    border-radius: 14px;
    padding: 12px 17px;
    background: linear-gradient(135deg, var(--lu-purple), var(--lu-blue));
    color: #ffffff;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(112, 87, 245, 0.18);
}

.lu-button.green {
    background: linear-gradient(135deg, var(--lu-purple), var(--lu-green));
}

.lu-button.ghost {
    color: var(--lu-purple);
    background: rgba(112, 87, 245, 0.08);
    box-shadow: none;
    border: 1px solid rgba(112, 87, 245, 0.14);
}

.lu-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--lu-line);
    border-radius: var(--lu-radius-lg);
    box-shadow: var(--lu-shadow-soft);
}

.lu-card-inner {
    padding: 22px;
}

.lu-stage-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.lu-stage {
    position: relative;
    padding: 20px;
    border-radius: 22px;
    border: 1px solid var(--lu-line);
    background: var(--lu-panel);
}

.lu-stage::after {
    content: "→";
    position: absolute;
    right: -13px;
    top: 38%;
    color: var(--lu-muted);
    font-weight: 900;
}

.lu-stage:last-child::after {
    display: none;
}

.lu-stage-label {
    font-size: 13px;
    font-weight: 850;
    color: var(--lu-muted);
}

.lu-stage-value {
    margin-top: 8px;
    font-size: 34px;
    font-weight: 950;
}

.lu-stage-note {
    font-size: 12px;
    margin-top: 3px;
}

.lu-stage.incoming {
    background: linear-gradient(180deg, rgba(118, 87, 245, 0.11), #ffffff);
}

.lu-stage.processing {
    background: linear-gradient(180deg, rgba(255, 180, 92, 0.16), #ffffff);
}

.lu-stage.approved {
    background: linear-gradient(180deg, rgba(70, 211, 154, 0.15), #ffffff);
}

.lu-stage.live {
    background: linear-gradient(180deg, rgba(79, 125, 247, 0.13), #ffffff);
}

.lu-dashboard-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 18px;
}

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

.lu-list-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    background: var(--lu-panel-soft);
    border: 1px solid var(--lu-line);
}

.lu-list-title {
    font-weight: 850;
    font-size: 14px;
}

.lu-list-meta {
    color: var(--lu-muted);
    font-size: 12px;
    margin-top: 3px;
}

.lu-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 850;
}

.lu-pill.red {
    color: #b91c1c;
    background: #fee2e2;
}

.lu-pill.orange {
    color: #b45309;
    background: #ffedd5;
}

.lu-pill.green {
    color: #047857;
    background: #d1fae5;
}

.lu-pill.blue {
    color: #1d4ed8;
    background: #dbeafe;
}

.lu-pipeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(230px, 1fr));
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.lu-pipeline-column {
    min-height: 560px;
    padding: 14px;
    border-radius: 24px;
    border: 1px solid var(--lu-line);
    background: rgba(255, 255, 255, 0.72);
}

.lu-pipeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-weight: 900;
}

.lu-property-card {
    padding: 12px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--lu-line);
    box-shadow: 0 10px 24px rgba(31, 35, 75, 0.06);
    margin-bottom: 12px;
}

.lu-property-card img {
    width: 100%;
    height: 84px;
    border-radius: 14px;
    object-fit: cover;
    background: #eef2ff;
}

.lu-property-card strong {
    display: block;
    margin-top: 10px;
}

.lu-property-card span {
    color: var(--lu-muted);
    font-size: 12px;
}

.lu-auth-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    background:
        radial-gradient(circle at 12% 28%, rgba(112, 87, 245, 0.12), transparent 28%),
        radial-gradient(circle at 18% 78%, rgba(54, 211, 155, 0.10), transparent 24%),
        #ffffff;
}

.lu-auth-left {
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(246, 248, 255, 0.94)),
        radial-gradient(circle at 100% 100%, rgba(112, 87, 245, 0.12), transparent 38%);
    border-right: 1px solid var(--lu-line);
}

.lu-auth-copy h1 {
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: -0.06em;
    margin: 48px 0 18px;
}

.lu-gradient-text {
    background: linear-gradient(135deg, var(--lu-purple), var(--lu-green));
    -webkit-background-clip: text;
    color: transparent;
}

.lu-auth-copy p {
    color: var(--lu-muted);
    max-width: 460px;
    line-height: 1.7;
}

.lu-live-stats {
    display: grid;
    gap: 12px;
    max-width: 360px;
}

.lu-live-stat {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--lu-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
}

.lu-live-stat strong {
    display: block;
    font-size: 20px;
}

.lu-live-stat span {
    font-size: 12px;
    color: var(--lu-muted);
}

.lu-auth-right {
    display: grid;
    place-items: center;
    padding: 32px;
    background:
        radial-gradient(circle at 100% 100%, rgba(112, 87, 245, 0.08), transparent 36%),
        #ffffff;
}

.lu-auth-card {
    width: min(440px, 100%);
    padding: 34px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--lu-line);
    box-shadow: 0 28px 70px rgba(37, 47, 101, 0.12);
}

.lu-auth-card h2 {
    margin: 0 0 8px;
    font-size: 28px;
    letter-spacing: -0.04em;
}

.lu-auth-card p {
    color: var(--lu-muted);
    margin: 0 0 24px;
}

.lu-field {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.lu-field label {
    font-weight: 850;
    font-size: 13px;
}

.lu-field input,
.lu-field select,
.lu-field textarea {
    width: 100%;
    border: 1px solid var(--lu-line);
    border-radius: 14px;
    background: #ffffff;
    padding: 13px 14px;
    outline: none;
}

.lu-field textarea {
    min-height: 220px;
    resize: vertical;
}

.lu-form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.lu-input-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 20px;
}

.lu-extract-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.lu-extract-item {
    padding: 14px;
    border-radius: 16px;
    background: var(--lu-panel-soft);
    border: 1px solid var(--lu-line);
}

.lu-extract-item span {
    display: block;
    color: var(--lu-muted);
    font-size: 12px;
    margin-bottom: 4px;
}

.lu-insight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.lu-insight-card {
    padding: 18px;
    border-radius: 20px;
    background: var(--lu-panel);
    border: 1px solid var(--lu-line);
}

.lu-insight-card strong {
    display: block;
    font-size: 28px;
    margin-top: 8px;
}

.lu-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
}

@media (max-width: 980px) {
    .lu-shell,
    .lu-auth-layout,
    .lu-dashboard-grid,
    .lu-input-layout,
    .lu-settings-grid,
    .lu-insight-grid {
        grid-template-columns: 1fr;
    }

    .lu-stage-row {
        grid-template-columns: 1fr 1fr;
    }

    .lu-sidebar {
        min-height: auto;
    }
}


/* PHASE ID-DASH-01F LIVEUIN AUTH UI STATUS */
.lu-auth-status {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
}

.lu-auth-status.ok {
    color: #047857;
    background: #d1fae5;
}

.lu-auth-status.error {
    color: #b91c1c;
    background: #fee2e2;
}


/* PHASE ID-DASH-02B LIVEUIN MULTI-METHOD AUTH UI */
.lu-auth-methods {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.lu-auth-method {
    width: 100%;
    border: 1px solid var(--lu-line);
    border-radius: 14px;
    padding: 13px 14px;
    background: #ffffff;
    color: var(--lu-text);
    font-weight: 850;
    cursor: pointer;
}

.lu-auth-method.primary {
    background: linear-gradient(135deg, var(--lu-purple), var(--lu-blue));
    color: #ffffff;
    border-color: transparent;
}

.lu-auth-method.wechat {
    background: linear-gradient(135deg, rgba(70, 211, 154, 0.16), rgba(118, 87, 245, 0.08));
    color: #047857;
}

.lu-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--lu-muted);
    font-size: 12px;
    font-weight: 850;
}

.lu-auth-divider::before,
.lu-auth-divider::after {
    content: "";
    height: 1px;
    background: var(--lu-line);
    flex: 1;
}


/* PHASE ID-DASH-02D LIVEUIN USER THEME SYSTEM */
html[data-lu-theme="dark"] {
    --lu-bg: #0f1220;
    --lu-panel: #171b2f;
    --lu-panel-soft: #1d2238;
    --lu-text: #f7f8ff;
    --lu-muted: #aeb6d3;
    --lu-line: rgba(255, 255, 255, 0.12);
}

html[data-lu-theme="dark"] body,
html[data-lu-theme="dark"] .lu-auth-layout,
html[data-lu-theme="dark"] .lu-auth-right {
    background: #0f1220;
}

html[data-lu-theme="dark"] .lu-sidebar,
html[data-lu-theme="dark"] .lu-auth-left,
html[data-lu-theme="dark"] .lu-card,
html[data-lu-theme="dark"] .lu-auth-card,
html[data-lu-theme="dark"] .lu-property-card,
html[data-lu-theme="dark"] .lu-pipeline-column,
html[data-lu-theme="dark"] .lu-live-stat {
    background: rgba(23, 27, 47, 0.94);
}

html[data-lu-theme="high-contrast"] {
    --lu-bg: #ffffff;
    --lu-panel: #ffffff;
    --lu-panel-soft: #ffffff;
    --lu-text: #000000;
    --lu-muted: #1f2937;
    --lu-line: #000000;
    --lu-purple: #000000;
    --lu-blue: #000000;
    --lu-green: #047857;
    --lu-orange: #92400e;
    --lu-red: #991b1b;
}

.lu-theme-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px;
    border-top: 1px solid var(--lu-line);
    background: rgba(255, 255, 255, 0.78);
}

.lu-theme-choice {
    border: 1px solid var(--lu-line);
    border-radius: 999px;
    padding: 10px 16px;
    background: var(--lu-panel);
    color: var(--lu-text);
    font-weight: 850;
    cursor: pointer;
}

.lu-theme-choice.active {
    background: linear-gradient(135deg, var(--lu-purple), var(--lu-green));
    color: #ffffff;
    border-color: transparent;
}


/* PHASE ID-DASH-02E LIVEUIN VISIBLE THEME CHOOSER POLISH */
.lu-theme-bar {
    margin-top: 22px;
    border-radius: 24px;
    box-shadow: var(--lu-shadow-soft);
}

html[data-lu-theme="dark"] .lu-theme-bar {
    background: rgba(23, 27, 47, 0.94);
}

html[data-lu-theme="high-contrast"] .lu-theme-choice.active {
    background: #000000;
    color: #ffffff;
}


/* PHASE ID-DASH-03A LIVEUIN ROLE-AWARE DASHBOARD MOCK CONTRACT */
.lu-role-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--lu-line);
    box-shadow: var(--lu-shadow-soft);
}

.lu-role-choice {
    border: 1px solid var(--lu-line);
    border-radius: 999px;
    padding: 10px 14px;
    background: var(--lu-panel);
    color: var(--lu-text);
    font-weight: 850;
    cursor: pointer;
}

.lu-role-choice.active {
    background: linear-gradient(135deg, var(--lu-purple), var(--lu-green));
    color: #ffffff;
    border-color: transparent;
}

html[data-lu-theme="dark"] .lu-role-switcher {
    background: rgba(23, 27, 47, 0.94);
}

/* PHASE ID-DASH-03D LIVEUIN DASHBOARD SESSION GATE */
.lu-session-gate {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--lu-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--lu-shadow-soft);
    color: var(--lu-muted);
    font-size: 13px;
    font-weight: 750;
}

.lu-session-gate .lu-button {
    margin-left: auto;
    padding: 9px 13px;
}

/* PHASE ID-DASH-03F COMPACT SESSION BANNER + FULL-SCREEN WORKSPACE */
.lu-main {
    min-height: 100vh;
    padding: 22px 24px;
}

.lu-session-gate.compact {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--lu-line);
    box-shadow: var(--lu-shadow-soft);
}

.lu-session-gate.compact strong {
    display: block;
    font-size: 14px;
}

.lu-session-gate.compact span {
    display: block;
    color: var(--lu-muted);
    font-size: 12px;
    margin-top: 2px;
}

.lu-session-gate.compact .lu-button {
    white-space: nowrap;
    padding: 10px 14px;
}

html[data-lu-session-mode="authenticated"] .lu-session-gate.compact {
    background: rgba(209, 250, 229, 0.72);
}

html[data-lu-theme="dark"] .lu-session-gate.compact {
    background: rgba(23, 27, 47, 0.94);
}

@media (max-width: 720px) {
    .lu-session-gate.compact {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* PHASE ID-DASH-03G SMART INVENTORY DATA PLACEHOLDERS */
.lu-demo-thumb {
    width: 100%;
    height: 84px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(112, 87, 245, 0.16), rgba(54, 211, 155, 0.16)),
        var(--lu-panel-soft);
    border: 1px solid var(--lu-line);
}