:root {
    --bg: #eef3f7;
    --bg-strong: #dfe8ef;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --text: #16212b;
    --muted: #667789;
    --line: #d7e0e8;
    --brand: #0f4d65;
    --brand-dark: #0a3445;
    --brand-soft: #e6f1f5;
    --accent: #237c74;
    --danger: #b4232a;
    --warning: #9a6200;
    --shadow: 0 18px 45px rgba(15, 42, 58, 0.12);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    background:
        linear-gradient(180deg, rgba(238, 243, 247, 0.96), rgba(248, 250, 252, 0.98)),
        var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

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

a:hover {
    color: var(--brand-dark);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 12px 28px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(15, 42, 58, 0.06);
    backdrop-filter: blur(12px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.brand-symbol,
.brand-mark {
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    font-weight: 800;
}

.brand-symbol {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
}

.brand-mark {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    font-size: 22px;
    box-shadow: var(--shadow);
}

.primary-nav,
nav {
    display: flex;
    flex: 1;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.primary-nav a,
nav a {
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--muted);
    font-weight: 700;
}

.primary-nav a:hover,
nav a:hover {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.account {
    display: flex;
    gap: 12px;
    align-items: center;
    color: var(--muted);
    white-space: nowrap;
}

.account-name {
    color: var(--text);
    font-weight: 700;
}

.env-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid #f0c56e;
    border-radius: 999px;
    background: #fff7e6;
    color: var(--warning);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}

main {
    width: min(1220px, 100%);
    margin: 0 auto;
    padding: 34px 24px 52px;
}

.public {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
    background:
        linear-gradient(140deg, rgba(10, 52, 69, 0.94), rgba(35, 124, 116, 0.88)),
        var(--brand-dark);
}

.public-env {
    position: fixed;
    top: 18px;
    right: 18px;
}

.public-flashes {
    position: fixed;
    top: 18px;
    left: 50%;
    width: min(520px, calc(100vw - 32px));
    transform: translateX(-50%);
    z-index: 20;
}

.login-shell {
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 420px);
    gap: 26px;
    align-items: stretch;
    padding: 0;
}

.login-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 430px;
    padding: 44px;
    color: #fff;
}

.login-copy h1 {
    max-width: 520px;
    margin: 22px 0 10px;
    font-size: 42px;
    line-height: 1.1;
}

.login-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
}

.login-panel,
.panel,
.app-card,
.admin-section,
.empty-state,
.error-panel {
    background: var(--panel);
    border: 1px solid rgba(215, 224, 232, 0.86);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.login-panel {
    display: grid;
    gap: 22px;
    min-height: 430px;
    padding: 34px;
    align-content: center;
}

.login-heading h2,
.section-heading h2,
.app-card h2,
.error-panel h1 {
    margin: 4px 0 0;
}

.login-footer {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.eyebrow {
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.page-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.hero-title {
    padding: 4px 0 10px;
}

h1,
h2 {
    color: var(--text);
    line-height: 1.2;
}

h1 {
    margin: 0;
    font-size: 32px;
}

h2 {
    font-size: 19px;
}

p {
    color: var(--muted);
}

form {
    display: grid;
    gap: 14px;
}

label {
    display: grid;
    gap: 7px;
    color: #304352;
    font-weight: 700;
}

.check {
    display: flex;
    align-items: center;
    gap: 8px;
}

input,
select,
button {
    min-height: 42px;
    border-radius: 7px;
    border: 1px solid var(--line);
    padding: 9px 11px;
    color: var(--text);
    font: inherit;
}

input:focus,
select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(15, 77, 101, 0.14);
    outline: 0;
}

button,
.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid var(--brand);
    border-radius: 7px;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    font-weight: 800;
}

button:hover,
.button-link:hover {
    background: var(--brand-dark);
    color: #fff;
}

.link-button {
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--danger);
}

.app-grid,
.tile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.app-card,
.tile {
    display: grid;
    gap: 16px;
    min-height: 230px;
    padding: 22px;
}

.app-card {
    grid-template-rows: auto 1fr auto;
}

.tile {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
}

.app-card-body {
    display: grid;
    align-content: start;
    gap: 7px;
}

.app-card p,
.tile small {
    margin: 0;
    color: var(--muted);
}

.app-icon {
    display: inline-grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 14px;
    font-weight: 900;
}

.tile-code {
    color: var(--accent);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}

.admin-section,
.empty-state {
    margin-top: 24px;
    padding: 22px;
}

.admin-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.admin-links a {
    min-height: 54px;
    display: flex;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
    color: var(--brand-dark);
    font-weight: 800;
}

.admin-links a:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.panel {
    padding: 22px;
}

.split {
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: 18px;
    align-items: start;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

th,
td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

tr:last-child td {
    border-bottom: 0;
}

th {
    color: var(--muted);
    background: #f0f4f7;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.badge,
.permission-list span {
    display: inline-block;
    padding: 4px 8px;
    margin: 2px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 700;
}

.inline-form {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 1fr auto;
    gap: 8px;
    margin-bottom: 14px;
}

.filter-form {
    display: grid;
    grid-template-columns: 1.4fr .9fr .8fr auto;
    gap: 12px;
    align-items: end;
}

.admin-filter {
    margin-bottom: 18px;
}

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

.admin-user-form {
    margin-top: 18px;
}

.form-actions,
.admin-quick-actions,
.table-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-quick-actions {
    margin-top: 16px;
}

.admin-quick-actions form,
.table-actions form {
    display: inline-flex;
    margin: 0;
}

.app-permission-panel {
    margin-top: 18px;
}

.system-access-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.system-access-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
}

.system-access-head {
    display: grid;
    gap: 4px;
}

.system-access-head small {
    color: var(--muted);
}

.check-list {
    display: grid;
    gap: 8px;
}

.permission-list.compact {
    max-width: 420px;
}

.flash {
    margin-bottom: 14px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 10px 24px rgba(15, 42, 58, 0.08);
}

.flash.error {
    border-color: #efb4b9;
    color: var(--danger);
}

.flash.success {
    border-color: #acd6c8;
    color: var(--accent);
}

.empty {
    padding: 20px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.error-panel {
    width: min(520px, calc(100vw - 32px));
    padding: 34px;
    text-align: center;
}

.error-panel p {
    margin: 10px auto 22px;
}

.error-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 34px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 900;
}

.logout-frame {
    position: absolute;
    width: 1px;
    height: 1px;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.public {
    background:
        linear-gradient(140deg, rgba(10, 52, 69, 0.94), rgba(35, 124, 116, 0.88)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 18px),
        var(--brand-dark);
}

.login-caption {
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.login-panel {
    position: relative;
    overflow: hidden;
}

.login-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}

.app-card {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.app-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 77, 101, 0.08), transparent 38%);
    pointer-events: none;
}

.app-card:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 77, 101, 0.34);
    box-shadow: 0 22px 52px rgba(15, 42, 58, 0.16);
}

.access-pill {
    display: inline-flex;
    width: fit-content;
    margin-top: 8px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #e8f6f2;
    color: #166253;
    font-size: 12px;
    font-weight: 800;
}

.app-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.button-link.secondary {
    border-color: var(--line);
    background: var(--panel-soft);
    color: var(--brand-dark);
}

.button-link.secondary:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.muted-link {
    color: var(--muted);
    font-weight: 800;
}

.muted-link:hover {
    color: var(--brand-dark);
}

.dashboard-lower {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 18px;
    margin-top: 24px;
}

.quick-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.quick-link-grid a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
    color: var(--brand-dark);
    font-weight: 800;
}

.quick-link-grid a:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.activity-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.activity-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
}

.activity-item strong {
    color: var(--text);
}

.activity-item span {
    justify-self: end;
    color: var(--accent);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.activity-item small {
    grid-column: 1 / -1;
    color: var(--muted);
}

.empty-compact {
    margin: 14px 0 0;
}

.launch-modal[hidden] {
    display: none;
}

.launch-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 20px;
}

.launch-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 28, 38, 0.56);
    backdrop-filter: blur(4px);
}

.launch-modal__panel {
    position: relative;
    width: min(440px, 100%);
    display: grid;
    gap: 18px;
    padding: 24px;
    border: 1px solid rgba(215, 224, 232, 0.92);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 30px 80px rgba(10, 28, 38, 0.32);
}

.launch-modal__icon {
    display: inline-grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 900;
}

.launch-modal__panel h2,
.launch-modal__panel p {
    margin: 4px 0 0;
}

.launch-modal__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

th {
    letter-spacing: 0;
}

tbody tr:hover td {
    background: #fbfdff;
}

code {
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 920px) {
    .topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .account,
    .primary-nav,
    nav {
        width: 100%;
    }

    .account {
        flex-wrap: wrap;
    }

    .login-shell,
    .app-grid,
    .tile-grid,
    .dashboard-lower,
    .split,
    .inline-form,
    .filter-form,
    .form-grid-2,
    .system-access-grid,
    .admin-links {
        grid-template-columns: 1fr;
    }

    .login-copy {
        min-height: auto;
        padding: 22px 6px;
    }

    .login-copy h1 {
        font-size: 34px;
    }

    .activity-item {
        grid-template-columns: 1fr;
    }

    .activity-item span {
        justify-self: start;
    }
}

@media (max-width: 560px) {
    body {
        font-size: 13px;
    }

    main {
        padding: 24px 14px 38px;
    }

    .public {
        padding: 16px;
    }

    .public-flashes {
        top: 12px;
    }

    .public-env {
        position: static;
        justify-self: end;
        margin-bottom: 12px;
    }

    .login-panel,
    .panel,
    .app-card,
    .admin-section,
    .empty-state,
    .error-panel {
        padding: 18px;
    }

    .login-copy h1,
    h1 {
        font-size: 28px;
    }

    .quick-link-grid,
    .app-card-actions,
    .launch-modal__actions {
        grid-template-columns: 1fr;
    }

    .app-card-actions,
    .launch-modal__actions {
        align-items: stretch;
    }

    .app-card-actions .button-link,
    .launch-modal__actions .button-link {
        width: 100%;
    }
}

/* Portal premium UI/UX refresh - Phase 5B */
:root {
    --radius: 8px;
    --radius-sm: 6px;
    --line-strong: #b8c8d5;
    --surface-raised: #ffffff;
    --surface-muted: #f3f7fa;
    --focus-ring: rgba(35, 124, 116, 0.22);
    --shadow-soft: 0 14px 38px rgba(16, 42, 58, 0.10);
    --shadow-strong: 0 32px 90px rgba(5, 18, 26, 0.30);
}

body {
    color: #13232d;
    background:
        linear-gradient(180deg, #eef4f7 0%, #f8fbfc 46%, #edf3f6 100%);
}

main {
    width: min(1280px, 100%);
    padding: 38px 28px 58px;
}

.public {
    place-items: stretch;
    padding: clamp(24px, 4vw, 56px);
    background:
        linear-gradient(90deg, rgba(5, 22, 31, 0.92) 0%, rgba(12, 52, 68, 0.82) 42%, rgba(28, 112, 105, 0.64) 100%),
        url("portal-bg.jpg") center / cover no-repeat,
        #0a3445;
}

.public::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(120deg, transparent 0 58%, rgba(255, 255, 255, 0.075) 58% 58.2%, transparent 58.2%);
    background-size: 92px 92px, 92px 92px, 100% 100%;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.95), transparent 88%);
}

.public::after {
    background:
        linear-gradient(90deg, rgba(5, 18, 26, 0.14), rgba(5, 18, 26, 0.02)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
    backdrop-filter: none;
}

.public-flashes {
    top: 24px;
}

.login-shell {
    width: min(1180px, 100%);
    min-height: calc(100vh - clamp(48px, 8vw, 112px));
    margin: auto;
    grid-template-columns: minmax(420px, 1fr) minmax(380px, 440px);
    gap: clamp(36px, 7vw, 96px);
    align-items: center;
}

.login-copy {
    min-height: auto;
    padding: 0;
}

.login-caption {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    letter-spacing: 0;
}

.login-copy h1 {
    max-width: 720px;
    margin: 18px 0 14px;
    color: #fff;
    font-size: clamp(42px, 5vw, 66px);
    line-height: .98;
    letter-spacing: 0;
}

.login-copy p {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 17px;
    line-height: 1.7;
}

.login-feature-row {
    margin-top: 28px;
}

.login-feature-row span {
    min-height: 36px;
    padding: 8px 13px;
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.login-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: min(650px, 100%);
    margin-top: 34px;
}

.login-proof-grid span {
    display: grid;
    gap: 7px;
    min-height: 92px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.88);
    font-weight: 800;
    backdrop-filter: blur(8px);
}

.login-proof-grid strong {
    color: #f0c56e;
    font-size: 18px;
}

.login-panel {
    min-height: auto;
    gap: 22px;
    padding: 36px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-top: 3px solid #f0c56e;
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 251, 0.94)),
        #fff;
    box-shadow: var(--shadow-strong);
    transform: translateY(-8px);
}

.login-panel::before {
    display: none;
}

.login-panel-brand {
    margin-bottom: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(190, 204, 216, 0.68);
}

.login-heading h2 {
    font-size: 25px;
    color: var(--ink-strong);
}

.login-heading p {
    color: #65778a;
    line-height: 1.65;
}

.login-panel form {
    gap: 16px;
}

.login-panel label {
    color: #243746;
}

.login-panel input {
    min-height: 52px;
    border: 1px solid #c6d4df;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(10, 34, 48, 0.04);
}

.login-panel input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--focus-ring);
}

.login-panel button[type="submit"] {
    min-height: 52px;
    border: 0;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #0f4d65, #0a3445);
    box-shadow: 0 18px 34px rgba(15, 77, 101, 0.28);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.login-panel button[type="submit"]:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 22px 42px rgba(15, 77, 101, 0.34);
}

.login-footer a {
    font-weight: 900;
}

.topbar {
    min-height: 76px;
    padding: 13px 32px;
    border-bottom: 1px solid rgba(184, 200, 213, 0.82);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 34px rgba(16, 42, 58, 0.09);
}

.primary-nav a,
nav a,
.account a {
    border: 1px solid transparent;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.primary-nav a:hover,
nav a:hover,
.account a:hover {
    border-color: rgba(15, 77, 101, 0.12);
    transform: translateY(-1px);
}

.hero-title {
    min-height: 150px;
    margin-bottom: 26px;
    padding: 32px;
    border: 1px solid rgba(198, 212, 223, 0.88);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 247, 248, 0.90)),
        #fff;
    box-shadow: var(--shadow-soft);
}

.hero-title h1 {
    max-width: 860px;
    font-size: clamp(28px, 3vw, 42px);
}

.app-grid {
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: 22px;
}

.app-card {
    min-height: 286px;
    padding: 26px;
    border: 1px solid rgba(184, 200, 213, 0.82);
    box-shadow: var(--shadow-soft);
}

.app-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 64px rgba(16, 42, 58, 0.18);
}

.app-card h2 {
    font-size: 24px;
}

.app-card p {
    line-height: 1.65;
}

.app-card-actions {
    padding-top: 4px;
}

button,
.button-link {
    border-radius: var(--radius-sm);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

button:hover,
.button-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(15, 77, 101, 0.18);
}

.panel,
.admin-section,
.empty-state,
.tile,
table {
    border-color: rgba(198, 212, 223, 0.92);
    box-shadow: var(--shadow-soft);
}

.panel,
.admin-section,
.empty-state {
    padding: 24px;
}

.admin-links a,
.quick-link-grid a,
.system-access-card {
    border-color: rgba(198, 212, 223, 0.92);
    background: linear-gradient(180deg, #ffffff, #f6f9fb);
}

.dashboard-lower {
    gap: 22px;
}

.activity-item {
    border-color: rgba(198, 212, 223, 0.92);
    background: #fff;
}

.table-panel {
    padding: 0;
    overflow: hidden;
}

.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(198, 212, 223, 0.92);
    background: linear-gradient(180deg, #ffffff, #f5f8fa);
}

.table-toolbar span {
    color: var(--muted);
    font-weight: 800;
}

.table-scroll {
    overflow-x: auto;
}

.table-scroll table {
    min-width: 920px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

th {
    background: #eef4f7;
    color: #52677a;
}

td {
    background: rgba(255, 255, 255, 0.92);
}

tbody tr:hover td {
    background: #f7fbfc;
}

code {
    display: block;
    max-width: 560px;
    max-height: 92px;
    overflow: auto;
    padding: 8px;
    border: 1px solid #dce6ed;
    border-radius: var(--radius-sm);
    background: #f7fafb;
    color: #263b4a;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-top: 1px solid rgba(198, 212, 223, 0.92);
    background: #fff;
}

.pagination a {
    min-width: 40px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid #d2dee7;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--brand-dark);
    font-weight: 900;
}

.pagination a:hover,
.pagination a.is-active {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.launch-modal__panel {
    animation: portal-pop .18s ease-out;
}

@keyframes portal-pop {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 920px) {
    .login-shell {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .login-panel {
        transform: none;
    }

    .login-proof-grid,
    .app-grid {
        grid-template-columns: 1fr;
    }

    .hero-title {
        padding: 24px;
    }
}

@media (max-width: 560px) {
    .public {
        padding: 18px;
    }

    .login-copy h1 {
        font-size: 34px;
    }

    .login-panel {
        padding: 24px;
    }

    .table-toolbar,
    .pagination {
        justify-content: flex-start;
    }
}

/* Portal premium UI polish */
:root {
    --surface-glass: rgba(255, 255, 255, 0.86);
    --ink-strong: #071923;
    --steel: #718293;
    --gold: #c8943f;
    --success-soft: #e8f6f2;
}

body {
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
    background:
        linear-gradient(180deg, #eef4f7 0%, #f8fafc 58%, #eef3f7 100%);
}

.topbar {
    min-height: 72px;
    background: rgba(255, 255, 255, 0.90);
    border-bottom: 1px solid rgba(190, 204, 216, 0.72);
    box-shadow: 0 12px 34px rgba(16, 42, 58, 0.08);
}

.brand-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.brand-symbol {
    box-shadow: 0 10px 24px rgba(15, 77, 101, 0.18);
}

.primary-nav a,
nav a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
}

.public {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(115deg, rgba(7, 25, 35, 0.92) 0%, rgba(15, 77, 101, 0.78) 48%, rgba(35, 124, 116, 0.70) 100%),
        url("portal-bg.jpg") center / cover no-repeat,
        linear-gradient(135deg, #081b24, #0f4d65 52%, #237c74);
}

.public::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 84px 84px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 78%);
    pointer-events: none;
}

.public::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background: rgba(5, 18, 26, 0.18);
    backdrop-filter: blur(1.5px);
    pointer-events: none;
}

.public>* {
    position: relative;
    z-index: 1;
}

.login-shell {
    width: min(1080px, 100%);
    grid-template-columns: minmax(320px, 1fr) minmax(360px, 430px);
    gap: 32px;
    align-items: center;
}

.login-copy {
    min-height: 560px;
    padding: 56px 48px;
}

.login-copy .brand-mark {
    width: 76px;
    height: 76px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff, #d9eef2);
    color: var(--brand-dark);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
}

.login-caption {
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.78);
}

.login-copy h1 {
    max-width: 680px;
    margin-top: 18px;
    color: #fff;
    font-size: 48px;
    line-height: 1.05;
}

.login-copy p {
    max-width: 560px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
}

.login-feature-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.login-feature-row span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.90);
    font-size: 12px;
    font-weight: 900;
}

.login-panel {
    min-height: 500px;
    padding: 38px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow: 0 34px 90px rgba(5, 18, 26, 0.34);
    backdrop-filter: blur(18px);
}

.login-panel::before {
    height: 5px;
    background: linear-gradient(90deg, var(--gold), var(--accent), var(--brand));
}

.login-panel-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
    color: var(--brand-dark);
    font-size: 15px;
    font-weight: 900;
}

.login-panel-brand img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
}

.login-heading p {
    margin: 8px 0 0;
}

.login-panel input {
    min-height: 48px;
    background: #fff;
    border-color: #cbd7e1;
}

.login-panel button[type="submit"] {
    min-height: 48px;
    margin-top: 4px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    box-shadow: 0 16px 34px rgba(15, 77, 101, 0.25);
}

.login-footer {
    color: #7a8794;
}

.hero-title {
    min-height: 132px;
    align-items: center;
    padding: 28px 0 24px;
}

.hero-title h1 {
    font-size: 34px;
    color: var(--ink-strong);
}

.hero-title p {
    max-width: 680px;
    margin-bottom: 0;
}

.app-grid {
    gap: 20px;
}

.app-card {
    min-height: 270px;
    padding: 24px;
    border-color: rgba(198, 212, 223, 0.88);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 252, 0.98)),
        #fff;
}

.app-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    opacity: .9;
}

.app-icon,
.launch-modal__icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
}

.app-icon svg,
.launch-modal__icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-icon--kcs {
    background: #e8f6f2;
    color: #166253;
}

.app-icon--khsx {
    background: #eaf1fb;
    color: #245d9c;
}

.app-icon--iso {
    background: #fff4df;
    color: #956012;
}

.app-card h2 {
    font-size: 22px;
}

.app-card-actions .button-link {
    min-width: 132px;
}

.access-pill {
    background: var(--success-soft);
}

.panel,
.admin-section,
.empty-state {
    border-color: rgba(198, 212, 223, 0.88);
}

.quick-link-grid a,
.admin-links a {
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.quick-link-grid a:hover,
.admin-links a:hover {
    transform: translateY(-1px);
}

.launch-modal__panel {
    width: min(500px, 100%);
    gap: 20px;
    padding: 30px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98)),
        #fff;
}

.launch-modal__icon {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.launch-modal__actions .button-link {
    min-width: 132px;
}

.flash {
    border-left: 4px solid var(--brand);
}

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

.flash.success {
    border-left-color: var(--accent);
}

@media (max-width: 920px) {
    .login-shell {
        gap: 18px;
    }

    .login-copy {
        min-height: auto;
        padding: 18px 4px;
    }

    .login-copy h1 {
        font-size: 36px;
    }

    .login-panel {
        min-height: auto;
    }
}

@media (max-width: 560px) {
    .login-copy h1 {
        font-size: 30px;
    }

    .login-feature-row span {
        min-height: 30px;
    }

    .login-panel {
        padding: 22px;
    }

    .app-icon,
    .launch-modal__icon {
        width: 54px;
        height: 54px;
    }
}

/* Phase 5B final overrides: giữ bố cục Portal mới ổn định sau các lớp CSS cũ. */
.public {
    place-items: stretch;
    padding: clamp(24px, 4vw, 56px);
    background:
        linear-gradient(90deg, rgba(5, 22, 31, 0.92) 0%, rgba(12, 52, 68, 0.82) 42%, rgba(28, 112, 105, 0.64) 100%),
        url("portal-bg.jpg") center / cover no-repeat,
        #0a3445;
}

.public::after {
    background:
        linear-gradient(90deg, rgba(5, 18, 26, 0.14), rgba(5, 18, 26, 0.02)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
    backdrop-filter: none;
}

.login-shell {
    width: min(1180px, 100%);
    min-height: calc(100vh - clamp(48px, 8vw, 112px));
    margin: auto;
    grid-template-columns: minmax(420px, 1fr) minmax(380px, 440px);
    gap: clamp(36px, 7vw, 96px);
    align-items: center;
}

.login-copy {
    min-height: auto;
    padding: 0;
}

.login-copy h1 {
    max-width: 720px;
    margin: 18px 0 14px;
    font-size: clamp(42px, 5vw, 66px);
    line-height: .98;
    letter-spacing: 0;
}

.login-copy p {
    max-width: 620px;
    font-size: 17px;
    line-height: 1.7;
}

.login-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: min(650px, 100%);
    margin-top: 34px;
}

.login-panel {
    min-height: auto;
    gap: 22px;
    padding: 36px;
    border-top: 3px solid #f0c56e;
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 251, 0.94)),
        #fff;
    box-shadow: var(--shadow-strong);
    transform: translateY(-8px);
    backdrop-filter: blur(10px);
}

.login-panel::before {
    display: none;
}

.login-panel input,
.login-panel button[type="submit"] {
    min-height: 52px;
}

.hero-title {
    padding: 32px;
}

@media (max-width: 920px) {
    .login-shell {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .login-panel {
        transform: none;
    }

    .login-proof-grid,
    .app-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .public {
        padding: 18px;
    }

    .login-copy h1 {
        font-size: 34px;
    }

    .login-panel {
        padding: 24px;
    }
}


/* ===== Phase 6E final portal dashboard polish ===== */
:root {
    --phase6e-navy: #0f172a;
    --phase6e-blue: #2563eb;
    --phase6e-teal: #0f766e;
    --phase6e-bg: #f4f7fb;
    --phase6e-line: rgba(148,163,184,.30);
    --phase6e-shadow: 0 14px 36px rgba(15,23,42,.10);
    --phase6e-radius: 18px;
}
body {
    background:
        radial-gradient(820px 420px at 14% 0%, rgba(37,99,235,.08), transparent 60%),
        radial-gradient(720px 420px at 86% 4%, rgba(15,118,110,.08), transparent 58%),
        linear-gradient(180deg, #f8fbff, var(--phase6e-bg));
    font-family: Inter, Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.topbar {
    min-height: 66px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--phase6e-line);
    box-shadow: 0 6px 18px rgba(15,23,42,.07);
}
.brand-logo { max-height: 42px; width: auto; }
.primary-nav a {
    border: 1px solid transparent;
    border-radius: 999px;
}
.primary-nav a:hover {
    border-color: var(--phase6e-line);
}
.account a {
    border-radius: 999px;
    font-weight: 800;
}
.hero-title {
    padding: 6px 0 16px;
}
.hero-title h1 {
    max-width: 920px;
    font-size: clamp(28px, 3vw, 42px);
    letter-spacing: -.03em;
}
.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}
.app-card {
    position: relative;
    min-height: 278px;
    padding: 26px;
    border-radius: var(--phase6e-radius);
    border: 1px solid var(--phase6e-line);
    background: linear-gradient(180deg, #fff, #f8fbff);
    box-shadow: var(--phase6e-shadow);
    overflow: hidden;
}
.app-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 54px rgba(15,23,42,.14);
}
.app-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 4px;
    background: linear-gradient(90deg, var(--phase6e-blue), var(--phase6e-teal));
}
.app-icon,
.launch-modal__icon {
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
.tile-code,
.access-pill {
    border-radius: 999px;
    font-weight: 900;
}
.app-card-actions {
    align-items: center;
}
.app-card-actions .button-link {
    min-width: 138px;
    border-radius: 999px;
}
.launch-modal__dialog,
.panel,
.admin-section,
.empty-state,
.error-panel {
    border-radius: var(--phase6e-radius);
    border-color: var(--phase6e-line);
    box-shadow: var(--phase6e-shadow);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(37,99,235,.22);
    outline-offset: 2px;
}
@media (max-width: 760px) {
    .topbar { align-items: flex-start; flex-direction: column; gap: 10px; }
    .primary-nav, .account { width: 100%; }
    .account { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Portal dashboard welcome title spacing - production */
.page-title.hero-title {
    padding: 30px 38px !important;
    box-sizing: border-box;
}

.page-title.hero-title > div {
    max-width: 1040px;
}

.page-title.hero-title .eyebrow {
    display: block;
    margin-bottom: 8px;
    letter-spacing: .08em;
}

.page-title.hero-title h1 {
    margin: 0 0 12px 0;
    line-height: 1.2;
    font-size: clamp(22px, 2.1vw, 30px);
}

.page-title.hero-title p {
    margin: 0;
    line-height: 1.6;
}
/* =========================================================
   Phase 7 - Mobile Auth UI/UX Fix & Premium Responsive Pass
   Scope: CSS-only. Does not change login/register logic.
   Fixes mobile register page being locked by overflow:hidden.
   ========================================================= */
html {
    min-height: 100%;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

body.public {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.public .login-shell {
    isolation: isolate;
}

.login-panel,
.login-copy,
.panel,
.app-card,
.admin-section,
.empty-state,
.error-panel {
    border-radius: clamp(14px, 1.6vw, 22px);
}

.login-panel {
    width: 100%;
    max-width: 100%;
}

.login-panel input,
.login-panel button[type="submit"] {
    width: 100%;
}

.login-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
}

@media (max-width: 920px) {
    body.public {
        display: block;
        min-height: 100vh;
        min-height: 100dvh;
        padding: clamp(14px, 4vw, 24px);
        overflow-y: auto;
        background-attachment: scroll;
    }

    body.public::before,
    body.public::after {
        position: fixed;
        pointer-events: none;
    }

    .public-env {
        position: static;
        width: fit-content;
        margin: 0 0 12px auto;
    }

    .public-flashes {
        position: static;
        width: 100%;
        max-width: 560px;
        margin: 0 auto 12px;
        transform: none;
    }

    .login-shell {
        width: min(560px, 100%);
        min-height: auto !important;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 14px;
        align-items: start;
    }

    .login-copy {
        min-height: auto !important;
        padding: 8px 4px 0 !important;
        text-align: left;
    }

    .login-caption {
        display: inline-flex;
        margin: 0 0 8px;
        font-size: 11px;
        letter-spacing: .06em;
    }

    .login-copy h1 {
        max-width: 100%;
        margin: 0 0 8px;
        font-size: clamp(25px, 7vw, 34px) !important;
        line-height: 1.08;
        letter-spacing: -.035em;
    }

    .login-copy p {
        max-width: 100%;
        margin: 0;
        font-size: 14px;
        line-height: 1.55;
    }

    .login-feature-row {
        margin-top: 14px;
        gap: 7px;
    }

    .login-feature-row span {
        min-height: 28px;
        padding: 6px 10px;
        font-size: 11px;
    }

    .login-proof-grid {
        grid-template-columns: 1fr !important;
        gap: 8px;
        margin-top: 14px;
    }

    .login-proof-grid span {
        min-height: auto;
        grid-template-columns: auto 1fr;
        align-items: center;
        padding: 10px 12px;
        border-radius: 14px;
    }

    .login-proof-grid strong {
        font-size: 14px;
    }

    .login-panel {
        min-height: auto !important;
        max-height: none;
        overflow: visible;
        transform: none !important;
        gap: 15px;
        padding: clamp(20px, 5.5vw, 30px) !important;
        border-radius: 22px;
        box-shadow: 0 22px 58px rgba(5, 18, 26, 0.28);
    }

    .login-panel-brand {
        gap: 10px;
        padding-bottom: 12px;
    }

    .login-panel-brand img {
        max-width: 38px;
        max-height: 38px;
    }

    .login-heading h2 {
        margin-top: 3px;
        font-size: 22px;
    }

    .login-heading p {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.5;
    }

    .login-panel form {
        gap: 12px;
    }

    .login-panel label {
        gap: 6px;
        font-size: 13px;
    }

    .login-panel input,
    .login-panel button[type="submit"] {
        min-height: 48px;
        border-radius: 14px;
        font-size: 16px;
    }

    .login-footer {
        font-size: 12px;
        line-height: 1.45;
    }
}

@media (max-width: 560px) {
    body.public {
        padding: 12px;
    }

    .login-shell {
        gap: 10px;
    }

    .login-copy {
        padding-top: 2px !important;
    }

    .login-feature-row {
        display: none;
    }

    .login-proof-grid {
        display: none;
    }

    .login-panel {
        padding: 18px !important;
        border-radius: 20px;
    }

    .login-panel-brand {
        font-size: 13px;
    }

    .login-panel input,
    .login-panel button[type="submit"] {
        min-height: 46px;
    }

    .login-footer a {
        width: 100%;
        justify-content: center;
        min-height: 42px;
        padding: 8px 10px;
        border: 1px solid rgba(198, 212, 223, 0.9);
        border-radius: 999px;
        background: rgba(255,255,255,.62);
    }
}

@media (max-width: 380px) {
    body.public {
        padding: 10px;
    }

    .login-copy h1 {
        font-size: 24px !important;
    }

    .login-panel {
        padding: 16px !important;
    }
}

/* ===== VNJSC Smart Share Portal MVP ===== */
.share-title { align-items: flex-start; gap: 18px; }
.share-title-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button-link.secondary { background: #eef2ff; color: #1e3a8a; border: 1px solid #c7d2fe; }
.share-kpi-grid, .published-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 18px 0; }
.share-kpi-card, .published-kpis article { background: linear-gradient(145deg, #ffffff, #f8fafc); border: 1px solid rgba(148,163,184,.24); border-radius: 22px; padding: 18px; box-shadow: 0 18px 45px rgba(15, 23, 42, .08); }
.share-kpi-card span, .published-kpis span { color: #64748b; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.share-kpi-card strong, .published-kpis strong { display: block; margin-top: 8px; color: #0f172a; font-size: clamp(26px, 4vw, 40px); line-height: 1; }
.share-kpi-card small, .published-kpis small { color: #64748b; }
.share-panel { border-radius: 24px; overflow: hidden; }
.share-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.share-table { min-width: 920px; border-collapse: separate; border-spacing: 0; width: 100%; }
.share-table th { position: sticky; top: 0; z-index: 1; background: #f8fafc; color: #334155; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.share-table td { vertical-align: top; }
.share-copy-input { width: min(360px, 55vw); border: 1px solid #dbe3ef; border-radius: 12px; padding: 9px 10px; font-size: 12px; color: #334155; background: #f8fafc; }
.status-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 800; }
.status-pill.ok { background: #dcfce7; color: #166534; }
.status-pill.muted { background: #e2e8f0; color: #475569; }
.link-button.danger { color: #b91c1c; }
.share-form { display: grid; gap: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.share-form label { display: grid; gap: 8px; color: #334155; font-weight: 700; }
.share-form input, .share-form select { width: 100%; border: 1px solid #dbe3ef; border-radius: 14px; padding: 12px 14px; font-size: 16px; background: #fff; color: #0f172a; }
.import-help { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 16px; padding: 14px; color: #475569; line-height: 1.6; }
.import-help code { display: block; margin-top: 8px; white-space: normal; color: #1e3a8a; font-size: 12px; }
.share-fieldset { border: 1px solid #dbe3ef; border-radius: 18px; padding: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.share-fieldset legend { color: #0f172a; font-weight: 900; padding: 0 8px; }
.check-pill { display: inline-flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px !important; padding: 8px 11px; border-radius: 999px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 13px; }
.check-pill input { width: auto; }
.check-row { display: flex; flex-wrap: wrap; gap: 18px; }
.check-row label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #334155; }
.check-row input { width: auto; }

.share-public-shell { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top left, rgba(37,99,235,.26), transparent 34%), linear-gradient(135deg, #06172e, #0f172a 55%, #172554); }
.share-auth-card { width: min(520px, 100%); background: rgba(255,255,255,.94); backdrop-filter: blur(18px); border-radius: 28px; padding: clamp(24px, 5vw, 42px); box-shadow: 0 28px 90px rgba(2,6,23,.32); border: 1px solid rgba(255,255,255,.45); }
.share-auth-card h1 { margin: 10px 0 8px; color: #0f172a; font-size: clamp(28px, 6vw, 44px); line-height: 1.05; }
.share-auth-card p { color: #475569; }
.share-auth-form { display: grid; gap: 16px; margin-top: 22px; }
.share-auth-form label { display: grid; gap: 8px; color: #334155; font-weight: 800; }
.share-auth-form input { border: 1px solid #cbd5e1; border-radius: 16px; padding: 14px 16px; font-size: 16px; }
.share-auth-form button, .share-form button, #resetFilters { border: 0; border-radius: 16px; padding: 13px 18px; font-weight: 900; cursor: pointer; color: #fff; background: linear-gradient(135deg, #1d4ed8, #0891b2); box-shadow: 0 14px 30px rgba(37,99,235,.22); }

.published-dashboard { min-height: 100dvh; padding: clamp(16px, 3vw, 34px); background: #f3f6fb; color: #0f172a; position: relative; overflow: hidden; }
.published-dashboard.has-watermark::after { content: attr(data-watermark); position: fixed; inset: auto 8vw 10vh auto; transform: rotate(-18deg); font-size: clamp(28px, 7vw, 72px); color: rgba(15, 23, 42, .045); font-weight: 1000; pointer-events: none; white-space: nowrap; z-index: 0; }
.published-hero, .published-kpis, .published-charts, .published-data-card { position: relative; z-index: 1; }
.published-hero { display: flex; justify-content: space-between; gap: 20px; align-items: stretch; background: linear-gradient(135deg, #0f172a, #1e3a8a); color: #fff; border-radius: 30px; padding: clamp(22px, 4vw, 38px); box-shadow: 0 24px 70px rgba(15,23,42,.22); }
.published-hero h1 { margin: 8px 0; font-size: clamp(30px, 5vw, 56px); line-height: 1.02; }
.published-hero p { color: #cbd5e1; margin: 0; }
.published-meta { min-width: 260px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 22px; padding: 18px; display: grid; gap: 6px; align-content: center; }
.published-meta strong { font-size: 20px; }
.published-meta span, .published-meta small { color: #dbeafe; }
.published-charts { display: grid; grid-template-columns: 1.35fr .9fr; gap: 16px; margin: 16px 0; }
.chart-card, .published-data-card { background: #fff; border: 1px solid rgba(148,163,184,.22); border-radius: 24px; padding: 18px; box-shadow: 0 18px 55px rgba(15,23,42,.07); }
.chart-card h2 { margin: 0 0 12px; font-size: 16px; color: #0f172a; }
.chart-card canvas { width: 100%; display: block; }
.published-toolbar { display: grid; grid-template-columns: 1fr minmax(180px, 260px) auto; gap: 12px; margin-bottom: 14px; }
.published-toolbar input, .published-toolbar select { border: 1px solid #dbe3ef; border-radius: 14px; padding: 12px 14px; font-size: 15px; background: #f8fafc; }
.published-table-wrap { max-height: 58vh; border-radius: 18px; border: 1px solid #e2e8f0; }
.published-table th { top: 0; }
.published-table tr.row-risk td { background: #fff7ed; }
.published-note { color: #64748b; margin-bottom: 0; font-size: 13px; }

@media (max-width: 980px) {
    .share-kpi-grid, .published-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .share-two-col, .published-charts { grid-template-columns: 1fr; }
    .published-hero { flex-direction: column; }
    .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .share-kpi-grid, .published-kpis { grid-template-columns: 1fr; }
    .published-dashboard { padding: 12px; }
    .published-hero { border-radius: 24px; }
    .published-toolbar { grid-template-columns: 1fr; }
    .share-title-actions { width: 100%; }
    .share-title-actions .button-link { width: 100%; justify-content: center; }
    .share-copy-input { width: 260px; }
    .published-table-wrap { max-height: none; }
    .published-table { min-width: 760px; }
}

/* ===== VNJSC Smart Share MVP+ / Phase 2 polish ===== */
.share-copy-wrap { display: flex; gap: 8px; align-items: center; }
.copy-mini { border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; border-radius: 12px; padding: 9px 11px; font-weight: 900; cursor: pointer; }
.sample-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sample-links a { display: inline-flex; padding: 7px 10px; border-radius: 999px; background: #eef2ff; color: #1e40af; font-weight: 800; text-decoration: none; font-size: 12px; }
.published-actionbar { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0 -4px; }
.view-toggle { display: inline-flex; gap: 6px; align-items: center; padding: 5px; border-radius: 999px; background: #fff; border: 1px solid #dbe3ef; box-shadow: 0 10px 30px rgba(15,23,42,.06); }
.view-toggle button { border: 0; background: transparent; color: #475569; border-radius: 999px; padding: 8px 12px; font-weight: 900; cursor: pointer; }
.view-toggle button.active { background: #1d4ed8; color: #fff; }
.export-link { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 11px 16px; background: linear-gradient(135deg, #10b981, #0891b2); color: #fff; text-decoration: none; font-weight: 900; box-shadow: 0 14px 30px rgba(16,185,129,.22); }
.chart-card-wide { grid-column: 1 / -1; }
.published-toolbar { grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) minmax(140px, 170px) minmax(140px, 170px) auto; }
.view-toggle { margin-bottom: 12px; justify-content: flex-end; width: fit-content; margin-left: auto; }
#visibleCount { color: #475569; font-size: 13px; font-weight: 900; padding: 0 10px; }
.share-card-list { display: grid; gap: 12px; }
.share-row-card { border: 1px solid #e2e8f0; border-radius: 18px; padding: 14px; background: #fff; box-shadow: 0 10px 25px rgba(15,23,42,.05); }
.share-row-card.row-risk { border-color: #fed7aa; background: #fff7ed; }
.share-row-card.row-done { border-color: #bbf7d0; background: #f0fdf4; }
.share-row-card h3 { margin: 0; color: #0f172a; font-size: 16px; }
.share-row-card p { margin: 6px 0 12px; color: #64748b; font-size: 13px; }
.share-row-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.share-row-card-grid span { border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid rgba(148,163,184,.25); padding: 9px 10px; }
.share-row-card-grid small { display: block; color: #64748b; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.share-row-card-grid strong { display: block; margin-top: 3px; color: #0f172a; font-size: 14px; }
.published-table tr.row-done td { background: #f0fdf4; }

@media (max-width: 980px) {
    .published-toolbar { grid-template-columns: 1fr 1fr; }
    .published-toolbar #resetFilters { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .published-actionbar { flex-direction: column; align-items: stretch; }
    .export-link { width: 100%; justify-content: center; }
    .published-toolbar { grid-template-columns: 1fr; }
    .view-toggle { margin-left: 0; width: 100%; justify-content: center; flex-wrap: wrap; border-radius: 18px; }
    .share-row-card-grid { grid-template-columns: 1fr; }
    .share-copy-wrap { min-width: 340px; }
}

/* ===== VNJSC Smart Share Phase 3 - production hardening ===== */
.share-phase3-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.share-phase3-grid article { border: 1px solid rgba(37,99,235,.16); border-radius: 18px; padding: 15px; background: linear-gradient(145deg, #eff6ff, #fff); box-shadow: 0 12px 30px rgba(15,23,42,.05); }
.share-phase3-grid strong { display: block; color: #1e3a8a; font-size: 15px; margin-bottom: 5px; }
.share-phase3-grid span { color: #475569; font-size: 13px; line-height: 1.45; }
.status-pill.warn { background: #fef3c7; color: #92400e; }
.changed-fields { display: flex; flex-direction: column; gap: 6px; max-width: 540px; }
.changed-fields span { display: inline-block; border-radius: 12px; padding: 7px 9px; background: #f8fafc; border: 1px solid #e2e8f0; color: #334155; font-size: 12px; }
.phase3-change-table td code, .share-table code { white-space: pre-wrap; word-break: break-word; color: #334155; font-size: 12px; }
.check-pill.selected { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; box-shadow: inset 0 0 0 1px rgba(37,99,235,.08); }
.activity-item a { color: #1d4ed8; text-decoration: none; }
.activity-item a:hover { text-decoration: underline; }
@media (max-width: 760px) { .share-phase3-grid { grid-template-columns: 1fr; } }

/* Smart Share Phase 4: import preview + practical validation polish */
.import-mapping-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}
.import-mapping-list span {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(248, 250, 252, 0.92);
  color: #334155;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
}
.import-confirm-panel {
  border: 1px solid rgba(34, 197, 94, 0.22);
  background: linear-gradient(135deg, rgba(240, 253, 244, 0.9), rgba(255, 255, 255, 0.96));
}
.import-confirm-panel button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.share-form small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  line-height: 1.45;
}
.share-title-actions .button-link + .button-link {
  margin-left: 8px;
}
.phase4-warning-note {
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
  padding: 12px 14px;
  border-radius: 12px;
  color: #92400e;
}
@media (max-width: 720px) {
  .import-mapping-list span { font-size: 11px; padding: 6px 8px; }
  .share-title-actions .button-link + .button-link { margin-left: 0; margin-top: 8px; }
}

/* Smart Share Phase 5 - data management polish */
.share-filter-form .form-grid { align-items: end; }
.button-link.compact { padding: 8px 12px; border-radius: 12px; font-size: 13px; }
.pagination-row { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.record-identity { display: grid; gap: 5px; padding: 16px; margin-bottom: 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(15,23,42,.06), rgba(14,165,233,.08)); border: 1px solid rgba(15,23,42,.08); }
.record-identity span { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--muted, #64748b); font-weight: 800; }
.record-identity strong { font-size: 18px; color: var(--ink, #0f172a); }
.record-identity small { color: var(--muted, #64748b); }
.form-grid .full-span { grid-column: 1 / -1; }
.share-form textarea { width: 100%; border: 1px solid rgba(148,163,184,.5); border-radius: 14px; padding: 12px 14px; font: inherit; resize: vertical; background: #fff; }
.danger-zone { border-color: rgba(239,68,68,.25) !important; background: linear-gradient(135deg, rgba(254,242,242,.95), rgba(255,255,255,.98)); }
.danger-button { border: 0; border-radius: 14px; padding: 11px 16px; font-weight: 800; color: #fff; background: #dc2626; cursor: pointer; }
.danger-button:hover { filter: brightness(.95); }
@media (max-width: 760px) { .pagination-row { justify-content: stretch; } .pagination-row .button-link { flex: 1; text-align: center; } }


/* Smart Share Phase 6-7 - feedback + audit workflow */
.share-feedback-kpis { margin-top: 12px; }
.published-feedback-help {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 14px 0;
  border: 1px solid rgba(37,99,235,.14);
  background: linear-gradient(135deg, rgba(239,246,255,.96), rgba(255,255,255,.98));
  border-radius: 18px;
  padding: 12px 14px;
  color: #334155;
}
.published-feedback-help strong { color: #1e3a8a; white-space: nowrap; }
.published-feedback-help span { font-size: 13px; line-height: 1.45; }
.feedback-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 220px; }
.feedback-actions button { border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 999px; padding: 7px 9px; font-size: 12px; font-weight: 800; cursor: pointer; }
.feedback-actions button:hover { border-color: #2563eb; color: #1d4ed8; background: #eff6ff; }
.feedback-state, .feedback-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 10px; font-size: 12px; font-weight: 900; background: #f1f5f9; color: #475569; }
.feedback-confirmed .feedback-state, .feedback-pill.confirmed { background: #dcfce7; color: #166534; }
.feedback-need_discussion .feedback-state, .feedback-pill.need_discussion { background: #fef3c7; color: #92400e; }
.feedback-commented .feedback-state, .feedback-pill.commented { background: #dbeafe; color: #1e40af; }
.published-feedback-panel { position: relative; z-index: 2; margin-top: 18px; }
.feedback-panel-card { border: 1px solid rgba(37,99,235,.18); background: #fff; border-radius: 24px; padding: 18px; box-shadow: 0 18px 50px rgba(15,23,42,.12); display: grid; gap: 14px; }
.feedback-panel-card h2 { margin: 6px 0; color: #0f172a; }
.feedback-panel-card p { margin: 0; color: #64748b; }
.feedback-form { display: grid; gap: 12px; }
.feedback-form label { display: grid; gap: 6px; color: #334155; font-weight: 800; }
.feedback-form input, .feedback-form select, .feedback-form textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 14px; padding: 11px 12px; font: inherit; background: #f8fafc; }
.feedback-identity-grid { grid-template-columns: 1fr 1fr; }
.muted-button { border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 14px; padding: 11px 16px; font-weight: 800; cursor: pointer; }
@media (max-width: 760px) {
  .published-feedback-help { align-items: flex-start; flex-direction: column; }
  .feedback-identity-grid { grid-template-columns: 1fr; }
  .feedback-actions { min-width: 0; }
  .feedback-actions button, .feedback-state { width: 100%; justify-content: center; }
}

/* Phase 7 - Smart Share audit, timeline, resolved feedback */
.status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid rgba(15,23,42,.12);background:#f8fafc;color:#334155}.status-pill.resolved{background:#ecfdf5;color:#047857;border-color:#a7f3d0}.status-pill.open{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.inline-resolve-form{display:grid;gap:8px;min-width:220px}.inline-resolve-form input{min-height:36px;border:1px solid #dbe3ef;border-radius:10px;padding:8px 10px}.inline-resolve-form button{border:0;border-radius:10px;background:#0f172a;color:white;padding:9px 12px;font-weight:800;cursor:pointer}.json-pre{max-width:680px;max-height:260px;overflow:auto;background:#0b1220;color:#dbeafe;border-radius:12px;padding:12px;font-size:12px;white-space:pre-wrap;word-break:break-word}.timeline-panel{position:relative}.timeline-list{display:grid;gap:14px;margin-top:12px}.timeline-item{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;padding:14px;border:1px solid #e5eaf2;border-radius:16px;background:linear-gradient(180deg,#fff,#f8fafc)}.timeline-dot{width:14px;height:14px;border-radius:999px;background:#2563eb;box-shadow:0 0 0 5px rgba(37,99,235,.12);margin-top:5px}.timeline-item strong{display:block;color:#0f172a}.timeline-item small{display:block;color:#64748b;margin-top:3px}.timeline-item p{margin:8px 0 0;color:#334155}.published-empty-state{margin:16px 0;padding:16px 18px;border:1px solid #fed7aa;background:#fff7ed;color:#9a3412;border-radius:18px;display:grid;gap:6px}.published-empty-state strong{font-size:16px}.published-empty-state span{line-height:1.55}.share-title-actions{gap:10px;flex-wrap:wrap}@media (max-width:760px){.inline-resolve-form{min-width:0}.json-pre{max-width:100%;font-size:11px}.timeline-item{grid-template-columns:14px 1fr;padding:12px}.timeline-dot{width:11px;height:11px}.share-title-actions .button-link{width:100%;justify-content:center}}

/* Phase 8 - Excel Template Center */
.share-phase8-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0;
}
.phase8-template-card {
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 22px;
  background: linear-gradient(145deg, #ffffff, #f8fbff);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .07);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.phase8-template-card h2 { margin: 0; color: #0f172a; font-size: 20px; }
.phase8-template-card p { margin: 0; color: #334155; line-height: 1.55; }
.phase8-template-card small { color: #64748b; line-height: 1.45; }
.template-card-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.phase8-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 12px 0 0; list-style: none; }
.phase8-steps li { border: 1px solid #e2e8f0; background: #fff; border-radius: 16px; padding: 13px; display: grid; gap: 6px; }
.phase8-steps strong { color: #1e3a8a; }
.phase8-steps span { color: #475569; font-size: 13px; line-height: 1.45; }
.phase8-template-links a:first-child { background: #0f172a; color: #fff; border-color: #0f172a; }
@media (max-width: 980px) {
  .share-phase8-template-grid { grid-template-columns: 1fr; }
  .phase8-steps { grid-template-columns: 1fr; }
  .template-card-actions .button-link { flex: 1; justify-content: center; }
}

/* ===== Smart Share Phase 9: module-specific premium dashboards ===== */
.published-module-brief {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 18px 20px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 64, 175, 0.88));
    color: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    margin: 16px 0;
}
.published-module-brief h2 { margin: 4px 0 6px; font-size: clamp(20px, 2.4vw, 30px); }
.published-module-brief p { margin: 0; color: rgba(255,255,255,.78); }
.published-module-brief .eyebrow { color: rgba(191, 219, 254, .95); }
.published-module-brief > strong {
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    padding: 10px 14px;
    background: rgba(255,255,255,.1);
}
.published-module-brief.module-stock { background: linear-gradient(135deg, rgba(6, 78, 59, 0.96), rgba(14, 116, 144, 0.88)); }
.published-module-brief.module-quality { background: linear-gradient(135deg, rgba(127, 29, 29, 0.96), rgba(180, 83, 9, 0.88)); }
.published-module-brief.module-mixed { background: linear-gradient(135deg, rgba(49, 46, 129, 0.96), rgba(14, 116, 144, 0.88)); }
.published-kpis-phase9 article.success { border-color: rgba(16,185,129,.28); background: linear-gradient(180deg, #ffffff, #ecfdf5); }
.published-kpis-phase9 article.warning { border-color: rgba(245,158,11,.32); background: linear-gradient(180deg, #ffffff, #fffbeb); }
.published-kpis-phase9 article.danger { border-color: rgba(239,68,68,.32); background: linear-gradient(180deg, #ffffff, #fef2f2); }
.published-insights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 14px 0;
}
.published-insights article {
    border: 1px solid #e2e8f0;
    background: rgba(255,255,255,.92);
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.published-insights span, .published-insights small { display: block; color: #64748b; }
.published-insights strong { display: block; margin: 6px 0 4px; color: #0f172a; font-size: 24px; }
.phase9-charts .chart-card { min-height: 250px; }
.phase9-charts .chart-card h2 { display: flex; align-items: center; gap: 8px; }
.phase9-charts .chart-card h2::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #2563eb;
    box-shadow: 0 0 0 5px rgba(37,99,235,.12);
}
@media (max-width: 840px) {
    .published-module-brief { align-items: flex-start; flex-direction: column; border-radius: 20px; }
    .published-module-brief > strong { white-space: normal; }
    .published-insights { grid-template-columns: 1fr; }
    .phase9-charts .chart-card { min-height: 220px; }
}

/* Phase 10 - Smart security UX */
.share-security-note {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(15, 118, 110, .08);
    color: #0f766e;
    font-size: 13px;
    line-height: 1.45;
    border: 1px solid rgba(15, 118, 110, .18);
}
.share-security-note.is-warning {
    background: rgba(180, 83, 9, .10);
    color: #92400e;
    border-color: rgba(180, 83, 9, .22);
}
.share-auth-form button[disabled] {
    opacity: .55;
    cursor: not-allowed;
}
.published-security-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(148,163,184,.24);
    box-shadow: 0 12px 30px rgba(15,23,42,.06);
    color: #334155;
    font-size: 13px;
}
.published-security-strip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.published-security-strip .security-warning {
    color: #92400e;
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .24);
    border-radius: 999px;
    padding: 5px 10px;
}
@media (max-width: 640px) {
    .published-security-strip {
        align-items: stretch;
        flex-direction: column;
    }
    .published-security-strip .security-warning {
        border-radius: 12px;
    }
}


/* Phase 11 - Live Update Workbench */
.live-update-note article { border-left: 4px solid rgba(37, 99, 235, .35); }
.live-update-panel { overflow: visible; }
.live-update-wrap { max-height: 72vh; overflow: auto; border-radius: 18px; }
.live-update-table { min-width: 1500px; }
.live-update-table thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; }
.compact-input, .compact-textarea { width: 100%; min-width: 92px; border: 1px solid #d8e0ee; border-radius: 10px; padding: 8px 9px; font: inherit; background: #fff; color: #172033; }
.compact-input.number { min-width: 86px; text-align: right; }
.compact-input.status { min-width: 130px; }
.compact-textarea { min-width: 220px; resize: vertical; }
.sticky-save-row { position: sticky; bottom: 0; z-index: 3; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border-top: 1px solid #e5ecf6; padding-top: 14px; }
@media (max-width: 760px) {
  .live-update-wrap { max-height: 68vh; }
  .live-update-table { min-width: 1280px; }
  .compact-input, .compact-textarea { font-size: 16px; }
}

/* ===== Smart Share Premium UI Polish ===== */
.page-title.share-title,
.share-panel,
.share-form,
.share-phase8-template-grid,
.timeline-panel,
.feedback-panel-card,
.share-auth-card,
.published-dashboard,
.published-module-brief,
.published-data-card,
.chart-card,
.inline-resolve-form,
.share-overview-block {
    font-family: Roboto, "Segoe UI", Arial, Helvetica, sans-serif;
}

.share-title.share-title-premium {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, .95fr);
    align-items: stretch;
    gap: 22px;
    margin-bottom: 10px;
}

.share-title-copy {
    padding: 8px 2px 4px;
}

.share-title-copy h1 {
    margin: 6px 0 12px;
    max-width: 14ch;
    line-height: 1.08;
}

.share-title-copy p {
    max-width: 70ch;
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 16px;
}

.share-inline-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.share-inline-badges span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border: 1px solid rgba(148, 163, 184, .28);
    box-shadow: 0 12px 26px rgba(15, 23, 42, .05);
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
}

.share-inline-badges span::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #0f766e;
    box-shadow: 0 0 0 5px rgba(15,118,110,.12);
}

.share-actions-panel {
    border: 1px solid rgba(148, 163, 184, .26);
    border-radius: 28px;
    padding: 18px;
    background: linear-gradient(180deg, #ffffff, #f7faff);
    box-shadow: 0 22px 50px rgba(15, 23, 42, .08);
    display: grid;
    gap: 16px;
}

.share-actions-head {
    display: grid;
    gap: 4px;
}

.share-actions-head strong {
    color: #0f172a;
    font-size: 20px;
    line-height: 1.25;
}

.share-actions-head small {
    color: #64748b;
    line-height: 1.55;
}

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

.share-action-tile {
    text-decoration: none;
    display: grid;
    gap: 5px;
    min-height: 96px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #dbe6f5;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    color: #1e3a8a;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.share-action-tile strong {
    color: #0f172a;
    font-size: 15px;
    line-height: 1.35;
}

.share-action-tile span {
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}

.share-action-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, .28);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .10);
}

.share-action-tile.is-primary {
    background: linear-gradient(135deg, #0f766e, #0f4c81);
    border-color: transparent;
}

.share-action-tile.is-primary strong,
.share-action-tile.is-primary span {
    color: #fff;
}

.share-overview-block {
    margin-top: 20px;
}

.share-section-heading {
    margin-bottom: 12px;
}

.share-section-heading h2 {
    margin-top: 4px;
}

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

.share-kpi-card {
    min-height: 148px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.share-kpi-card::after {
    content: '';
    position: absolute;
    top: -22px;
    right: -22px;
    width: 82px;
    height: 82px;
    border-radius: 999px;
    background: rgba(255,255,255,.4);
}

.share-kpi-card span,
.published-kpis span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
}

.share-kpi-card small,
.published-kpis small {
    line-height: 1.55;
}

.share-kpi-card.tone-production { background: linear-gradient(180deg, #ffffff, #eef6ff); border-color: rgba(59, 130, 246, .18); }
.share-kpi-card.tone-stock { background: linear-gradient(180deg, #ffffff, #ecfdf5); border-color: rgba(16, 185, 129, .18); }
.share-kpi-card.tone-quality { background: linear-gradient(180deg, #ffffff, #fff7ed); border-color: rgba(249, 115, 22, .18); }
.share-kpi-card.tone-total { background: linear-gradient(180deg, #ffffff, #f5f3ff); border-color: rgba(139, 92, 246, .18); }
.share-kpi-card.tone-confirmed { background: linear-gradient(180deg, #ffffff, #ecfdf5); border-color: rgba(16, 185, 129, .18); }
.share-kpi-card.tone-discussion { background: linear-gradient(180deg, #ffffff, #fffbeb); border-color: rgba(245, 158, 11, .22); }
.share-kpi-card.tone-commented { background: linear-gradient(180deg, #ffffff, #eff6ff); border-color: rgba(37, 99, 235, .18); }

.share-panel {
    border: 1px solid rgba(148, 163, 184, .20);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .06);
}

.share-panel .section-heading h2 {
    margin-top: 4px;
}

.share-two-col {
    align-items: start;
}

.share-title-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    width: 100%;
}

.share-title-actions .button-link {
    width: 100%;
    min-height: 46px;
    justify-content: center;
    text-align: center;
    font-family: Roboto, "Segoe UI", Arial, Helvetica, sans-serif;
}

.button-link,
.copy-mini,
.link-button,
.share-form button,
#resetFilters,
.share-auth-form button,
.export-link,
.feedback-actions button,
.muted-button,
.inline-resolve-form button {
    font-family: Roboto, "Segoe UI", Arial, Helvetica, sans-serif;
}

.button-link.secondary {
    background: #f8fafc;
    color: #1e3a8a;
    border: 1px solid #dbe6f5;
}

.share-table th,
.share-table td,
.published-table th,
.published-table td {
    line-height: 1.5;
}

.share-table td strong {
    color: #0f172a;
}

.share-copy-wrap {
    gap: 10px;
}

.share-copy-input {
    height: 42px;
    padding: 10px 12px;
    background: #fff;
}

.copy-mini {
    min-width: 74px;
    min-height: 42px;
    border-radius: 14px;
}

.activity-item {
    border: 1px solid rgba(148,163,184,.16);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #fbfdff);
}

.share-feedback-kpis .share-kpi-card strong,
.share-kpi-grid-balanced .share-kpi-card strong {
    font-size: clamp(30px, 4.6vw, 42px);
}

@media (max-width: 1180px) {
    .share-title.share-title-premium {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .share-kpi-grid-balanced {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .share-action-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .share-action-grid,
    .share-title-actions,
    .share-kpi-grid-balanced {
        grid-template-columns: 1fr;
    }

    .share-title-copy h1 {
        max-width: none;
    }

    .share-action-tile {
        min-height: auto;
    }
}

/* ===== Smart Share Public Premium Refresh ===== */
.share-public-shell.share-public-login {
    min-height: calc(100dvh - 48px);
    background: transparent;
    padding: clamp(18px, 3vw, 38px);
}

.share-auth-card.share-auth-card-premium {
    width: min(580px, 100%);
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.58);
    box-shadow: 0 30px 80px rgba(2, 18, 38, .22);
}

.share-auth-topline {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.share-auth-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(15, 118, 110, .10);
    border: 1px solid rgba(15,118,110,.14);
    color: #0f766e;
    font-size: 12px;
    font-weight: 800;
}

.share-auth-subtitle {
    margin-bottom: 14px;
}

.share-auth-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.share-auth-meta span {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.published-dashboard.published-dashboard-premium {
    width: min(1280px, 100%);
    margin: 0 auto;
    padding: clamp(20px, 2.5vw, 34px);
    background: rgba(248, 250, 252, .94);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 34px;
    box-shadow: 0 26px 80px rgba(9, 25, 42, .18);
    backdrop-filter: blur(8px);
}

.published-hero.published-hero-premium {
    align-items: center;
    border-radius: 28px;
    padding: clamp(24px, 3.2vw, 34px);
    background: linear-gradient(120deg, #0f2f66 0%, #0f2350 46%, #1f3b8d 100%);
    box-shadow: 0 24px 60px rgba(15,35,80,.24);
}

.published-hero-copy {
    max-width: 760px;
}

.published-hero.published-hero-premium .eyebrow {
    color: #2dd4bf;
    font-weight: 900;
}

.published-hero.published-hero-premium h1 {
    color: #ffffff;
    margin: 10px 0 14px;
    line-height: 1.06;
    text-shadow: 0 10px 30px rgba(0,0,0,.14);
}

.published-hero.published-hero-premium p {
    color: rgba(255,255,255,.82);
    font-size: 17px;
    line-height: 1.65;
}

.published-meta.published-meta-premium {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.16);
    min-width: 280px;
}

.published-meta.published-meta-premium strong,
.published-meta.published-meta-premium span,
.published-meta.published-meta-premium small {
    color: #ffffff;
}

.published-utilitybar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 16px 0 18px;
}

.published-utility-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.utility-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(148,163,184,.22);
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(15,23,42,.05);
}

.utility-pill-warning {
    background: #fff7ed;
    border-color: rgba(245, 158, 11, .24);
    color: #9a3412;
}

.published-module-brief.published-module-brief-premium {
    margin-top: 8px;
    padding: 20px 22px;
    border-radius: 24px;
}

.published-module-brief.published-module-brief-premium h2 {
    margin: 6px 0 8px;
}

.published-module-brief.published-module-brief-premium p {
    color: rgba(255,255,255,.82);
    font-size: 15px;
}

.published-kpis-phase9,
.published-insights-premium,
.published-charts-premium,
.published-feedback-dock,
.published-data-card-premium {
    position: relative;
    z-index: 1;
}

.published-kpis-phase9 {
    gap: 18px;
    margin: 18px 0;
}

.published-kpis-phase9 article,
.published-insights-premium article {
    border: 1px solid rgba(148,163,184,.16);
    box-shadow: 0 14px 34px rgba(15,23,42,.05);
}

.published-kpis-phase9 article strong {
    color: #0f172a;
}

.published-insights-premium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 18px;
}

.published-insights-premium article {
    background: #ffffff;
    border-radius: 20px;
    padding: 18px;
}

.published-insights-premium article span {
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.published-insights-premium article small {
    font-size: 12px;
}

.published-charts-premium {
    gap: 18px;
    margin: 18px 0;
}

.chart-card {
    padding: 18px 18px 16px;
}

.chart-card-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.chart-card-head h2 {
    margin: 0;
}

.chart-card-head small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
    text-align: right;
    max-width: 220px;
}

.focus-list {
    display: grid;
    gap: 12px;
    min-height: 40px;
    padding-top: 4px;
}

.focus-item {
    display: grid;
    gap: 8px;
}

.focus-item-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    color: #334155;
}

.focus-item-head strong {
    color: #0f172a;
}

.focus-item-bar {
    position: relative;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: #e2e8f0;
}

.focus-item-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1d4ed8, #06b6d4);
}

.focus-item-fill.module-production { background: linear-gradient(90deg, #f59e0b, #fb7185); }
.focus-item-fill.module-stock { background: linear-gradient(90deg, #2563eb, #06b6d4); }
.focus-item-fill.module-quality { background: linear-gradient(90deg, #ef4444, #f59e0b); }
.focus-empty {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 0;
}

.published-feedback-dock {
    margin: 18px 0;
}

.feedback-panel-card.feedback-panel-card-visible {
    background: linear-gradient(180deg, #ffffff, #f9fbff);
    border: 1px solid rgba(59,130,246,.16);
    box-shadow: 0 18px 48px rgba(15,23,42,.08);
}

.feedback-form-premium {
    gap: 14px;
}

.feedback-main-grid {
    grid-template-columns: 1fr 1fr;
}

.feedback-form-premium input[readonly] {
    color: #334155;
    font-weight: 700;
}

.feedback-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: auto;
}

.feedback-actions .feedback-state {
    order: 2;
}

.feedback-open-button {
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #1d4ed8, #0891b2);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(37,99,235,.18);
}

.published-data-card.published-data-card-premium {
    padding: 20px;
}

.published-data-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.published-data-head h2 {
    margin: 4px 0 0;
    color: #0f172a;
}

.published-toolbar.published-toolbar-premium {
    margin-bottom: 16px;
}

.published-toolbar-premium input,
.published-toolbar-premium select,
.published-toolbar-premium button {
    min-height: 46px;
}

.published-table-wrap {
    background: #fff;
}

.published-table td,
.published-table th {
    font-size: 13px;
}

.published-note {
    margin-top: 12px;
    color: #64748b;
}

@media (max-width: 980px) {
    .published-utilitybar,
    .published-data-head,
    .chart-card-head {
        flex-direction: column;
        align-items: stretch;
    }

    .chart-card-head small {
        max-width: none;
        text-align: left;
    }

    .feedback-main-grid,
    .published-insights-premium {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .share-auth-topline {
        flex-direction: column;
        align-items: flex-start;
    }

    .published-dashboard.published-dashboard-premium {
        border-radius: 24px;
        padding: 16px;
    }

    .published-hero.published-hero-premium,
    .published-module-brief.published-module-brief-premium {
        border-radius: 22px;
    }

    .utility-pill,
    .view-toggle,
    .export-link {
        width: 100%;
        justify-content: center;
    }
}

/* ===== Smart Share Public Premium V2 Polish ===== */
.published-dashboard.published-dashboard-premium {
    width: min(1240px, 100%);
    padding: clamp(18px, 2vw, 28px);
    border-radius: 30px;
}

.published-hero.published-hero-premium {
    padding: clamp(20px, 2.3vw, 28px);
    border-radius: 26px;
}

.published-hero.published-hero-premium h1 {
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.08;
}

.published-hero.published-hero-premium p {
    font-size: 15px;
    line-height: 1.55;
}

.published-meta.published-meta-premium {
    padding: 18px 18px;
    min-width: 260px;
}

.published-meta strong {
    font-size: 18px;
}

.published-utilitybar {
    margin: 14px 0 14px;
}

.utility-pill {
    padding: 9px 13px;
    font-size: 12px;
}

.published-module-brief.published-module-brief-premium {
    padding: 16px 20px;
    min-height: auto;
    background: linear-gradient(120deg, #142e63 0%, #23418a 100%);
}

.published-module-brief.published-module-brief-premium .eyebrow {
    color: #a7f3d0;
}

.published-module-brief.published-module-brief-premium h2 {
    margin: 4px 0 6px;
    color: #ffffff;
    font-size: clamp(24px, 2.3vw, 34px);
    line-height: 1.18;
    text-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

.published-module-brief.published-module-brief-premium p {
    margin: 0;
    color: rgba(255,255,255,.92);
    font-size: 14px;
}

.published-module-brief.published-module-brief-premium strong {
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
}

.published-kpis-phase9 {
    gap: 14px;
    margin: 14px 0;
}

.published-kpis-phase9 article {
    padding: 16px 18px;
    min-height: 118px;
    border-radius: 20px;
}

.published-kpis-phase9 article strong {
    font-size: clamp(24px, 3vw, 42px);
    line-height: 1.05;
}

.published-kpis-phase9 article small,
.published-kpis-phase9 article span,
.published-insights-premium article span,
.published-insights-premium article small {
    line-height: 1.45;
}

.published-insights-premium {
    gap: 14px;
    margin: 0 0 14px;
}

.published-insights-premium article {
    padding: 14px 16px;
    border-radius: 18px;
}

.published-insights-premium article strong {
    font-size: 18px;
}

.published-charts-premium {
    gap: 14px;
    margin: 14px 0;
}

.chart-card {
    border-radius: 22px;
    padding: 16px 16px 14px;
}

.chart-card-head {
    margin-bottom: 8px;
}

.chart-card-head h2 {
    font-size: 15px;
}

.chart-card-head small {
    font-size: 11px;
    max-width: 180px;
}

.published-feedback-dock {
    margin: 14px 0;
}

.feedback-panel-card.feedback-panel-card-visible {
    border-radius: 22px;
    padding: 18px;
    border: 1px solid rgba(37, 99, 235, .14);
}

.feedback-panel-card-visible .eyebrow {
    color: #0f766e;
}

.feedback-panel-card-visible h2 {
    font-size: 22px;
    margin: 6px 0 8px;
}

.feedback-panel-card-visible p {
    margin: 0;
    color: #475569;
    line-height: 1.55;
}

.feedback-form-premium {
    margin-top: 14px;
}

.feedback-form-premium label {
    font-size: 13px;
}

.feedback-form-premium input,
.feedback-form-premium select,
.feedback-form-premium textarea {
    min-height: 44px;
    border-radius: 14px;
}

.feedback-form-premium textarea {
    min-height: 110px;
}

.feedback-form-premium .form-actions button {
    min-height: 46px;
    border-radius: 14px;
    padding: 0 18px;
}

.feedback-steps-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
}

.feedback-step-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, #eff6ff, #f8fbff);
    border: 1px solid rgba(37, 99, 235, .16);
    box-shadow: 0 10px 22px rgba(15,23,42,.05);
}

.feedback-step-chip strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #fff;
    font-size: 12px;
}

.feedback-step-chip em {
    font-style: normal;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
}

.published-data-card.published-data-card-premium {
    padding: 18px;
    border-radius: 24px;
}

.published-data-head {
    margin-bottom: 12px;
}

.published-data-head h2 {
    font-size: 18px;
    line-height: 1.25;
}

.published-toolbar.published-toolbar-premium {
    grid-template-columns: minmax(180px, 2.1fr) repeat(4, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.published-toolbar-premium input,
.published-toolbar-premium select,
.published-toolbar-premium button {
    min-height: 42px;
    border-radius: 14px;
}

.view-toggle {
    padding: 4px;
}

.view-toggle span {
    font-size: 13px;
    padding: 0 10px;
}

.view-toggle button {
    padding: 9px 14px;
}

.published-table th,
.published-table td {
    padding: 10px 12px;
}

.published-table td:last-child,
.published-table th:last-child {
    min-width: 136px;
}

.feedback-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.feedback-state {
    align-self: flex-start;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 11px;
    background: #eef2ff;
    color: #334155;
}

.feedback-open-button {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f97316, #ef4444);
    border: 1px solid rgba(239, 68, 68, .18);
    box-shadow: 0 12px 26px rgba(239,68,68,.22);
    transition: transform .16s ease, box-shadow .16s ease;
}

.feedback-open-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(239,68,68,.28);
}

.share-row-card {
    border-radius: 20px;
}

.share-row-card .feedback-actions {
    margin-top: 12px;
}

.focus-list {
    gap: 10px;
}

.focus-item-head {
    font-size: 12px;
}

.focus-item-bar {
    height: 10px;
}

@media (max-width: 1100px) {
    .published-toolbar.published-toolbar-premium {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .published-module-brief.published-module-brief-premium h2 {
        font-size: 22px;
    }

    .feedback-steps-banner {
        flex-direction: column;
    }

    .feedback-step-chip {
        border-radius: 18px;
    }

    .published-toolbar.published-toolbar-premium {
        grid-template-columns: 1fr;
    }

    .feedback-actions {
        align-items: stretch;
    }
}


/* ===== Smart Share Phase 12: bulk update + smart alerts ===== */
.share-alert-board {
    margin: 20px 0;
}
.share-alert-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
.share-alert-card {
    display: grid;
    gap: 6px;
    min-height: 128px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(148,163,184,.18);
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: 0 14px 32px rgba(15,23,42,.06);
}
.share-alert-card strong {
    color: #0f172a;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1;
}
.share-alert-card span {
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}
.share-alert-card small {
    color: #64748b;
    line-height: 1.45;
}
.share-alert-card.is-danger {
    background: linear-gradient(180deg, #ffffff, #fef2f2);
    border-color: rgba(239,68,68,.22);
}
.share-alert-card.is-danger strong { color: #b91c1c; }
.share-alert-card.is-warning {
    background: linear-gradient(180deg, #ffffff, #fffbeb);
    border-color: rgba(245,158,11,.24);
}
.share-alert-card.is-warning strong { color: #b45309; }
.share-alert-card.is-ok {
    background: linear-gradient(180deg, #ffffff, #ecfdf5);
    border-color: rgba(16,185,129,.20);
}
.share-alert-card.is-ok strong { color: #047857; }
.share-alert-card.is-info {
    background: linear-gradient(180deg, #ffffff, #eff6ff);
    border-color: rgba(37,99,235,.20);
}
.share-alert-card.is-info strong { color: #1d4ed8; }

.phase12-live-kpis article strong {
    color: #0f172a;
    font-size: 26px;
}
.phase12-bulk-panel {
    display: grid;
    grid-template-columns: minmax(240px, .8fr) minmax(0, 1.8fr);
    gap: 16px;
    align-items: start;
    margin: 0 0 14px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(37,99,235,.16);
    background: linear-gradient(135deg, #ffffff, #f8fbff);
    box-shadow: 0 12px 28px rgba(15,23,42,.06);
}
.phase12-bulk-panel strong {
    display: block;
    margin: 4px 0;
    color: #0f172a;
    font-size: 18px;
}
.phase12-bulk-panel small {
    display: block;
    color: #64748b;
    line-height: 1.5;
}
.phase12-bulk-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.phase12-bulk-grid label {
    display: grid;
    gap: 6px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}
.bulk-check-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.phase12-row-check,
#phase12SelectAll {
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
}
.live-update-table tr.live-row-updated-today td {
    background: #ecfdf5;
}
.live-update-table tr.live-row-need-update td {
    background: #fff7ed;
}
.freshness-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    border: 1px solid rgba(148,163,184,.22);
}
.freshness-chip.updated {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}
.freshness-chip.need {
    background: #ffedd5;
    color: #9a3412;
    border-color: #fed7aa;
}
.freshness-chip.normal {
    background: #eff6ff;
    color: #1e40af;
    border-color: #bfdbfe;
}
.live-update-table .compact-input,
.live-update-table .compact-textarea,
.phase12-bulk-panel .compact-input,
.phase12-bulk-panel .compact-textarea {
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    padding: 9px 10px;
    font: inherit;
    background: #fff;
}
.live-update-table .compact-input {
    min-width: 90px;
}
.live-update-table .compact-textarea {
    min-width: 180px;
}
@media (max-width: 1180px) {
    .share-alert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .phase12-bulk-panel { grid-template-columns: 1fr; }
    .phase12-bulk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .share-alert-grid,
    .phase12-bulk-grid { grid-template-columns: 1fr; }
}

/* Smart Share source-scope fix */
.share-batch-fieldset {
    margin-top: 18px;
}
.share-source-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}
.share-source-toolbar #shareBatchHint {
    color: #475569;
    font-size: 13px;
}
.share-batch-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 10px;
    max-height: 360px;
    overflow: auto;
    padding: 4px;
}
.share-batch-option {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 1px solid #d8e3f0;
    border-radius: 16px;
    padding: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.share-batch-option:hover,
.share-batch-option.batch-suggested:hover {
    border-color: #60a5fa;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .10);
    transform: translateY(-1px);
}
.share-batch-option input {
    margin-top: 3px;
}
.share-batch-option strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.35;
}
.share-batch-option small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    line-height: 1.45;
}
.share-batch-option:has(input:checked) {
    border-color: #0ea5e9;
    background: linear-gradient(135deg, rgba(14,165,233,.10), rgba(20,184,166,.08));
    box-shadow: inset 0 0 0 1px rgba(14,165,233,.14);
}
@media (max-width: 720px) {
    .share-batch-list {
        grid-template-columns: 1fr;
        max-height: none;
    }
}

/* 2026-05-11 Smart Share file-centric workspace */
.share-file-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.share-file-card{position:relative;overflow:hidden;background:linear-gradient(145deg,#fff,#f8fafc);border:1px solid rgba(148,163,184,.24);border-radius:26px;padding:18px;box-shadow:0 18px 50px rgba(15,23,42,.07);display:grid;gap:14px}.share-file-card::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:#94a3b8}.share-file-card.is-live::before{background:#10b981}.share-file-card.is-paused::before{background:#f59e0b}.share-file-card.is-draft::before{background:#64748b}.share-file-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.share-file-module,.share-file-state{display:inline-flex;align-items:center;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:900;letter-spacing:.02em}.share-file-module{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}.share-file-module.module-stock{background:#ecfdf5;color:#047857;border-color:#a7f3d0}.share-file-module.module-quality{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.share-file-state{background:#f8fafc;color:#334155;border:1px solid #e2e8f0}.share-file-card.is-live .share-file-state{background:#ecfdf5;color:#047857;border-color:#a7f3d0}.share-file-card.is-paused .share-file-state{background:#fffbeb;color:#b45309;border-color:#fde68a}.share-file-card h2{margin:0;color:#0f172a;font-size:clamp(18px,2vw,24px);line-height:1.18;word-break:break-word}.share-file-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.share-file-meta span{border:1px solid #e5eaf2;background:rgba(255,255,255,.72);border-radius:16px;padding:10px}.share-file-meta strong{display:block;color:#0f172a;font-size:18px;line-height:1.1}.share-file-meta small{display:block;color:#64748b;font-size:11px;font-weight:800;margin-top:4px;text-transform:uppercase;letter-spacing:.04em}.share-file-owners{margin:0;color:#475569;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:16px;padding:10px 12px;font-size:13px;line-height:1.5}.share-file-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center}.share-file-actions form{display:inline-flex;margin:0}.share-file-actions .link-button{min-height:36px;border-radius:12px;padding:8px 12px}@media (max-width:980px){.share-file-grid{grid-template-columns:1fr}.share-file-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:560px){.share-file-top{align-items:flex-start;flex-direction:column}.share-file-meta{grid-template-columns:1fr}.share-file-actions .button-link,.share-file-actions form,.share-file-actions .link-button{width:100%;justify-content:center}.share-file-actions form{display:flex}}

/* F0 Smart Share hardening */
.share-confirm-mismatch{margin-top:12px;padding:10px 12px;border:1px dashed #f59e0b;border-radius:12px;background:#fffbeb;color:#92400e;font-weight:700}.share-confirm-mismatch input{margin-right:8px}.status-pill.warn{background:#fef3c7;color:#92400e;border-color:#fde68a}

/* Smart Share F1 - File Center & Create Link UX */
.share-quick-filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 18px 0;
}
.share-filter-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    color: #0f172a;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.share-filter-chip:hover,
.share-filter-chip.active {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, .32);
    box-shadow: 0 16px 34px rgba(37, 99, 235, .13);
}
.share-filter-chip span {
    min-width: 34px;
    padding: 4px 9px;
    border-radius: 999px;
    text-align: center;
    background: #eef2ff;
    color: #1d4ed8;
    font-weight: 800;
}
.share-file-card.is-feedback {
    border-color: rgba(168, 85, 247, .38);
    box-shadow: 0 20px 45px rgba(126, 34, 206, .14);
}
.share-file-card.is-feedback .share-file-state {
    background: #f3e8ff;
    color: #7e22ce;
}
.share-file-actions form { margin: 0; }
.share-create-wizard {
    border: 1px solid rgba(37, 99, 235, .13);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
}
.share-step-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, .07);
}
.share-step-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.share-step-head > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
}
.share-step-head strong {
    display: block;
    color: #0f172a;
}
.share-step-head small,
.share-create-tip {
    color: #64748b;
}
.share-create-tip {
    padding: 9px 12px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-weight: 700;
}
.share-create-tip.is-warning {
    background: #fef3c7;
    color: #92400e;
}
.share-picked-source {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 18px;
    background: #ecfdf5;
    border: 1px solid rgba(16, 185, 129, .24);
    color: #065f46;
}
.share-picked-source span { color: #047857; }
.share-batch-option {
    transition: opacity .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}
.share-batch-option:has(input:checked),
.share-batch-option.batch-suggested:has(input:checked) {
    border-color: rgba(37, 99, 235, .45);
    background: #eff6ff;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .12);
}
.share-batch-option.is-hidden-by-filter {
    opacity: .35;
}
@media (max-width: 760px) {
    .share-step-card,
    .share-picked-source { align-items: flex-start; flex-direction: column; }
    .share-quick-filter-bar { grid-template-columns: 1fr; }
}

/* ===== Smart Share F1-a: premium public view, chart polish, compact cards ===== */
.published-dashboard-premium {
  background:
    radial-gradient(circle at 12% 4%, rgba(37, 99, 235, .16), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(20, 184, 166, .16), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}
.published-dashboard-premium .published-hero-premium {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 86% 18%, rgba(56, 189, 248, .34), transparent 28%),
    radial-gradient(circle at 12% 100%, rgba(16, 185, 129, .24), transparent 30%),
    linear-gradient(135deg, #07142f 0%, #102e6d 54%, #0f766e 100%);
  border: 1px solid rgba(255,255,255,.18);
}
.published-dashboard-premium .published-hero-premium::after {
  content: "";
  position: absolute;
  inset: auto -8% -45% auto;
  width: min(520px, 60vw);
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  filter: blur(2px);
  z-index: -1;
}
.published-dashboard-premium .published-kpis-phase9 article {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
}
.published-dashboard-premium .published-kpis-phase9 article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #14b8a6);
}
.published-dashboard-premium .published-kpis-phase9 article.danger::before { background: linear-gradient(90deg, #ef4444, #f97316); }
.published-dashboard-premium .published-kpis-phase9 article.warning::before { background: linear-gradient(90deg, #f59e0b, #facc15); }
.published-dashboard-premium .published-kpis-phase9 article.success::before { background: linear-gradient(90deg, #10b981, #22c55e); }
.published-dashboard-premium .published-insights-premium article {
  min-height: 112px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
}
.published-dashboard-premium .published-charts-premium {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .8fr);
  align-items: stretch;
}
.published-dashboard-premium .chart-card {
  border-radius: 28px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow: 0 20px 60px rgba(15,23,42,.075);
  border: 1px solid rgba(148,163,184,.18);
}
.published-dashboard-premium .chart-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 72px rgba(15,23,42,.10);
}
.published-dashboard-premium .chart-card canvas {
  min-height: 220px;
}
.published-dashboard-premium .chart-card-wide {
  grid-column: 1 / -1;
}
.published-dashboard-premium .focus-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}
.published-data-card-premium {
  border-radius: 30px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 70px rgba(15,23,42,.08);
}
.published-data-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}
.published-data-head h2 { margin: 4px 0 0; }
.published-data-card-premium .view-toggle {
  margin: 0;
  padding: 6px;
  background: #f8fafc;
}
.published-table-wrap[hidden],
.share-card-list[hidden] {
  display: none !important;
}
.published-table-wrap:not([hidden]) {
  display: block;
}
.share-card-list:not([hidden]) {
  display: grid;
}
.share-card-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.share-row-card-compact {
  min-height: 0;
  padding: 12px;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(15,23,42,.055);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.share-row-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.share-row-card-title { min-width: 0; }
.share-row-card-compact h3 {
  font-size: 14px;
  line-height: 1.18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.share-row-card-compact p {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.share-row-status-pill {
  flex: 0 0 auto;
  max-width: 112px;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  color: #334155;
  background: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-row-status-pill.row-risk { background: #ffedd5; color: #9a3412; }
.share-row-status-pill.row-done { background: #dcfce7; color: #166534; }
.share-row-card-grid-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.share-row-card-grid-compact span {
  padding: 7px 8px;
  border-radius: 12px;
  background: #f8fafc;
}
.share-row-card-grid-compact small {
  font-size: 9.5px;
  letter-spacing: .03em;
}
.share-row-card-grid-compact strong {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-row-card-compact .feedback-actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.share-row-card-compact .feedback-state {
  min-width: 0;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-row-card-compact .feedback-open-button {
  padding: 8px 10px;
  font-size: 11.5px;
  border-radius: 999px;
}
@media (max-width: 1180px) {
  .share-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .published-dashboard-premium .published-charts-premium { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .published-data-head { align-items: stretch; flex-direction: column; }
  .share-card-list { grid-template-columns: 1fr; }
  .published-dashboard-premium .focus-list { grid-template-columns: 1fr; }
  .published-dashboard-premium .chart-card { border-radius: 22px; padding: 14px; }
}

/* Smart Share F2 - Data Intelligence */
.share-import-mode {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 16px 0;
}
.share-mode-card {
    border: 1px solid rgba(30, 64, 175, .16);
    border-radius: 18px;
    padding: 14px;
    background: linear-gradient(135deg, #ffffff, #f8fbff);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    display: grid;
    gap: 6px;
    cursor: pointer;
}
.share-mode-card strong { color: #0f172a; }
.share-mode-card span { color: #64748b; font-size: .88rem; line-height: 1.35; }
.share-mode-card input { width: auto; margin-right: 6px; }
.share-import-intel-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 16px 0;
}
.share-intel-card {
    border-radius: 18px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, .22);
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
}
.share-intel-card span, .share-intel-card small { display: block; color: #64748b; }
.share-intel-card strong { display: block; font-size: 1.6rem; color: #0f172a; margin: 4px 0; }
.share-intel-card.is-warning { border-color: rgba(245, 158, 11, .35); background: #fffbeb; }
.share-intel-card.is-danger { border-color: rgba(239, 68, 68, .35); background: #fef2f2; }
.share-intel-card.is-ok { border-color: rgba(34, 197, 94, .25); }
.share-compare-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}
.share-compare-strip span {
    border-radius: 16px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, .18);
}
.share-compare-strip strong { display:block; font-size:1.35rem; color:#0f172a; }
.share-compare-strip small { color:#64748b; }
.share-alert-panel.danger { border-color: rgba(239,68,68,.35); background:#fef2f2; color:#991b1b; }
.share-file-source-name { display:block; color:#64748b; margin-top:-4px; margin-bottom:10px; }
.share-file-note { margin: 8px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(15, 23, 42, .04); color:#475569; font-size:.9rem; }
.share-file-meta-editor { margin-top: 12px; border-top: 1px solid rgba(148, 163, 184, .18); padding-top: 10px; }
.share-file-meta-editor summary { cursor:pointer; color:#2563eb; font-weight:700; }
.share-mini-form { display:grid; grid-template-columns: 1fr 1fr auto; gap:8px; margin-top:10px; }
.share-mini-form input { min-width:0; border:1px solid rgba(148,163,184,.35); border-radius:12px; padding:9px 10px; }
.share-mini-form button { border:0; border-radius:12px; padding:9px 14px; background:#2563eb; color:white; font-weight:700; }
@media (max-width: 960px) {
    .share-import-mode, .share-import-intel-grid, .share-compare-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .share-mini-form { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .share-import-mode, .share-import-intel-grid, .share-compare-strip { grid-template-columns: 1fr; }
}

/* =====================================================================
   O.N PRECISION PORTAL — ENTERPRISE SHELL V2
   2026-08-17
   Scope: authenticated Portal shell + dashboard only.
   Business logic, routes, permissions and SSO remain unchanged.
   ===================================================================== */

:root {
    --portal-navy-950: #082b3a;
    --portal-navy-900: #0b3344;
    --portal-navy-800: #10475d;
    --portal-teal-600: #14796f;
    --portal-teal-500: #218c80;
    --portal-blue-500: #2f70c9;
    --portal-surface: #ffffff;
    --portal-surface-soft: #f7fafc;
    --portal-bg: #f3f7fa;
    --portal-border: #dde6ec;
    --portal-border-strong: #cad7df;
    --portal-text: #13232e;
    --portal-muted: #667785;
    --portal-success: #17745f;
    --portal-success-soft: #e8f6f1;
    --portal-danger: #b23a3a;
    --portal-danger-soft: #fff0f0;
    --portal-warning: #9a6600;
    --portal-sidebar-width: 250px;
    --portal-sidebar-collapsed: 78px;
    --portal-topbar-height: 72px;
    --portal-radius-lg: 16px;
    --portal-radius-md: 12px;
    --portal-shadow-sm: 0 4px 16px rgba(20, 50, 67, 0.06);
    --portal-shadow-md: 0 12px 34px rgba(17, 47, 64, 0.10);
}

body.portal-shell {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: var(--portal-bg);
    color: var(--portal-text);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

.portal-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: var(--portal-sidebar-width);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--portal-navy-950) 0%, var(--portal-navy-900) 100%);
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    transition: width .22s ease, transform .22s ease;
}

.sidebar-brand-wrap {
    min-height: 92px;
    display: flex;
    align-items: center;
    padding: 18px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.sidebar-brand:hover { color: #fff; }

.sidebar-logo-wrap {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 8px 22px rgba(0,0,0,.16);
}

.sidebar-logo-wrap .brand-logo {
    display: block;
    max-width: 38px;
    max-height: 38px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.sidebar-fallback {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    font-size: 10px;
}

.sidebar-brand-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity .16s ease;
}

.sidebar-brand-copy strong {
    color: #fff;
    font-size: 14px;
    letter-spacing: .035em;
}

.sidebar-brand-copy small {
    color: rgba(226, 239, 244, .64);
    font-size: 11px;
}

.sidebar-nav {
    flex: 1;
    display: block;
    overflow-y: auto;
    padding: 18px 12px;
}

.sidebar-label {
    margin: 22px 12px 8px;
    color: rgba(218, 235, 241, .48);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sidebar-link {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 3px 0;
    padding: 0 13px;
    border-radius: 10px;
    color: rgba(237, 247, 250, .78);
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.sidebar-link:hover {
    color: #fff;
    background: rgba(255,255,255,.075);
}

.sidebar-link.is-active {
    color: #fff;
    background: linear-gradient(90deg, rgba(44, 160, 146, .28), rgba(255,255,255,.08));
    box-shadow: inset 3px 0 0 #4fc4b5;
}

.sidebar-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
}

.sidebar-icon svg,
.portal-topbar svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-link:first-child .sidebar-icon svg path { fill: currentColor; stroke: none; }

.sidebar-footer {
    padding: 14px 12px 18px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.sidebar-footer .env-badge {
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
    border-color: rgba(240, 197, 110, .25);
    background: rgba(255, 247, 230, .08);
    color: #f6d38f;
}

.sidebar-collapse {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 13px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(231, 242, 246, .68);
    cursor: pointer;
}

.sidebar-collapse:hover { background: rgba(255,255,255,.065); color: #fff; }
.sidebar-collapse > span:first-child { font-size: 26px; line-height: 1; transform: translateY(-1px); }

.portal-workspace {
    min-height: 100vh;
    margin-left: var(--portal-sidebar-width);
    transition: margin-left .22s ease;
}

.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--portal-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 30px;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid var(--portal-border);
    backdrop-filter: blur(14px);
}

.topbar-left,
.topbar-actions {
    display: flex;
    align-items: center;
}

.topbar-left { gap: 14px; min-width: 0; }
.topbar-actions { gap: 10px; }

.topbar-page {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.topbar-page strong {
    overflow: hidden;
    color: var(--portal-text);
    font-size: 16px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-kicker {
    color: var(--portal-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.topbar-icon-button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--portal-border);
    border-radius: 11px;
    background: var(--portal-surface);
    color: #556a78;
}

.topbar-icon-button:hover {
    color: var(--portal-navy-900);
    border-color: var(--portal-border-strong);
    background: #f8fbfd;
}

.account-menu { position: relative; }
.account-menu > summary {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 4px 5px;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary:hover,
.account-menu[open] > summary { background: #f5f8fa; border-color: var(--portal-border); }

.account-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(145deg, var(--portal-navy-900), var(--portal-teal-600));
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.account-summary-copy {
    min-width: 0;
    display: grid;
    gap: 0;
    text-align: left;
}

.account-summary-copy strong {
    max-width: 190px;
    overflow: hidden;
    color: var(--portal-text);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-summary-copy small { color: var(--portal-muted); font-size: 10px; }
.account-chevron { color: #778995; font-size: 16px; }

.account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 230px;
    padding: 8px;
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--portal-shadow-md);
}

.account-dropdown-head {
    display: grid;
    padding: 10px 11px 12px;
    border-bottom: 1px solid #edf1f4;
    margin-bottom: 5px;
}

.account-dropdown-head strong { color: var(--portal-text); font-size: 13px; }
.account-dropdown-head small { color: var(--portal-muted); font-size: 11px; }
.account-dropdown a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 11px;
    border-radius: 9px;
    color: #334b59;
    font-size: 13px;
    font-weight: 650;
}
.account-dropdown a:hover { background: #f4f8fa; color: var(--portal-navy-900); }
.account-dropdown a.account-logout { color: var(--portal-danger); }

.mobile-menu-button {
    display: none;
    width: 40px;
    height: 40px;
    place-items: center;
    gap: 4px;
    padding: 9px;
    border: 1px solid var(--portal-border);
    background: #fff;
}
.mobile-menu-button span { width: 18px; height: 2px; border-radius: 2px; background: #536977; }

.portal-main {
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 30px 34px 52px;
}

body.portal-shell .flash {
    position: relative;
    z-index: 2;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 11px;
    box-shadow: var(--portal-shadow-sm);
}

.dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
    padding: 24px 26px;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-lg);
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 145, 132, .12), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #fbfdfe 100%);
    box-shadow: var(--portal-shadow-sm);
}

.dashboard-hero h1 {
    margin: 4px 0 6px;
    color: var(--portal-text);
    font-size: clamp(25px, 2.4vw, 34px);
    letter-spacing: -.025em;
}

.dashboard-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--portal-muted);
    font-size: 14px;
}

.hero-wave { display: inline-block; font-size: .82em; transform: translateY(-1px); }

.hero-status,
.app-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.hero-status {
    padding: 8px 11px;
    border: 1px solid #d7ece5;
    border-radius: 999px;
    background: #f3fbf8;
    color: var(--portal-success);
    font-size: 12px;
    font-weight: 750;
}

.status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 999px;
    background: #21a47f;
    box-shadow: 0 0 0 3px rgba(33,164,127,.12);
}

.dashboard-section { margin-top: 28px; }

.section-heading--row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.section-heading--row h2 {
    margin: 3px 0 0;
    color: var(--portal-text);
    font-size: 20px;
    letter-spacing: -.012em;
}

.section-count {
    color: var(--portal-muted);
    font-size: 12px;
    font-weight: 700;
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--portal-navy-800);
    font-size: 12px;
    font-weight: 750;
}

body.portal-shell .eyebrow {
    color: var(--portal-teal-600);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .1em;
}

body.portal-shell .app-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

body.portal-shell .app-card {
    position: relative;
    min-width: 0;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow: hidden;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-lg);
    background: var(--portal-surface);
    box-shadow: 0 2px 9px rgba(16, 46, 63, .045);
    transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease;
}

body.portal-shell .app-card::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: linear-gradient(90deg, #3878d4, #239286);
    opacity: .78;
}

body.portal-shell .app-card:hover {
    transform: translateY(-3px);
    border-color: #c8d9e2;
    box-shadow: var(--portal-shadow-md);
}

.app-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

body.portal-shell .app-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #eaf3f7;
    color: var(--portal-navy-800);
}

body.portal-shell .app-icon svg { width: 25px; height: 25px; }

.app-state {
    padding-top: 3px;
    color: #69808d;
    font-size: 10px;
    font-weight: 700;
}
.app-state .status-dot { width: 6px; height: 6px; flex-basis: 6px; box-shadow: none; }

body.portal-shell .app-card-body {
    flex: 1;
    display: block;
}

body.portal-shell .tile-code {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--portal-teal-600);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .055em;
}

body.portal-shell .app-card h2 {
    margin: 0 0 7px;
    color: var(--portal-text);
    font-size: 18px;
    letter-spacing: -.012em;
}

body.portal-shell .app-card p {
    margin: 0;
    color: var(--portal-muted);
    font-size: 13px;
    line-height: 1.6;
}

body.portal-shell .app-card-actions {
    display: block;
    margin-top: 18px;
}

body.portal-shell .app-card-actions .button-link {
    width: 100%;
    min-height: 42px;
    display: flex;
    justify-content: space-between;
    padding: 0 14px;
    border: 1px solid #d5e4ea;
    border-radius: 10px;
    background: #f8fbfc;
    color: var(--portal-navy-900);
    font-size: 13px;
    font-weight: 750;
    box-shadow: none;
}

body.portal-shell .app-card:hover .app-card-actions .button-link {
    border-color: var(--portal-navy-800);
    background: var(--portal-navy-900);
    color: #fff;
}

.activity-section {
    margin-top: 30px;
    padding: 21px 22px 10px;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-lg);
    background: #fff;
    box-shadow: var(--portal-shadow-sm);
}

body.portal-shell .activity-list--dashboard { display: grid; gap: 0; }

body.portal-shell .activity-item--dashboard {
    min-height: 62px;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 10px 2px;
    border: 0;
    border-top: 1px solid #edf2f5;
    border-radius: 0;
    background: transparent;
}

.activity-mark {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #7f929d;
}
.activity-mark--success { background: #21a47f; }
.activity-mark--failed,
.activity-mark--error,
.activity-mark--denied { background: #d55353; }

.activity-copy { min-width: 0; display: grid; gap: 1px; }
.activity-copy strong { color: var(--portal-text); font-size: 13px; font-weight: 730; }
.activity-copy small { color: #7b8c96; font-size: 11px; }

.activity-status {
    min-width: 82px;
    display: inline-flex;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef3f6;
    color: #667986;
    font-size: 10px;
    font-weight: 800;
}
.activity-status--success { background: var(--portal-success-soft); color: var(--portal-success); }
.activity-status--failed,
.activity-status--error,
.activity-status--denied { background: var(--portal-danger-soft); color: var(--portal-danger); }

body.sidebar-is-collapsed .portal-sidebar { width: var(--portal-sidebar-collapsed); }
body.sidebar-is-collapsed .portal-workspace { margin-left: var(--portal-sidebar-collapsed); }
body.sidebar-is-collapsed .sidebar-brand-wrap { padding-inline: 16px; }
body.sidebar-is-collapsed .sidebar-brand-copy,
body.sidebar-is-collapsed .sidebar-link > span:last-child,
body.sidebar-is-collapsed .sidebar-label,
body.sidebar-is-collapsed .sidebar-collapse-text,
body.sidebar-is-collapsed .sidebar-footer .env-badge { display: none; }
body.sidebar-is-collapsed .sidebar-link { justify-content: center; padding-inline: 0; }
body.sidebar-is-collapsed .sidebar-collapse { justify-content: center; padding-inline: 0; }
body.sidebar-is-collapsed .sidebar-collapse > span:first-child { transform: rotate(180deg); }
body.sidebar-is-collapsed .sidebar-brand { justify-content: center; width: 100%; }

.sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(6, 29, 40, .46);
    backdrop-filter: blur(1px);
}

@media (max-width: 1260px) {
    body.portal-shell .app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .portal-sidebar {
        width: min(286px, 84vw);
        transform: translateX(-102%);
        box-shadow: 18px 0 45px rgba(7, 29, 40, .22);
    }
    body.sidebar-mobile-open .portal-sidebar { transform: translateX(0); }
    .portal-workspace,
    body.sidebar-is-collapsed .portal-workspace { margin-left: 0; }
    body.sidebar-is-collapsed .portal-sidebar { width: min(286px, 84vw); }
    body.sidebar-is-collapsed .sidebar-brand-copy,
    body.sidebar-is-collapsed .sidebar-link > span:last-child,
    body.sidebar-is-collapsed .sidebar-label,
    body.sidebar-is-collapsed .sidebar-collapse-text,
    body.sidebar-is-collapsed .sidebar-footer .env-badge { display: initial; }
    body.sidebar-is-collapsed .sidebar-link,
    body.sidebar-is-collapsed .sidebar-collapse { justify-content: flex-start; padding-inline: 13px; }
    body.sidebar-is-collapsed .sidebar-collapse > span:first-child { transform: none; }
    .mobile-menu-button { display: grid; }
    .portal-topbar { padding: 0 18px; }
    .portal-main { padding: 24px 20px 44px; }
    body.portal-shell .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .portal-topbar { height: 64px; padding: 0 14px; }
    .topbar-kicker { display: none; }
    .topbar-page strong { font-size: 14px; }
    .topbar-icon-button { display: none; }
    .account-summary-copy { display: none; }
    .account-chevron { display: none; }
    .account-menu > summary { padding: 4px; }
    .portal-main { padding: 18px 14px 36px; }
    .dashboard-hero { align-items: flex-start; flex-direction: column; padding: 20px; margin-bottom: 24px; }
    .dashboard-hero h1 { font-size: 25px; }
    .dashboard-hero p { font-size: 13px; }
    body.portal-shell .app-grid { grid-template-columns: 1fr; }
    body.portal-shell .app-card { min-height: 230px; }
    .section-heading--row { align-items: center; }
    .activity-section { padding: 18px 16px 8px; }
    body.portal-shell .activity-item--dashboard { grid-template-columns: 9px minmax(0, 1fr); }
    .activity-status { display: none; }
}

/* =====================================================================
   PORTAL UI POLISH v3 - 2026-08-17
   Visual refinement + readability pass for desktop enterprise dashboard.
   ===================================================================== */

:root {
    --portal-sidebar-width: 258px;
    --portal-radius-lg: 18px;
    --portal-radius-md: 13px;
    --portal-shadow-sm: 0 5px 18px rgba(20, 50, 67, 0.065);
    --portal-shadow-md: 0 16px 38px rgba(17, 47, 64, 0.12);
}

body.portal-shell {
    overflow-x: clip;
    background:
        radial-gradient(circle at 88% 2%, rgba(33, 140, 128, .065), transparent 24%),
        linear-gradient(180deg, #f4f8fb 0%, #eef4f7 100%);
    font-size: 15.5px;
}

/* Sidebar: stronger hierarchy, slightly larger labels */
.sidebar-brand-wrap {
    min-height: 96px;
    padding: 19px 18px 17px;
}
.sidebar-logo-wrap {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border-radius: 13px;
}
.sidebar-logo-wrap .brand-logo { max-width: 40px; max-height: 40px; }
.sidebar-brand-copy strong { font-size: 14.5px; letter-spacing: .04em; }
.sidebar-brand-copy small { font-size: 12px; color: rgba(226, 239, 244, .72); }
.sidebar-nav { padding: 19px 12px; }
.sidebar-label {
    margin: 23px 12px 9px;
    color: rgba(218, 235, 241, .58);
    font-size: 11px;
    letter-spacing: .115em;
}
.sidebar-link {
    min-height: 48px;
    gap: 12px;
    padding: 0 14px;
    border-radius: 11px;
    color: rgba(239, 248, 251, .84);
    font-size: 15px;
    font-weight: 650;
}
.sidebar-link.is-active {
    background: linear-gradient(90deg, rgba(45, 164, 150, .30), rgba(255,255,255,.09));
    box-shadow: inset 3px 0 0 #55d0c0, 0 7px 18px rgba(0,0,0,.055);
}
.sidebar-icon { flex-basis: 21px; width: 21px; height: 21px; }
.sidebar-icon svg { width: 21px; height: 21px; }
.sidebar-collapse {
    min-height: 42px;
    font-size: 14px;
    font-weight: 650;
}

/* Top bar: keep sticky and improve visual separation */
.portal-topbar {
    box-shadow: 0 4px 18px rgba(19, 51, 69, .055);
}
.topbar-page strong { font-size: 17px; }
.topbar-kicker { font-size: 11px; letter-spacing: .085em; }
.account-summary-copy strong { font-size: 14px; }
.account-summary-copy small { font-size: 12px; }
.account-dropdown-head strong { font-size: 14px; }
.account-dropdown-head small { font-size: 12px; }
.account-dropdown a { font-size: 14px; }

/* Main canvas */
.portal-main {
    width: min(1460px, 100%);
    padding: 32px 36px 56px;
}

/* Hero */
.dashboard-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 32px;
    padding: 27px 29px;
    border-color: #d8e4ea;
    background:
        radial-gradient(circle at 94% 15%, rgba(44, 166, 151, .18), transparent 22%),
        radial-gradient(circle at 74% 120%, rgba(47, 112, 201, .09), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f9fcfd 70%, #f2faf8 100%);
    box-shadow: 0 9px 28px rgba(19, 50, 68, .075);
}
.dashboard-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -44px;
    top: -58px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(26, 133, 120, .10);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(26, 133, 120, .035), 0 0 0 58px rgba(26, 133, 120, .018);
}
.dashboard-hero h1 {
    margin: 5px 0 7px;
    font-size: clamp(28px, 2.45vw, 36px);
    font-weight: 760;
}
.dashboard-hero p {
    max-width: 820px;
    color: #5f7482;
    font-size: 15px;
    line-height: 1.65;
}
.hero-status {
    padding: 9px 13px;
    border-color: #cce8df;
    background: rgba(245, 252, 249, .92);
    font-size: 13px;
    box-shadow: 0 4px 14px rgba(24, 116, 95, .06);
}
.status-dot { width: 8px; height: 8px; flex-basis: 8px; }

/* Section heading */
.dashboard-section { margin-top: 30px; }
.section-heading--row { margin-bottom: 16px; }
.section-heading--row h2 {
    margin-top: 4px;
    font-size: 21px;
    font-weight: 760;
}
body.portal-shell .eyebrow {
    font-size: 11.5px;
    letter-spacing: .095em;
}
.section-count {
    padding: 5px 9px;
    border: 1px solid #dbe5ea;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #5f7481;
    font-size: 13px;
    font-weight: 720;
}
.section-link { font-size: 13px; }

/* App cards */
body.portal-shell .app-grid { gap: 18px; }
body.portal-shell .app-card {
    min-height: 274px;
    padding: 21px;
    border-color: #d8e3e9;
    box-shadow: 0 4px 14px rgba(16, 46, 63, .052);
}
body.portal-shell .app-card::before {
    height: 4px;
    background: linear-gradient(90deg, #3679d5 0%, #238e85 100%);
    opacity: .88;
}
body.portal-shell .app-card::after {
    content: "";
    position: absolute;
    top: -46px;
    right: -44px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 142, 133, .055), transparent 70%);
    pointer-events: none;
}
body.portal-shell .app-card:hover {
    transform: translateY(-4px);
    border-color: #bcd1dc;
    box-shadow: 0 18px 40px rgba(17, 47, 64, .115);
}
.app-card-top { margin-bottom: 17px; }
body.portal-shell .app-icon {
    width: 48px;
    height: 48px;
    border: 1px solid #dcebf0;
    border-radius: 14px;
    background: linear-gradient(145deg, #eef7fa, #e6f1f5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
body.portal-shell .app-icon svg { width: 26px; height: 26px; }
.app-state {
    padding: 4px 8px;
    border: 1px solid #deebe7;
    border-radius: 999px;
    background: #f7fbfa;
    color: #57776f;
    font-size: 12px;
    font-weight: 720;
}
.app-state .status-dot { width: 6px; height: 6px; flex-basis: 6px; }
body.portal-shell .tile-code {
    margin-bottom: 8px;
    padding: 3px 7px;
    border: 1px solid #d9ece7;
    border-radius: 6px;
    background: #f3faf8;
    font-size: 11.5px;
    letter-spacing: .06em;
    line-height: 1.25;
}
body.portal-shell .app-card h2 {
    margin-bottom: 8px;
    font-size: 19px;
    font-weight: 760;
}
body.portal-shell .app-card p {
    color: #607684;
    font-size: 14.5px;
    line-height: 1.62;
}
body.portal-shell .app-card-actions { margin-top: 19px; }
body.portal-shell .app-card-actions .button-link {
    min-height: 45px;
    padding: 0 15px;
    border-color: #d0e0e7;
    border-radius: 11px;
    background: linear-gradient(180deg, #fbfdfe, #f5f9fb);
    font-size: 14px;
    font-weight: 760;
    transition: background .17s ease, border-color .17s ease, color .17s ease, transform .17s ease;
}
body.portal-shell .app-card-actions .button-link span {
    font-size: 17px;
    transition: transform .17s ease;
}
body.portal-shell .app-card:hover .app-card-actions .button-link span { transform: translateX(2px); }

/* Activity */
.activity-section {
    margin-top: 32px;
    padding: 23px 24px 12px;
    border-color: #d8e3e9;
    box-shadow: 0 7px 24px rgba(17, 47, 64, .07);
}
body.portal-shell .activity-item--dashboard {
    min-height: 68px;
    gap: 14px;
    padding: 11px 3px;
}
.activity-copy strong { font-size: 14.5px; }
.activity-copy small { color: #718590; font-size: 12.5px; }
.activity-status {
    min-width: 88px;
    padding: 5px 9px;
    font-size: 11.5px;
}

@media (max-width: 980px) {
    .portal-main { padding: 26px 22px 46px; }
}

@media (max-width: 680px) {
    body.portal-shell { font-size: 15px; }
    .topbar-page strong { font-size: 15px; }
    .portal-main { padding: 19px 14px 38px; }
    .dashboard-hero { padding: 21px; }
    .dashboard-hero h1 { font-size: 27px; }
    .dashboard-hero p { font-size: 14px; }
    body.portal-shell .eyebrow { font-size: 11px; }
    body.portal-shell .app-card { min-height: 240px; }
    body.portal-shell .app-card p { font-size: 14px; }
}

/* =====================================================================
   PORTAL UI POLISH v5 - 2026-08-17
   Dashboard refinement: clickable app cards, per-app accents, search,
   lighter navigation and compact enterprise breadcrumb.
   ===================================================================== */

/* Slightly lighter enterprise navy so the navigation does not overpower content */
.portal-sidebar {
    background: linear-gradient(180deg, #0c394a 0%, #0d4152 55%, #0b3848 100%);
    border-right-color: rgba(255,255,255,.075);
}
.sidebar-link {
    color: rgba(242, 249, 251, .86);
}
.sidebar-link:hover {
    background: rgba(255,255,255,.085);
}
.sidebar-link.is-active {
    background: linear-gradient(90deg, rgba(61, 177, 163, .31), rgba(255,255,255,.095));
    box-shadow: inset 3px 0 0 #63d4c6, 0 8px 20px rgba(4, 29, 40, .08);
}
.sidebar-label { color: rgba(224, 240, 245, .62); }
.sidebar-collapse { color: rgba(235, 245, 248, .72); }

/* Compact breadcrumb-style top bar */
.topbar-page.topbar-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}
.topbar-breadcrumb .topbar-kicker {
    color: #6f818c;
    font-size: 13px;
    font-weight: 680;
    letter-spacing: 0;
    text-transform: none;
}
.topbar-separator {
    color: #a7b5bd;
    font-size: 15px;
}
.topbar-breadcrumb strong {
    color: var(--portal-text);
    font-size: 16px;
    font-weight: 760;
}

/* App heading tools */
.section-heading--apps {
    align-items: center;
}
.section-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.app-search {
    width: 246px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid #d7e2e8;
    border-radius: 11px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 2px 8px rgba(16, 46, 63, .035);
    color: #71848f;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.app-search:focus-within {
    border-color: #85b8b1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(33, 140, 128, .09), 0 4px 12px rgba(16, 46, 63, .045);
}
.app-search svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.app-search input {
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--portal-text);
    font: inherit;
    font-size: 13.5px;
}
.app-search input::placeholder { color: #8b9ba4; }
.app-search input::-webkit-search-cancel-button { cursor: pointer; }
.app-search-empty {
    margin-top: 14px;
    padding: 24px;
    border: 1px dashed #cddbe2;
    border-radius: 14px;
    background: rgba(255,255,255,.58);
    color: #6d808b;
    text-align: center;
    font-size: 14px;
    font-weight: 650;
}

/* Whole card is now the launch target */
body.portal-shell a.app-card {
    color: inherit;
    text-decoration: none;
}
body.portal-shell .app-card {
    --app-accent: #227f78;
    --app-accent-soft: #edf8f6;
    --app-accent-border: #d5ebe7;
    min-height: 278px;
    cursor: pointer;
    outline: none;
}
body.portal-shell .app-card[hidden] { display: none !important; }
body.portal-shell .app-card::before {
    background: var(--app-accent);
    opacity: .92;
}
body.portal-shell .app-card::after {
    background: radial-gradient(circle, var(--app-accent-soft), transparent 70%);
    opacity: .95;
}
body.portal-shell .app-card:hover,
body.portal-shell .app-card:focus-visible {
    transform: translateY(-5px);
    border-color: var(--app-accent-border);
    box-shadow: 0 19px 42px rgba(17, 47, 64, .125);
}
body.portal-shell .app-card:focus-visible {
    box-shadow: 0 0 0 3px rgba(33, 140, 128, .16), 0 19px 42px rgba(17, 47, 64, .125);
}

/* restrained per-system accents */
body.portal-shell .app-card--kc_banve {
    --app-accent: #3978c9;
    --app-accent-soft: #eef5fd;
    --app-accent-border: #bdd3ef;
}
body.portal-shell .app-card--banve {
    --app-accent: #208b82;
    --app-accent-soft: #edf8f6;
    --app-accent-border: #bfddd8;
}
body.portal-shell .app-card--khsx {
    --app-accent: #4569cf;
    --app-accent-soft: #f0f3fd;
    --app-accent-border: #c5d0ef;
}
body.portal-shell .app-card--kcs {
    --app-accent: #1a8a76;
    --app-accent-soft: #edf8f4;
    --app-accent-border: #bfe0d7;
}
body.portal-shell .app-card--iso {
    --app-accent: #aa7727;
    --app-accent-soft: #fbf6ea;
    --app-accent-border: #e8d6ad;
}
body.portal-shell .app-card--dungcudo {
    --app-accent: #536fb0;
    --app-accent-soft: #f1f4fa;
    --app-accent-border: #c8d3e8;
}
body.portal-shell .app-card--tools {
    --app-accent: #6f659e;
    --app-accent-soft: #f4f2f9;
    --app-accent-border: #d7d0e8;
}

body.portal-shell .app-icon {
    width: 52px;
    height: 52px;
    border-color: var(--app-accent-border);
    background: var(--app-accent-soft);
    color: var(--app-accent);
    border-radius: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px rgba(15, 50, 66, .035);
    transition: transform .17s ease, box-shadow .17s ease;
}
body.portal-shell .app-icon svg { width: 28px; height: 28px; }
body.portal-shell .app-card:hover .app-icon,
body.portal-shell .app-card:focus-visible .app-icon {
    transform: translateY(-1px) scale(1.025);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 7px 16px rgba(15, 50, 66, .07);
}

.app-open-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-top: 3px;
    color: #81919a;
    font-size: 11.5px;
    font-weight: 720;
    opacity: .72;
    transition: color .17s ease, opacity .17s ease, transform .17s ease;
}
.app-open-hint span { font-size: 13px; }
body.portal-shell .app-card:hover .app-open-hint,
body.portal-shell .app-card:focus-visible .app-open-hint {
    color: var(--app-accent);
    opacity: 1;
    transform: translateX(2px);
}

body.portal-shell .tile-code {
    color: var(--app-accent);
    border-color: var(--app-accent-border);
    background: var(--app-accent-soft);
}
body.portal-shell .app-card h2 {
    font-size: 19.5px;
    line-height: 1.28;
}
body.portal-shell .app-card p {
    font-size: 14.5px;
    line-height: 1.65;
}
body.portal-shell .app-card-actions .button-link {
    pointer-events: none;
    border-color: #d4e1e7;
    background: linear-gradient(180deg, #fbfdfe, #f5f9fb);
    color: var(--portal-navy-900);
}
body.portal-shell .app-card:hover .app-card-actions .button-link,
body.portal-shell .app-card:focus-visible .app-card-actions .button-link {
    border-color: var(--app-accent);
    background: var(--app-accent);
    color: #fff;
}
body.portal-shell .app-card:hover .app-card-actions .button-link span,
body.portal-shell .app-card:focus-visible .app-card-actions .button-link span {
    transform: translateX(3px);
}

/* Activity list: slightly more timeline-like without adding visual noise */
.activity-section { overflow: hidden; }
body.portal-shell .activity-item--dashboard {
    position: relative;
    padding-left: 4px;
}
.activity-mark {
    position: relative;
    box-shadow: 0 0 0 4px #fff;
}
body.portal-shell .activity-item--dashboard:not(:last-child) .activity-mark::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 4px;
    width: 1px;
    height: 48px;
    background: #e5edf1;
}
.activity-copy strong { font-weight: 760; }

@media (max-width: 980px) {
    .section-heading--apps {
        align-items: flex-end;
    }
    .app-search { width: 210px; }
}

@media (max-width: 680px) {
    .topbar-page.topbar-breadcrumb { gap: 6px; }
    .topbar-breadcrumb .topbar-kicker,
    .topbar-separator { display: none; }
    .section-heading--apps {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }
    .section-tools {
        width: 100%;
        justify-content: stretch;
    }
    .app-search { flex: 1; width: auto; }
    .section-count { flex: 0 0 auto; }
    body.portal-shell .app-card { min-height: 246px; }
    .app-open-hint { font-size: 11px; }
}


/* =====================================================================
   PORTAL UI POLISH v6 - 2026-08-17
   Better enterprise icon set + compact card polish.
   ===================================================================== */
body.portal-shell .app-card {
    min-height: 258px;
    padding: 20px 20px 18px;
}
body.portal-shell .app-card-top {
    justify-content: flex-start;
    margin-bottom: 14px;
}
body.portal-shell .app-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
}
body.portal-shell .app-icon svg {
    width: 30px;
    height: 30px;
}
body.portal-shell .app-card h2 {
    margin-bottom: 7px;
    font-size: 19px;
}
body.portal-shell .app-card p {
    font-size: 15px;
    line-height: 1.68;
}
body.portal-shell .app-card-actions {
    margin-top: 16px;
}
body.portal-shell .app-card-actions .button-link {
    min-height: 44px;
    border-color: #d1dee5;
}
.app-open-hint {
    display: none !important;
}
body.portal-shell .app-card:hover .app-card-actions .button-link,
body.portal-shell .app-card:focus-visible .app-card-actions .button-link {
    border-color: var(--app-accent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-accent) 94%, white 6%), var(--app-accent));
    color: #fff;
}
body.portal-shell .app-card:hover .app-card-actions .button-link span,
body.portal-shell .app-card:focus-visible .app-card-actions .button-link span {
    transform: translateX(4px);
}
.sidebar-icon svg,
body.portal-shell .app-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body.portal-shell .app-card--tools .app-icon svg {
    stroke-width: 1.7;
}
@media (max-width: 680px) {
    body.portal-shell .app-card {
        min-height: 234px;
        padding: 18px 18px 16px;
    }
    body.portal-shell .app-card p {
        font-size: 14.5px;
        line-height: 1.64;
    }
}


/* =====================================================================
   PORTAL UI POLISH v7 - 2026-08-17
   Subtle system-themed watermark illustrations inside app cards.
   ===================================================================== */
body.portal-shell .app-card {
    isolation: isolate;
}
body.portal-shell .app-card-top,
body.portal-shell .app-card-body,
body.portal-shell .app-card-actions {
    position: relative;
    z-index: 2;
}
body.portal-shell .app-card-watermark {
    position: absolute;
    right: -4px;
    bottom: 54px;
    width: 118px;
    height: 118px;
    color: var(--app-accent);
    opacity: .065;
    pointer-events: none;
    z-index: 1;
    transform: rotate(-8deg);
    transition: opacity .18s ease, transform .18s ease;
}
body.portal-shell .app-card-watermark svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body.portal-shell .app-card:hover .app-card-watermark,
body.portal-shell .app-card:focus-visible .app-card-watermark {
    opacity: .1;
    transform: rotate(-6deg) scale(1.02);
}
body.portal-shell .app-card--kcs .app-card-watermark,
body.portal-shell .app-card--khsx .app-card-watermark {
    width: 122px;
    height: 122px;
}
body.portal-shell .app-card--iso .app-card-watermark,
body.portal-shell .app-card--kc_banve .app-card-watermark {
    right: -8px;
    bottom: 50px;
}
body.portal-shell .app-card--tools .app-card-watermark {
    right: -10px;
    bottom: 46px;
    width: 124px;
    height: 124px;
}
body.portal-shell .app-card--dungcudo .app-card-watermark {
    right: -2px;
    bottom: 48px;
    width: 126px;
    height: 126px;
    transform: rotate(-5deg);
}
body.portal-shell .app-card p {
    max-width: 78%;
}
body.portal-shell .app-card--tools p,
body.portal-shell .app-card--dungcudo p,
body.portal-shell .app-card--khsx p {
    max-width: 75%;
}
@media (max-width: 680px) {
    body.portal-shell .app-card-watermark {
        width: 96px;
        height: 96px;
        right: -8px;
        bottom: 48px;
        opacity: .055;
    }
    body.portal-shell .app-card p,
    body.portal-shell .app-card--tools p,
    body.portal-shell .app-card--dungcudo p,
    body.portal-shell .app-card--khsx p {
        max-width: 100%;
    }
}


/* =====================================================================
   PORTAL UI POLISH v8 - 2026-08-17
   Replace enlarged icons with true domain illustrations as card watermarks.
   ===================================================================== */
body.portal-shell .app-card-watermark {
    right: -14px;
    bottom: 49px;
    width: 168px;
    height: 122px;
    opacity: .075;
    transform: none;
}
body.portal-shell .app-card-watermark svg {
    stroke-width: 3.2;
}
body.portal-shell .app-card:hover .app-card-watermark,
body.portal-shell .app-card:focus-visible .app-card-watermark {
    opacity: .11;
    transform: translateY(-2px) scale(1.015);
}
body.portal-shell .app-card--kc_banve .app-card-watermark {
    right: -9px;
    bottom: 46px;
    width: 170px;
    height: 124px;
}
body.portal-shell .app-card--banve .app-card-watermark {
    right: -18px;
    bottom: 49px;
    width: 176px;
    height: 126px;
}
body.portal-shell .app-card--khsx .app-card-watermark {
    right: -12px;
    bottom: 48px;
    width: 182px;
    height: 130px;
}
body.portal-shell .app-card--kcs .app-card-watermark {
    right: -12px;
    bottom: 45px;
    width: 178px;
    height: 130px;
}
body.portal-shell .app-card--iso .app-card-watermark {
    right: -8px;
    bottom: 45px;
    width: 171px;
    height: 128px;
}
body.portal-shell .app-card--dungcudo .app-card-watermark {
    right: -13px;
    bottom: 44px;
    width: 183px;
    height: 132px;
    transform: none;
}
body.portal-shell .app-card--tools .app-card-watermark {
    right: -12px;
    bottom: 44px;
    width: 180px;
    height: 132px;
}
/* Text remains full-width: illustrations are truly background-only. */
body.portal-shell .app-card p,
body.portal-shell .app-card--tools p,
body.portal-shell .app-card--dungcudo p,
body.portal-shell .app-card--khsx p {
    max-width: 100%;
}
body.portal-shell .app-card-body {
    padding-right: 0;
}
@media (max-width: 680px) {
    body.portal-shell .app-card-watermark,
    body.portal-shell .app-card--kc_banve .app-card-watermark,
    body.portal-shell .app-card--banve .app-card-watermark,
    body.portal-shell .app-card--khsx .app-card-watermark,
    body.portal-shell .app-card--kcs .app-card-watermark,
    body.portal-shell .app-card--iso .app-card-watermark,
    body.portal-shell .app-card--dungcudo .app-card-watermark,
    body.portal-shell .app-card--tools .app-card-watermark {
        width: 132px;
        height: 98px;
        right: -14px;
        bottom: 46px;
        opacity: .06;
    }
}


/* =====================================================================
   PORTAL UI POLISH v9 - 2026-08-17
   Real illustration watermarks supplied/generated for the seven modules.
   ===================================================================== */
body.portal-shell .app-card-watermark {
    right: -18px;
    bottom: 45px;
    width: 232px;
    height: 174px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    overflow: hidden;
    color: inherit;
    opacity: 1;
    transform: none;
    z-index: 1;
}
body.portal-shell .app-card-watermark svg { display: none !important; }
body.portal-shell .app-card-watermark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    mix-blend-mode: normal;
    opacity: .17;
    filter: saturate(.82) contrast(.94);
    transform: translateZ(0);
    transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}
body.portal-shell .app-card:hover .app-card-watermark,
body.portal-shell .app-card:focus-visible .app-card-watermark {
    opacity: 1;
    transform: none;
}
body.portal-shell .app-card:hover .app-card-watermark img,
body.portal-shell .app-card:focus-visible .app-card-watermark img {
    opacity: .23;
    filter: saturate(.92) contrast(.97);
    transform: translateY(-2px) scale(1.015);
}
body.portal-shell .app-card--kc_banve .app-card-watermark {
    width: 238px;
    height: 179px;
    right: -18px;
    bottom: 43px;
}
body.portal-shell .app-card--banve .app-card-watermark {
    width: 235px;
    height: 179px;
    right: -18px;
    bottom: 43px;
}
body.portal-shell .app-card--khsx .app-card-watermark {
    width: 245px;
    height: 184px;
    right: -20px;
    bottom: 42px;
}
body.portal-shell .app-card--kcs .app-card-watermark {
    width: 242px;
    height: 181px;
    right: -20px;
    bottom: 42px;
}
body.portal-shell .app-card--iso .app-card-watermark {
    width: 235px;
    height: 190px;
    right: -18px;
    bottom: 40px;
}
body.portal-shell .app-card--dungcudo .app-card-watermark {
    width: 246px;
    height: 184px;
    right: -22px;
    bottom: 40px;
}
body.portal-shell .app-card--tools .app-card-watermark {
    width: 242px;
    height: 181px;
    right: -20px;
    bottom: 41px;
}
/* Ensure text/actions stay crisp above the real artwork. */
body.portal-shell .app-card-top,
body.portal-shell .app-card-body,
body.portal-shell .app-card-actions {
    position: relative;
    z-index: 3;
}
@media (max-width: 980px) {
    body.portal-shell .app-card-watermark,
    body.portal-shell .app-card--kc_banve .app-card-watermark,
    body.portal-shell .app-card--banve .app-card-watermark,
    body.portal-shell .app-card--khsx .app-card-watermark,
    body.portal-shell .app-card--kcs .app-card-watermark,
    body.portal-shell .app-card--iso .app-card-watermark,
    body.portal-shell .app-card--dungcudo .app-card-watermark,
    body.portal-shell .app-card--tools .app-card-watermark {
        width: 210px;
        height: 158px;
        right: -16px;
        bottom: 43px;
    }
}
@media (max-width: 680px) {
    body.portal-shell .app-card-watermark,
    body.portal-shell .app-card--kc_banve .app-card-watermark,
    body.portal-shell .app-card--banve .app-card-watermark,
    body.portal-shell .app-card--khsx .app-card-watermark,
    body.portal-shell .app-card--kcs .app-card-watermark,
    body.portal-shell .app-card--iso .app-card-watermark,
    body.portal-shell .app-card--dungcudo .app-card-watermark,
    body.portal-shell .app-card--tools .app-card-watermark {
        width: 178px;
        height: 134px;
        right: -18px;
        bottom: 44px;
        opacity: 1;
    }
    body.portal-shell .app-card-watermark img { opacity: .13; }
    body.portal-shell .app-card:hover .app-card-watermark img,
    body.portal-shell .app-card:focus-visible .app-card-watermark img { opacity: .18; }
}

/* =========================================================
   Portal UI Polish v10 — 2026-09-14
   UI-only. Rollback: remove this entire block.
   ========================================================= */

/* --- v10 Tokens --- */
:root {
    --v10-teal: #1a7a72;
    --v10-teal-soft: rgba(26, 122, 114, 0.12);
    --v10-teal-ring: rgba(26, 122, 114, 0.25);
    --v10-navy: #0f3d54;
    --v10-navy-dark: #0a2d3e;
    --v10-line: rgba(176, 196, 210, 0.80);
    --v10-text-strong: #0e1f2b;
    --v10-text-muted: #56697a;
    --v10-card-shadow: 0 4px 16px rgba(14, 40, 58, 0.07), 0 1px 3px rgba(14, 40, 58, 0.05);
    --v10-card-hover: 0 10px 28px rgba(14, 40, 58, 0.12), 0 2px 6px rgba(14, 40, 58, 0.06);
    --v10-radius: 14px;
}

/* --- Accessibility & Focus Visible --- */
*:focus-visible {
    outline: 2.5px solid var(--v10-teal) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px var(--v10-teal-ring) !important;
}

/* --- 1. LOGIN POLISH --- */
body.public .login-panel input[type="text"],
body.public .login-panel input[type="password"],
body.public .login-panel input:not([type="submit"]):not([type="checkbox"]) {
    border-color: #b8ccd8;
    background: #ffffff;
    color: var(--v10-text-strong);
    transition: border-color .18s ease, box-shadow .18s ease;
}

body.public .login-panel input:focus,
body.public .login-panel input:focus-visible {
    border-color: var(--v10-teal) !important;
    box-shadow: 0 0 0 3.5px var(--v10-teal-ring) !important;
    outline: none !important;
}

body.public .login-panel button[type="submit"] {
    background: var(--v10-navy);
    border: none;
    letter-spacing: 0.06em;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(15, 61, 84, 0.26);
    transition: background .18s ease, box-shadow .18s ease, transform .14s ease;
}

body.public .login-panel button[type="submit"]:hover {
    background: var(--v10-navy-dark);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(15, 61, 84, 0.32);
}

body.public .login-panel button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(15, 61, 84, 0.20);
}

body.public .login-panel-brand {
    border-bottom-color: rgba(176, 196, 210, 0.60);
}

body.public .login-heading h2 {
    color: var(--v10-text-strong);
    font-size: 22px;
    letter-spacing: -0.01em;
}

body.public .login-heading p {
    color: var(--v10-text-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

body.public .login-feature-row span {
    border-color: rgba(255, 255, 255, 0.36);
    background: rgba(255, 255, 255, 0.14);
}

body.public .login-caption {
    font-weight: 700;
    letter-spacing: 0.06em;
}

body.public .login-footer a {
    color: var(--v10-navy);
    font-weight: 800;
}

body.public .login-footer a:hover {
    color: var(--v10-teal);
    text-decoration: underline;
}

/* Tablet login fix (800-920px column squeeze prevention) */
@media (max-width: 920px) and (min-width: 641px) {
    body.public .login-shell {
        grid-template-columns: 1fr !important;
        width: min(500px, 100%) !important;
        gap: 18px !important;
        min-height: auto !important;
    }

    body.public .login-copy {
        padding: 6px 4px 0 !important;
        min-height: auto !important;
    }

    body.public .login-copy h1 {
        font-size: clamp(28px, 6vw, 36px) !important;
        line-height: 1.1;
    }
}

/* --- 2. SIDEBAR POLISH --- */
body.portal-shell .sidebar-link.is-active {
    position: relative;
    background: var(--v10-teal-soft);
    color: var(--v10-teal);
    font-weight: 700;
}

body.portal-shell .sidebar-link.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--v10-teal);
}

body.portal-shell .sidebar-link.is-active .sidebar-icon {
    color: var(--v10-teal);
}

body.portal-shell .sidebar-link:not(.is-active):hover {
    background: rgba(14, 40, 58, 0.05);
    color: var(--v10-text-strong);
    transition: background .16s ease, color .16s ease;
}

body.portal-shell .sidebar-label {
    color: var(--v10-text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
}

body.portal-shell .sidebar-brand-copy {
    overflow: hidden;
}

body.portal-shell .sidebar-brand-copy strong,
body.portal-shell .sidebar-brand-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- 3. TOPBAR POLISH --- */
body.portal-shell .portal-topbar {
    border-bottom: 1px solid var(--v10-line);
    box-shadow: 0 2px 10px rgba(14, 40, 58, 0.05);
}

body.portal-shell .topbar-kicker {
    color: var(--v10-text-muted);
    font-weight: 600;
    font-size: 13px;
}

body.portal-shell .topbar-separator {
    color: rgba(86, 105, 122, 0.5);
    margin: 0 2px;
}

body.portal-shell .topbar-breadcrumb strong {
    color: var(--v10-text-strong);
    font-weight: 700;
    font-size: 13.5px;
}

body.portal-shell .topbar-icon-button {
    color: var(--v10-text-muted);
    transition: color .16s ease;
}

body.portal-shell .topbar-icon-button:hover {
    color: var(--v10-teal);
}

/* --- 4. DASHBOARD HERO POLISH --- */
body.portal-shell .dashboard-hero {
    padding-top: 4px;
    padding-bottom: 16px;
}

body.portal-shell .dashboard-hero .eyebrow {
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--v10-teal);
}

body.portal-shell .dashboard-hero h1 {
    letter-spacing: -0.02em;
    line-height: 1.18;
    color: var(--v10-text-strong);
}

body.portal-shell .dashboard-hero p {
    font-size: 14px;
    color: var(--v10-text-muted);
    max-width: 580px;
    line-height: 1.62;
}

body.portal-shell .hero-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(26, 122, 114, 0.08);
    border: 1px solid rgba(26, 122, 114, 0.20);
    color: var(--v10-teal);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    align-self: flex-start;
}

body.portal-shell .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--v10-teal);
    flex-shrink: 0;
    animation: none !important;
}

body.portal-shell .section-heading .eyebrow {
    color: var(--v10-teal);
    font-weight: 900;
    letter-spacing: 0.07em;
}

body.portal-shell .section-heading h2 {
    color: var(--v10-text-strong);
    letter-spacing: -0.01em;
}

/* --- 5. SYSTEM CARDS POLISH --- */
body.portal-shell .app-card {
    box-shadow: var(--v10-card-shadow);
    border-color: rgba(176, 196, 210, 0.70);
    border-radius: var(--v10-radius);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.portal-shell .app-card:hover,
body.portal-shell .app-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--v10-card-hover);
    border-color: rgba(26, 122, 114, 0.32);
    outline: none;
}

body.portal-shell .tile-code {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.09em;
    border-radius: 999px;
    padding: 3px 9px;
}

body.portal-shell .app-card h2 {
    color: var(--v10-text-strong);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

body.portal-shell .app-card p {
    color: var(--v10-text-muted);
    font-size: 13.5px;
    line-height: 1.60;
}

/* App Grid responsive: cap 3 columns, 2 at tablet, 1 at mobile to avoid lonely stretched cards */
@media (min-width: 981px) {
    body.portal-shell .app-grid {
        grid-template-columns: repeat(3, minmax(250px, 1fr));
    }
}

@media (max-width: 980px) and (min-width: 641px) {
    body.portal-shell .app-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body.portal-shell .app-grid {
        grid-template-columns: 1fr;
    }
}

body.portal-shell .app-card-actions .button-link {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    border-radius: 8px;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .14s ease;
}

/* --- 6. ACTIVITY LOG POLISH --- */
body.portal-shell .activity-list--dashboard {
    gap: 7px;
}

body.portal-shell .activity-item--dashboard {
    padding: 10px 12px;
    border-radius: 10px;
    border-color: rgba(176, 196, 210, 0.55);
    background: #ffffff;
}

body.portal-shell .activity-item--dashboard .activity-copy strong {
    color: var(--v10-text-strong);
    font-weight: 720;
    font-size: 13.5px;
}

body.portal-shell .activity-item--dashboard .activity-copy small {
    color: var(--v10-text-muted);
    font-size: 11.5px;
    margin-top: 1px;
    display: block;
}

body.portal-shell .activity-status {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    align-self: flex-start;
}

body.portal-shell .activity-status--success {
    background: rgba(26, 122, 114, 0.10);
    color: #136e67;
}

body.portal-shell .activity-status--failed,
body.portal-shell .activity-status--error {
    background: rgba(180, 35, 42, 0.09);
    color: #9b1c22;
}

body.portal-shell .activity-status--denied {
    background: rgba(154, 98, 0, 0.10);
    color: #7a4e00;
}

body.portal-shell .activity-status--info {
    background: rgba(14, 40, 58, 0.07);
    color: var(--v10-text-muted);
}

body.portal-shell .activity-mark {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(176, 196, 210, 0.8);
    flex-shrink: 0;
    margin-top: 4px;
}

body.portal-shell .activity-mark--success  { background: var(--v10-teal); }
body.portal-shell .activity-mark--failed,
body.portal-shell .activity-mark--error    { background: #b4232a; }
body.portal-shell .activity-mark--denied   { background: #9a6200; }

/* --- 7. FLASH & RESPONSIVE HARDENING --- */
body.portal-shell .flash {
    border-radius: 10px;
    border-left-width: 4px;
    font-size: 13.5px;
    padding: 11px 14px;
}

body.portal-shell .flash.success { border-left-color: var(--v10-teal); }
body.portal-shell .flash.error   { border-left-color: #b4232a; }

body.portal-shell .portal-workspace {
    min-width: 0;
    overflow-x: hidden;
}

body.portal-shell .portal-main {
    min-width: 0;
}

@media (max-width: 980px) {
    body.portal-shell .dashboard-hero {
        padding-top: 2px;
        padding-bottom: 14px;
    }
}

@media (max-width: 640px) {
    body.portal-shell .dashboard-hero h1 {
        font-size: 26px;
    }

    body.portal-shell .dashboard-hero p {
        font-size: 13px;
    }

    body.portal-shell .hero-status {
        font-size: 12px;
        padding: 5px 10px;
    }

    body.portal-shell .activity-item--dashboard {
        padding: 9px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.portal-shell .app-card,
    body.portal-shell .app-card-actions .button-link,
    body.portal-shell .sidebar-link,
    body.portal-shell .activity-item--dashboard,
    body.public .login-panel button[type="submit"],
    body.public .login-panel input {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}
/* ========= END Portal UI Polish v10 — 2026-09-14 ========= */

/* =========================================================
   Portal UI Polish v11 — User Table Actions
   UI-only. Rollback: remove this entire block.
   ========================================================= */

/* --- User Table Actions Layout --- */
td.table-actions {
    vertical-align: middle;
    white-space: nowrap;
    width: 1%;
}

.table-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.table-actions form {
    display: inline-flex;
    margin: 0;
}

/* --- Action Button Shared Styles --- */
.table-actions .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    height: 28px;
    padding: 0 11px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Sửa: compact button, blue/teal soft */
.table-actions .action-btn--edit {
    background: rgba(26, 122, 114, 0.08);
    border: 1px solid rgba(26, 122, 114, 0.28);
    color: #136e67;
}

.table-actions .action-btn--edit:hover {
    background: rgba(26, 122, 114, 0.16);
    border-color: rgba(26, 122, 114, 0.50);
    color: #0c4d48;
}

/* Khóa: compact outline danger button */
.table-actions .action-btn--lock {
    background: #ffffff;
    border: 1px solid rgba(180, 35, 42, 0.38);
    color: #b4232a;
}

.table-actions .action-btn--lock:hover {
    background: #b4232a;
    border-color: #b4232a;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(180, 35, 42, 0.20);
}

/* Mở khóa: compact green/teal button */
.table-actions .action-btn--unlock {
    background: rgba(22, 101, 52, 0.08);
    border: 1px solid rgba(22, 101, 52, 0.32);
    color: #15803d;
}

.table-actions .action-btn--unlock:hover {
    background: #15803d;
    border-color: #15803d;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(22, 101, 52, 0.20);
}

.table-actions .action-btn:focus-visible {
    outline: 2px solid var(--v10-teal, #1a7a72) !important;
    outline-offset: 1px !important;
}

@media (prefers-reduced-motion: reduce) {
    .table-actions .action-btn {
        transition: none !important;
    }
}
/* ========= END Portal UI Polish v11 — User Table Actions ========= */

/* =========================================================
   Portal UI Polish v12b — Narrow Sidebar + User Actions + Hero Status
   UI-only. Rollback: remove this entire block.
   ========================================================= */

/* --- 1. USER TABLE ACTIONS: 1 ROW, CENTERED, COMPACT --- */
td.table-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    text-align: center !important;
    padding: 8px 12px !important;
    width: 1% !important;
    margin: 0 auto !important;
}

td.table-actions form {
    display: inline-flex !important;
    margin: 0 !important;
    align-items: center !important;
}

td.table-actions .action-btn {
    min-height: 31px !important;
    height: 31px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    td.table-actions {
        gap: 6px !important;
    }
    td.table-actions .action-btn {
        padding: 0 9px !important;
        font-size: 11.5px !important;
    }
}

/* --- 2. SIDEBAR: LIGHTENED NAVY, CONTRAST LABELS & ALIGNMENT --- */
body.portal-shell .portal-sidebar {
    background: linear-gradient(180deg, #13465b 0%, #17546d 55%, #124357 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body.portal-shell .sidebar-link {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 14px !important;
    gap: 12px !important;
    margin: 3px 0 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    color: #e8f2f7 !important;
    font-weight: 600 !important;
    transition: background .15s ease, color .15s ease !important;
}

body.portal-shell .sidebar-link .sidebar-icon {
    flex: 0 0 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #9ec6d6 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: color .15s ease !important;
}

body.portal-shell .sidebar-link .sidebar-icon svg {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
    flex-shrink: 0 !important;
    stroke: currentColor !important;
}

body.portal-shell .sidebar-link > span:not(.sidebar-icon),
body.portal-shell .sidebar-link .sidebar-label {
    flex: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    font-size: 13.5px !important;
}

body.portal-shell .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

body.portal-shell .sidebar-link:hover .sidebar-icon {
    color: #d2e8f1 !important;
}

body.portal-shell .sidebar-link.is-active {
    background: linear-gradient(90deg, rgba(38, 166, 154, 0.36), rgba(38, 166, 154, 0.14)) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(6, 28, 38, 0.18) !important;
}

body.portal-shell .sidebar-link.is-active::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 6px !important;
    bottom: 6px !important;
    width: 3.5px !important;
    border-radius: 0 3px 3px 0 !important;
    background: #2dd4bf !important;
}

body.portal-shell .sidebar-link.is-active .sidebar-icon {
    color: #2dd4bf !important;
}

body.portal-shell .sidebar-label,
body.portal-shell .sidebar-group-title {
    color: #9ac2d5 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
    margin: 20px 14px 6px 14px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

/* --- 3. HERO STATUS: BALANCED POSITIONING --- */
body.portal-shell .dashboard-hero .hero-status {
    align-self: center !important;
    margin: 0 !important;
    margin-right: 0px !important;
    animation: none !important;
}

@media (max-width: 680px) {
    body.portal-shell .dashboard-hero .hero-status {
        align-self: flex-start !important;
        margin-top: 12px !important;
    }
}
/* ========= END Portal UI Polish v12b — Narrow Sidebar + User Actions + Hero Status ========= */