/* Applo 3.5.2 – central portal UX overlay.
   Scope: central authenticated workspace and central auth pages only.
   App-owned module views keep their own visual identity. */

html {
    --portal-bg: #f6f8fc;
    --portal-surface: #ffffff;
    --portal-surface-soft: #f8faff;
    --portal-border: #e3e8f2;
    --portal-border-strong: #d7dfec;
    --portal-text: #0d1735;
    --portal-muted: #667085;
    --portal-muted-2: #8a94a6;
    --portal-blue: #1465ff;
    --portal-blue-strong: #0757eb;
    --portal-blue-soft: #edf4ff;
    --portal-green: #0b9a60;
    --portal-green-soft: #e9f8f1;
    --portal-amber: #b56700;
    --portal-amber-soft: #fff5e8;
    --portal-purple: #7357ef;
    --portal-red: #e5484d;
    --portal-shadow: 0 18px 50px rgba(30, 52, 94, .08);
    --portal-shadow-soft: 0 8px 28px rgba(30, 52, 94, .06);
    --portal-radius-xl: 22px;
    --portal-radius-lg: 16px;
    --portal-radius-md: 12px;
}

html[data-theme="dark"] {
    --portal-bg: #0d1320;
    --portal-surface: #121a2a;
    --portal-surface-soft: #162033;
    --portal-border: #26324a;
    --portal-border-strong: #34425d;
    --portal-text: #f3f6fb;
    --portal-muted: #aab4c7;
    --portal-muted-2: #7f8ca4;
    --portal-blue: #6ea3ff;
    --portal-blue-strong: #8bb5ff;
    --portal-blue-soft: rgba(78, 139, 255, .13);
    --portal-green: #58d49d;
    --portal-green-soft: rgba(55, 190, 129, .12);
    --portal-amber: #f2b35f;
    --portal-amber-soft: rgba(226, 149, 49, .12);
    --portal-purple: #a28cff;
    --portal-red: #ff777c;
    --portal-shadow: 0 18px 50px rgba(0, 0, 0, .24);
    --portal-shadow-soft: 0 8px 28px rgba(0, 0, 0, .18);
}

.has-portal-shell,
.has-auth-shell {
    margin: 0;
    min-height: 100vh;
    background: var(--portal-bg);
    color: var(--portal-text);
}

.has-portal-shell *,
.has-auth-shell * { box-sizing: border-box; }

.has-portal-shell a,
.has-auth-shell a { color: inherit; }

.portal-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* ---------- Auth ---------- */
.applo-auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, 42%) minmax(0, 1fr);
    background: var(--portal-surface);
}

.auth-brand-panel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: clamp(34px, 5vw, 72px);
    color: #0c1b48;
    background:
        radial-gradient(circle at 20% 90%, rgba(70, 130, 255, .25), transparent 30%),
        radial-gradient(circle at 82% 16%, rgba(135, 105, 255, .14), transparent 28%),
        linear-gradient(145deg, #f8fbff 0%, #eef4ff 52%, #e9f0ff 100%);
    border-right: 1px solid #e2e9f7;
}

.auth-brand,
.portal-brand,
.portal-mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    width: max-content;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: -.035em;
}

.auth-brand { font-size: 29px; }
.auth-brand img,
.portal-brand img,
.portal-mobile-brand img { object-fit: contain; }

.auth-brand-copy {
    position: relative;
    z-index: 2;
    max-width: 520px;
    margin: auto 0;
    padding: 56px 0 120px;
}

.auth-brand-copy .section-kicker {
    color: #356cd9;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.auth-brand-copy h1 {
    margin: 12px 0 24px;
    max-width: 9ch;
    font: 800 clamp(52px, 5.7vw, 82px)/.97 Inter, system-ui, sans-serif;
    letter-spacing: -.065em;
    color: #081947;
}

.auth-brand-copy > p {
    max-width: 480px;
    margin: 0;
    color: #475779;
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.65;
}

.auth-brand-copy ul {
    display: grid;
    gap: 17px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.auth-brand-copy li {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 12px;
    align-items: start;
}

.auth-brand-copy li > span:first-child {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: rgba(255,255,255,.74);
    color: #1762ed;
    box-shadow: 0 5px 16px rgba(67, 103, 176, .1);
}

.auth-brand-copy li span:last-child { display: grid; gap: 3px; }
.auth-brand-copy li strong { font-size: 14px; color: #132657; }
.auth-brand-copy li small { color: #5b6b8d; font-size: 13px; line-height: 1.5; }

.auth-seed {
    position: absolute;
    left: 50%;
    bottom: -100px;
    width: min(46vw, 520px);
    height: min(46vw, 520px);
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.92) 0 8%, rgba(91,138,255,.18) 35%, transparent 67%);
    filter: drop-shadow(0 20px 36px rgba(55, 99, 201, .12));
    opacity: .78;
}

.auth-seed::before,
.auth-seed::after {
    content: "";
    position: absolute;
    inset: 20%;
    border: 1px solid rgba(88, 133, 233, .18);
    border-radius: 50%;
}
.auth-seed::after { inset: 8%; opacity: .55; }
.auth-seed img { position: absolute; inset: 25%; width: 50%; height: 50%; object-fit: contain; filter: saturate(.9) brightness(1.08); }

.auth-form-panel {
    display: flex;
    min-width: 0;
    min-height: 100vh;
    flex-direction: column;
    background: var(--portal-surface);
}

.auth-form-panel > main {
    display: grid;
    place-items: center;
    flex: 1;
    padding: 48px 7vw 24px;
}

.auth-form-panel .form-main {
    width: min(100%, 500px);
    margin: 0;
    padding: 0;
}

.auth-form-panel .form-card {
    width: 100%;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.auth-form-panel .form-card .section-kicker { display: none; }
.auth-form-panel .form-card h1 {
    margin: 0 0 8px;
    color: var(--portal-text);
    font: 800 clamp(32px, 3.4vw, 42px)/1.08 Inter, system-ui, sans-serif;
    letter-spacing: -.045em;
}
.auth-form-panel .form-intro { margin: 0 0 32px; color: var(--portal-muted); line-height: 1.6; }
.auth-form-panel .form-card form { display: grid; gap: 18px; }
.auth-form-panel .form-card label { display: grid; gap: 8px; color: var(--portal-text); font-size: 14px; font-weight: 650; }
.auth-form-panel .form-card input,
.auth-form-panel .form-card select,
.auth-form-panel .form-card textarea {
    width: 100%;
    min-height: 52px;
    padding: 0 15px;
    border: 1px solid var(--portal-border-strong);
    border-radius: 12px;
    outline: 0;
    color: var(--portal-text);
    background: var(--portal-surface);
    font: inherit;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.auth-form-panel .form-card input:focus,
.auth-form-panel .form-card select:focus,
.auth-form-panel .form-card textarea:focus { border-color: var(--portal-blue); box-shadow: 0 0 0 4px rgba(20, 101, 255, .12); }
.auth-form-panel .form-card label small { color: var(--portal-muted); font-weight: 450; line-height: 1.45; }
.auth-form-panel .cta-button {
    min-height: 52px;
    border: 0;
    border-radius: 12px;
    color: white;
    background: linear-gradient(180deg, #196aff, #0757eb);
    box-shadow: 0 10px 24px rgba(20, 101, 255, .18);
    font-weight: 750;
}
.auth-form-panel .cta-button:hover { transform: none; background: #0757eb; }
.auth-form-panel .form-aside { margin: 24px 0 0; color: var(--portal-muted); text-align: center; }
.auth-form-panel .form-aside a { color: var(--portal-blue); font-weight: 700; }
.auth-form-panel .alert,
.auth-form-panel .success { margin-bottom: 20px; }
.registration-closed { border: 1px solid var(--portal-border); border-radius: 14px; padding: 22px; background: var(--portal-surface-soft); }
.registration-closed h2 { margin-top: 0; color: var(--portal-text); }
.registration-closed p { margin-bottom: 0; color: var(--portal-muted); }

.auth-mobile-header { display: none; }
.auth-footer { display: flex; justify-content: center; gap: 10px; padding: 0 28px 28px; color: var(--portal-muted); font-size: 13px; }
.auth-footer a { text-decoration: none; }
.auth-footer a:hover { color: var(--portal-blue); }

/* ---------- Portal shell ---------- */
.applo-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    background: var(--portal-bg);
}

.applo-sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    height: 100vh;
    min-height: 640px;
    flex-direction: column;
    padding: 26px 18px 22px;
    border-right: 1px solid var(--portal-border);
    background: var(--portal-surface);
}
.portal-brand { padding: 4px 10px 22px; color: var(--portal-text); font-size: 25px; }
.portal-primary-nav { display: grid; gap: 4px; }
.portal-primary-nav > a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 45px;
    padding: 0 12px;
    border-radius: 11px;
    color: var(--portal-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 650;
    transition: background .15s ease, color .15s ease;
}
.portal-primary-nav > a:hover { color: var(--portal-text); background: var(--portal-surface-soft); }
.portal-primary-nav > a[aria-current="page"] { color: var(--portal-blue); background: var(--portal-blue-soft); }
.portal-nav-label {
    margin: 24px 12px 7px;
    color: var(--portal-muted-2);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.portal-sidebar-bottom { display: grid; gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--portal-border); }
.portal-user-card { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 8px; min-width: 0; }
.portal-user-card > span:last-child { display: grid; min-width: 0; }
.portal-user-card strong { overflow: hidden; color: var(--portal-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.portal-user-card small { overflow: hidden; color: var(--portal-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.portal-avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #7ea8ff, #6e5fee); font-size: 13px; font-weight: 800; }
.portal-logout-form button,
.portal-account-popover button,
.portal-mobile-sheet button {
    width: 100%;
    border: 0;
    font: inherit;
    cursor: pointer;
}
.portal-logout-form button {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 0 10px;
    border-radius: 10px;
    color: var(--portal-muted);
    background: transparent;
    text-align: left;
    font-size: 13px;
    font-weight: 650;
}
.portal-logout-form button:hover { color: var(--portal-red); background: rgba(229, 72, 77, .07); }

.applo-workspace { min-width: 0; }
.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 18;
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 0 clamp(24px, 3vw, 46px);
    border-bottom: 1px solid var(--portal-border);
    background: color-mix(in srgb, var(--portal-surface) 94%, transparent);
    backdrop-filter: blur(14px);
}
.portal-mobile-brand { display: none; }
.portal-topbar-context { color: var(--portal-muted); font-size: 13px; font-weight: 650; }
.portal-topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.portal-theme-button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--portal-border);
    border-radius: 11px;
    color: var(--portal-muted);
    background: var(--portal-surface);
    box-shadow: none;
}
.portal-theme-button:hover { color: var(--portal-blue); border-color: var(--portal-border-strong); }
.portal-account-menu { position: relative; }
.portal-account-menu > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 4px 8px 4px 5px;
    border-radius: 13px;
    cursor: pointer;
    list-style: none;
    color: var(--portal-text);
}
.portal-account-menu > summary::-webkit-details-marker,
.portal-mobile-more > summary::-webkit-details-marker { display: none; }
.portal-account-menu > summary:hover { background: var(--portal-surface-soft); }
.portal-account-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.portal-chevron { color: var(--portal-muted); font-size: 16px; }
.portal-account-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    width: 260px;
    padding: 8px;
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    background: var(--portal-surface);
    box-shadow: var(--portal-shadow);
}
.portal-account-identity { display: grid; gap: 2px; padding: 10px 10px 12px; border-bottom: 1px solid var(--portal-border); margin-bottom: 5px; }
.portal-account-identity strong { color: var(--portal-text); font-size: 13px; }
.portal-account-identity small { color: var(--portal-muted); font-size: 11px; }
.portal-account-popover > a,
.portal-account-popover form button {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 10px;
    border-radius: 9px;
    color: var(--portal-muted);
    background: transparent;
    text-decoration: none;
    font-size: 13px;
    font-weight: 650;
    text-align: left;
}
.portal-account-popover > a:hover,
.portal-account-popover form button:hover { color: var(--portal-text); background: var(--portal-surface-soft); }
.portal-account-popover .is-danger { color: var(--portal-red); }

.portal-content { min-width: 0; padding: 0 clamp(24px, 3vw, 48px) 64px; }
.has-portal-shell .dashboard-main {
    width: min(100%, 1220px);
    max-width: none;
    margin: 0 auto;
    padding: 42px 0 56px;
}
.has-portal-shell .dashboard-wide { width: min(100%, 1320px); }
.has-portal-shell .dashboard-heading {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    justify-content: space-between;
    margin: 0 0 26px;
}
.has-portal-shell .dashboard-heading h1,
.has-portal-shell .portal-welcome h1,
.has-portal-shell .help-hero h1 {
    margin: 3px 0 8px;
    color: var(--portal-text);
    font: 800 clamp(29px, 3vw, 40px)/1.12 Inter, system-ui, sans-serif;
    letter-spacing: -.045em;
}
.has-portal-shell .dashboard-heading p,
.has-portal-shell .portal-welcome p,
.has-portal-shell .help-hero p { color: var(--portal-muted); }
.has-portal-shell .section-kicker {
    color: var(--portal-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.has-portal-shell .button,
.has-portal-shell .cta-button,
.has-portal-shell .small-button {
    border-radius: 10px;
    font-weight: 700;
}
.has-portal-shell .button-primary,
.has-portal-shell .cta-login,
.has-portal-shell .cta-register {
    border-color: var(--portal-blue);
    color: #fff;
    background: var(--portal-blue);
    box-shadow: none;
}
.has-portal-shell .button-primary:hover,
.has-portal-shell .cta-login:hover,
.has-portal-shell .cta-register:hover { background: var(--portal-blue-strong); }
.has-portal-shell .button-secondary {
    border-color: var(--portal-border);
    color: var(--portal-text);
    background: var(--portal-surface);
}
.has-portal-shell .button-secondary:hover { border-color: var(--portal-border-strong); background: var(--portal-surface-soft); }
.has-portal-shell .panel,
.has-portal-shell .help-article,
.has-portal-shell .help-sidebar-card {
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-lg);
    background: var(--portal-surface);
    box-shadow: none;
}
.has-portal-shell input,
.has-portal-shell select,
.has-portal-shell textarea {
    border-color: var(--portal-border-strong);
    border-radius: 10px;
    color: var(--portal-text);
    background: var(--portal-surface);
}
.has-portal-shell input:focus,
.has-portal-shell select:focus,
.has-portal-shell textarea:focus { border-color: var(--portal-blue); box-shadow: 0 0 0 3px rgba(20, 101, 255, .11); }
.has-portal-shell table { color: var(--portal-text); }
.has-portal-shell th { color: var(--portal-muted); }
.has-portal-shell td,
.has-portal-shell th { border-color: var(--portal-border); }
.has-portal-shell .panel-note,
.has-portal-shell small { color: var(--portal-muted); }

/* ---------- Portal home ---------- */
.portal-home { display: grid; gap: 30px; }
.portal-welcome { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.portal-welcome > div { max-width: 720px; }
.portal-welcome > div > p:last-child { margin: 0; font-size: 15px; }
.portal-section { min-width: 0; }
.portal-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 15px; }
.portal-section-heading h2,
.portal-help-card h2,
.portal-admin-card h2 { margin: 3px 0 0; color: var(--portal-text); font: 760 22px/1.2 Inter, system-ui, sans-serif; letter-spacing: -.03em; }
.portal-count { padding: 6px 10px; border-radius: 999px; color: var(--portal-muted); background: var(--portal-surface); border: 1px solid var(--portal-border); font-size: 12px; font-weight: 700; }
.portal-app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.portal-app-card { min-width: 0; border: 1px solid var(--portal-border); border-radius: 15px; background: var(--portal-surface); overflow: hidden; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.portal-app-card:hover { transform: translateY(-1px); border-color: var(--portal-border-strong); box-shadow: var(--portal-shadow-soft); }
.portal-app-card-main { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 15px; align-items: center; min-height: 116px; padding: 18px; text-decoration: none; }
.portal-app-icon { display: grid; place-items: center; width: 54px; height: 54px; overflow: hidden; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #3d7eff, #635bea); font-weight: 800; }
.portal-app-icon img { width: 100%; height: 100%; object-fit: cover; }
.portal-app-copy { display: grid; gap: 7px; min-width: 0; }
.portal-app-title-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.portal-app-title-row > strong { overflow: hidden; color: var(--portal-text); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.portal-app-status { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; color: var(--portal-muted); background: var(--portal-surface-soft); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.portal-app-status.is-active { color: var(--portal-green); background: var(--portal-green-soft); }
.portal-app-status.is-beta { color: var(--portal-purple); background: rgba(115, 87, 239, .1); }
.portal-app-status.is-alpha { color: var(--portal-amber); background: var(--portal-amber-soft); }
.portal-app-description { overflow: hidden; color: var(--portal-muted); font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.portal-app-open { display: inline-flex; align-items: center; gap: 6px; color: var(--portal-blue); font-size: 12px; font-weight: 750; }
.portal-home-secondary { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px; align-items: stretch; }
.portal-help-card,
.portal-admin-card { padding: 22px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-lg); background: var(--portal-surface); }
.portal-help-card { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.portal-help-card p { margin-bottom: 0; color: var(--portal-muted); line-height: 1.55; }
.portal-help-card .button { align-self: flex-start; }
.portal-admin-links { display: grid; gap: 7px; }
.portal-admin-links a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title arrow" "copy arrow"; gap: 2px 14px; padding: 12px 13px; border-radius: 11px; text-decoration: none; }
.portal-admin-links a:hover { background: var(--portal-surface-soft); }
.portal-admin-links strong { grid-area: title; color: var(--portal-text); font-size: 13px; }
.portal-admin-links span { grid-area: copy; color: var(--portal-muted); font-size: 11px; }
.portal-admin-links b { grid-area: arrow; align-self: center; color: var(--portal-blue); font-size: 16px; }
.portal-empty-state { display: flex; align-items: center; gap: 16px; padding: 22px; border: 1px dashed var(--portal-border-strong); border-radius: var(--portal-radius-lg); background: var(--portal-surface); text-align: left; }
.portal-empty-state .empty-state-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; color: white; background: linear-gradient(145deg, #3d7eff, #635bea); font-weight: 800; }
.portal-empty-state > div { flex: 1; }
.portal-empty-state h3 { margin: 0 0 4px; color: var(--portal-text); }
.portal-empty-state p { margin: 0; color: var(--portal-muted); }

/* ---------- Administration ---------- */
.admin-overview-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 20px;
}
.admin-overview-nav a {
    display: grid;
    gap: 5px;
    min-height: 94px;
    padding: 15px;
    border: 1px solid var(--portal-border);
    border-radius: 13px;
    background: var(--portal-surface);
    text-decoration: none;
}
.admin-overview-nav a:hover { border-color: var(--portal-border-strong); box-shadow: var(--portal-shadow-soft); }
.admin-overview-nav strong { color: var(--portal-text); font-size: 13px; }
.admin-overview-nav span { color: var(--portal-muted); font-size: 11px; line-height: 1.45; }
.has-portal-shell .admin-grid { gap: 14px; }
.has-portal-shell .management-section,
.has-portal-shell .table-panel { scroll-margin-top: 92px; }
.admin-disclosure { margin-top: 16px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-lg); background: var(--portal-surface); overflow: hidden; }
.admin-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; cursor: pointer; list-style: none; }
.admin-disclosure > summary::-webkit-details-marker { display: none; }
.admin-disclosure > summary::after { content: "+"; color: var(--portal-blue); font-size: 20px; font-weight: 500; }
.admin-disclosure[open] > summary::after { content: "–"; }
.admin-disclosure > summary strong { color: var(--portal-text); }
.admin-disclosure > summary span { color: var(--portal-muted); font-size: 12px; }
.admin-disclosure > .admin-disclosure-body { padding: 0 18px 18px; }
.admin-disclosure .panel { margin: 0; border: 0; background: var(--portal-surface-soft); }
.has-portal-shell .app-admin-row,
.has-portal-shell .management-card,
.has-portal-shell .message-card { border-color: var(--portal-border); background: var(--portal-surface); }

/* Help / knowledge / deployment inherit their established layouts, but use the new shell. */
.has-portal-shell .help-search,
.has-portal-shell .knowledge-search,
.has-portal-shell .deployment-upload-dropzone { border-color: var(--portal-border-strong); background: var(--portal-surface); }
.has-portal-shell .help-quick-card,
.has-portal-shell .knowledge-card,
.has-portal-shell .deployment-row-v2 { border-color: var(--portal-border); background: var(--portal-surface); box-shadow: none; }
.has-portal-shell .help-quick-card:hover,
.has-portal-shell .knowledge-card:hover,
.has-portal-shell .deployment-row-v2:hover { border-color: var(--portal-border-strong); box-shadow: var(--portal-shadow-soft); }
.has-portal-shell .help-sidebar { top: 92px; }
.has-portal-shell .page-breadcrumb { color: var(--portal-muted); }
.has-portal-shell .knowledge-storage-card { background: var(--portal-surface-soft); }

.portal-mobile-nav { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .applo-shell { grid-template-columns: 218px minmax(0, 1fr); }
    .portal-content { padding-inline: 24px; }
    .portal-account-name { display: none; }
    .portal-home-secondary { grid-template-columns: 1fr; }
    .admin-overview-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .applo-auth-shell { display: block; min-height: 100vh; }
    .auth-brand-panel { display: none; }
    .auth-form-panel { min-height: 100vh; }
    .auth-mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 0; }
    .auth-mobile-header .auth-brand { font-size: 24px; }
    .auth-form-panel > main { display: block; padding: 54px 22px 28px; }
    .auth-form-panel .form-main { margin: 0 auto; }
    .auth-form-panel .form-card h1 { font-size: 34px; }

    .applo-shell { display: block; min-height: 100vh; }
    .applo-sidebar { display: none; }
    .portal-topbar { min-height: 64px; padding: 0 18px; }
    .portal-mobile-brand { display: inline-flex; color: var(--portal-text); font-size: 21px; }
    .portal-topbar-context { display: none; }
    .portal-theme-button { width: 38px; height: 38px; }
    .portal-account-menu .portal-avatar { width: 34px; height: 34px; }
    .portal-account-menu > summary { padding-right: 0; }
    .portal-account-menu .portal-chevron { display: none; }
    .portal-account-popover { right: 0; width: min(280px, calc(100vw - 28px)); }
    .portal-content { padding: 0 16px 94px; }
    .has-portal-shell .dashboard-main { padding: 28px 0 36px; }
    .has-portal-shell .dashboard-heading { display: grid; gap: 16px; margin-bottom: 22px; }
    .has-portal-shell .heading-actions { justify-content: flex-start; overflow-x: auto; padding-bottom: 3px; }
    .has-portal-shell .dashboard-heading h1,
    .has-portal-shell .portal-welcome h1,
    .has-portal-shell .help-hero h1 { font-size: 30px; }

    .portal-welcome { align-items: flex-start; }
    .portal-welcome > .button { display: none; }
    .portal-app-grid { grid-template-columns: 1fr; gap: 9px; }
    .portal-app-card-main { grid-template-columns: 46px minmax(0, 1fr) auto; min-height: 94px; padding: 13px; gap: 12px; }
    .portal-app-icon { width: 46px; height: 46px; border-radius: 12px; }
    .portal-app-title-row { align-items: flex-start; flex-direction: column; gap: 4px; }
    .portal-app-title-row > strong { font-size: 14px; }
    .portal-app-description { font-size: 11px; -webkit-line-clamp: 1; }
    .portal-app-open { font-size: 0; }
    .portal-app-open span { font-size: 18px; }
    .portal-home-secondary { gap: 12px; }
    .portal-help-card,
    .portal-admin-card { padding: 18px; }
    .portal-empty-state { align-items: flex-start; flex-wrap: wrap; }
    .portal-empty-state .button { width: 100%; }

    .portal-mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        min-height: 70px;
        padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        border-top: 1px solid var(--portal-border);
        background: color-mix(in srgb, var(--portal-surface) 96%, transparent);
        backdrop-filter: blur(16px);
    }
    .portal-mobile-nav > a,
    .portal-mobile-more > summary {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        min-height: 52px;
        border-radius: 10px;
        color: var(--portal-muted);
        text-decoration: none;
        font-size: 10px;
        font-weight: 700;
        cursor: pointer;
        list-style: none;
    }
    .portal-mobile-nav > a[aria-current="page"] { color: var(--portal-blue); }
    .portal-mobile-nav .portal-icon { width: 20px; height: 20px; }
    .portal-mobile-more { position: static; }
    .portal-mobile-sheet {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(78px + env(safe-area-inset-bottom));
        z-index: 120;
        display: grid;
        gap: 4px;
        padding: 10px;
        border: 1px solid var(--portal-border);
        border-radius: 18px;
        background: var(--portal-surface);
        box-shadow: 0 24px 70px rgba(14, 29, 58, .22);
    }
    .portal-mobile-sheet::before { content: ""; position: fixed; inset: 0 0 calc(70px + env(safe-area-inset-bottom)); z-index: -1; background: rgba(9, 17, 33, .18); pointer-events: none; }
    .portal-mobile-sheet-head { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding: 10px 9px 12px; border-bottom: 1px solid var(--portal-border); }
    .portal-mobile-sheet-head > span:last-child { display: grid; min-width: 0; }
    .portal-mobile-sheet-head strong { color: var(--portal-text); font-size: 13px; }
    .portal-mobile-sheet-head small { overflow: hidden; color: var(--portal-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .portal-mobile-sheet > a,
    .portal-mobile-sheet > button,
    .portal-mobile-sheet form button {
        display: flex;
        align-items: center;
        gap: 11px;
        min-height: 46px;
        padding: 0 10px;
        border-radius: 10px;
        color: var(--portal-text);
        background: transparent;
        text-decoration: none;
        text-align: left;
        font-size: 13px;
        font-weight: 650;
    }
    .portal-mobile-sheet > a:hover,
    .portal-mobile-sheet > button:hover,
    .portal-mobile-sheet form button:hover { background: var(--portal-surface-soft); }
    .portal-mobile-sheet .is-danger { color: var(--portal-red); }

    .admin-overview-nav { grid-template-columns: 1fr 1fr; }
    .has-portal-shell .admin-grid { grid-template-columns: 1fr; }
    .has-portal-shell .table-wrap { margin-inline: -2px; }
    .has-portal-shell .management-grid { grid-template-columns: 1fr; }
    .has-portal-shell .help-layout,
    .has-portal-shell .knowledge-layout { display: block; }
    .has-portal-shell .help-sidebar { position: static; margin-bottom: 14px; }
}

@media (max-width: 520px) {
    .portal-topbar { padding-inline: 14px; }
    .portal-content { padding-inline: 14px; }
    .portal-topbar-actions { gap: 5px; }
    .portal-account-menu > summary { min-height: 40px; }
    .portal-app-card-main { grid-template-columns: 44px minmax(0, 1fr) 20px; }
    .portal-app-icon { width: 44px; height: 44px; }
    .portal-section-heading { align-items: center; }
    .portal-count { font-size: 10px; }
    .portal-home-secondary { grid-template-columns: 1fr; }
    .admin-overview-nav { grid-template-columns: 1fr 1fr; }
    .admin-overview-nav a { min-height: 82px; padding: 12px; }
    .auth-form-panel > main { padding-top: 44px; }
    .auth-footer { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    .portal-app-card,
    .portal-primary-nav > a,
    .auth-form-panel input { transition: none !important; }
}

html[data-theme="dark"] .auth-brand-panel {
    color: #f4f7ff;
    background:
        radial-gradient(circle at 20% 90%, rgba(72, 121, 232, .22), transparent 31%),
        radial-gradient(circle at 82% 16%, rgba(128, 100, 238, .17), transparent 28%),
        linear-gradient(145deg, #111a2c 0%, #101827 52%, #0d1422 100%);
    border-right-color: #25314a;
}
html[data-theme="dark"] .auth-brand-copy h1,
html[data-theme="dark"] .auth-brand-copy li strong { color: #f5f7ff; }
html[data-theme="dark"] .auth-brand-copy > p,
html[data-theme="dark"] .auth-brand-copy li small { color: #aeb9d0; }
html[data-theme="dark"] .auth-brand-copy .section-kicker { color: #8bb5ff; }
html[data-theme="dark"] .auth-brand-copy li > span:first-child { background: rgba(255,255,255,.08); color: #8bb5ff; box-shadow: none; }
html[data-theme="dark"] .auth-seed { opacity: .55; }

/* ========================================================================== */
/* Applo 3.5.2 – visual unification                                           */
/* Public site, auth and portal now share one clean product language.         */
/* ========================================================================== */

html {
    --applo-page: #f5f8fd;
    --applo-page-deep: #eef4fc;
    --applo-card: #ffffff;
    --applo-ink: #0a1739;
    --applo-copy: #52627f;
    --applo-line: #dfe7f2;
    --applo-blue-soft: #edf4ff;
    --applo-blue-glow: rgba(42, 105, 255, .18);
    --applo-lilac-glow: rgba(120, 103, 255, .16);
}

html[data-theme="dark"] {
    --applo-page: #0b1220;
    --applo-page-deep: #0d1627;
    --applo-card: #111b2d;
    --applo-ink: #f5f8ff;
    --applo-copy: #aab6cb;
    --applo-line: #273550;
    --applo-blue-soft: rgba(78, 139, 255, .13);
    --applo-blue-glow: rgba(73, 126, 255, .18);
    --applo-lilac-glow: rgba(135, 105, 255, .14);
}

.has-public-shell,
.has-auth-shell,
.has-portal-shell {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Public shell ---------- */
.has-public-shell {
    margin: 0;
    min-height: 100vh;
    color: var(--applo-ink);
    background:
        radial-gradient(circle at 10% 0%, rgba(75, 126, 255, .08), transparent 30%),
        radial-gradient(circle at 92% 14%, rgba(116, 101, 255, .06), transparent 28%),
        var(--applo-page);
}
.has-public-shell * { box-sizing: border-box; }
.has-public-shell a { color: inherit; }

.applo-public-shell {
    width: min(1380px, calc(100% - 40px));
    min-height: 100vh;
    margin: 0 auto;
}
.public-site-header {
    position: relative;
    z-index: 30;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 34px;
    min-height: 86px;
    padding: 0 10px;
}
.public-brand,
.public-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    color: var(--applo-ink);
    text-decoration: none;
    font-weight: 820;
    letter-spacing: -.04em;
}
.public-brand { font-size: 25px; }
.public-brand img,
.public-footer-brand img { object-fit: contain; }
.public-desktop-nav {
    display: flex;
    justify-content: center;
    gap: 28px;
}
.public-desktop-nav a {
    position: relative;
    padding: 12px 0;
    color: var(--applo-copy);
    text-decoration: none;
    font-size: 14px;
    font-weight: 660;
}
.public-desktop-nav a:hover,
.public-desktop-nav a[aria-current="page"] { color: var(--portal-blue); }
.public-desktop-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    border-radius: 999px;
    background: var(--portal-blue);
}
.public-header-actions { display: flex; align-items: center; gap: 9px; }
.public-login-button,
.public-primary-action,
.public-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    border-radius: 11px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 760;
}
.public-login-button,
.public-primary-action {
    color: #fff !important;
    background: linear-gradient(180deg, #1768ff, #0757eb);
    box-shadow: 0 10px 22px rgba(20, 101, 255, .16);
}
.public-login-button:hover,
.public-primary-action:hover { background: #0757eb; }
.public-secondary-action {
    color: var(--portal-blue) !important;
    border: 1px solid var(--applo-line);
    background: var(--applo-card);
}
.public-secondary-action:hover { border-color: #bfd0ec; background: var(--applo-blue-soft); }
.public-menu-toggle,
.public-mobile-nav { display: none; }

.public-site-main { padding: 8px 0 34px; }
.public-home-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
    align-items: stretch;
    min-height: 650px;
    border: 1px solid var(--applo-line);
    border-radius: 28px;
    background: var(--applo-card);
    box-shadow: 0 24px 70px rgba(30, 57, 103, .08);
}
.public-home-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(52px, 7vw, 96px);
}
.public-eyebrow {
    margin: 0 0 15px;
    color: var(--portal-blue);
    font-size: 12px;
    font-weight: 820;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.public-home-copy h1,
.has-public-shell .content-hero h1 {
    margin: 0;
    color: var(--applo-ink);
    font: 820 clamp(48px, 6vw, 78px)/.98 Inter, system-ui, sans-serif;
    letter-spacing: -.065em;
}
.public-home-lead {
    max-width: 590px;
    margin: 28px 0 0;
    color: var(--applo-copy);
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.65;
}
.public-home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.public-home-note { margin: 18px 0 0; color: var(--portal-muted); font-size: 12px; line-height: 1.55; }

.public-home-visual {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    background:
        radial-gradient(circle at 52% 54%, rgba(255,255,255,.98) 0 8%, transparent 31%),
        radial-gradient(circle at 50% 60%, rgba(88, 139, 255, .19), transparent 39%),
        radial-gradient(circle at 70% 24%, rgba(136, 106, 255, .12), transparent 30%),
        linear-gradient(145deg, #f8fbff 0%, #eef4ff 48%, #e7efff 100%);
}
.public-home-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.92), transparent 26%);
}
.public-seed-stage,
.auth-seed-stage {
    position: absolute;
    left: 50%;
    top: 53%;
    width: min(560px, 80%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}
.public-seed-ring,
.auth-seed-ring {
    position: absolute;
    left: 50%;
    top: 69%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(81, 128, 237, .24);
    border-radius: 50%;
}
.public-seed-ring-one,
.auth-seed-ring-one { width: 62%; height: 19%; }
.public-seed-ring-two,
.auth-seed-ring-two { width: 82%; height: 27%; opacity: .65; }
.public-seed-ring-three { width: 100%; height: 35%; opacity: .34; }
.public-seed-light,
.auth-seed-glow {
    position: absolute;
    left: 50%;
    top: 49%;
    width: 54%;
    height: 54%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,1) 0 12%, rgba(77,132,255,.24) 35%, rgba(126,101,255,.09) 53%, transparent 71%);
    filter: blur(2px);
}
.public-seed-core {
    position: absolute;
    left: 50%;
    top: 46%;
    display: grid;
    place-items: center;
    width: 42%;
    height: 48%;
    transform: translate(-50%, -50%);
    border-radius: 48% 52% 50% 50% / 56% 56% 44% 44%;
    background:
        linear-gradient(145deg, rgba(255,255,255,.9), rgba(116,158,255,.34) 47%, rgba(119,94,248,.24));
    box-shadow:
        inset 20px 16px 35px rgba(255,255,255,.7),
        inset -18px -24px 42px rgba(61,103,225,.16),
        0 24px 52px rgba(63, 107, 210, .18);
    backdrop-filter: blur(10px);
}
.public-seed-core img {
    width: 54%;
    height: 66%;
    object-fit: contain;
    opacity: .72;
    filter: saturate(.7) brightness(1.05);
}

.public-process {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    gap: 64px;
    padding: 86px clamp(18px, 5vw, 64px) 72px;
}
.public-process-heading h2 {
    margin: 0;
    color: var(--applo-ink);
    font: 800 clamp(30px, 3.6vw, 46px)/1.06 Inter, system-ui, sans-serif;
    letter-spacing: -.045em;
}
.public-process-heading > p:last-child { margin: 18px 0 0; color: var(--applo-copy); line-height: 1.65; }
.public-process-grid { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.public-process-grid li {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    gap: 17px;
    padding: 22px 0;
    border-top: 1px solid var(--applo-line);
}
.public-process-grid li:last-child { border-bottom: 1px solid var(--applo-line); }
.public-process-grid li > span { color: var(--portal-blue); font-size: 12px; font-weight: 820; }
.public-process-grid h3 { margin: 0 0 5px; color: var(--applo-ink); font-size: 17px; }
.public-process-grid p { margin: 0; color: var(--applo-copy); font-size: 14px; line-height: 1.55; }

.has-public-shell .content-main {
    width: min(1120px, 100%);
    max-width: none;
    margin: 0 auto;
    padding: clamp(46px, 6vw, 78px) clamp(18px, 4vw, 50px) 72px;
}
.has-public-shell .content-hero { max-width: 820px; margin-bottom: 46px; }
.has-public-shell .content-hero .section-kicker { color: var(--portal-blue); }
.has-public-shell .content-hero h1 { font-size: clamp(44px, 5.5vw, 68px); }
.has-public-shell .content-hero > p:last-child { max-width: 760px; margin-top: 24px; color: var(--applo-copy); font-size: 18px; line-height: 1.7; }
.has-public-shell .editorial-grid,
.has-public-shell .detailed-process,
.has-public-shell .legal-content {
    gap: 14px;
}
.has-public-shell .editorial-grid article,
.has-public-shell .detailed-process article,
.has-public-shell .legal-content article,
.has-public-shell .contact-form {
    border: 1px solid var(--applo-line);
    border-radius: 18px;
    background: var(--applo-card);
    box-shadow: 0 10px 34px rgba(30, 57, 103, .05);
}
.has-public-shell .editorial-grid article,
.has-public-shell .detailed-process article,
.has-public-shell .legal-content article { padding: 26px; }
.has-public-shell .editorial-grid h2,
.has-public-shell .detailed-process h2,
.has-public-shell .legal-content h2 { color: var(--applo-ink); }
.has-public-shell .editorial-grid p,
.has-public-shell .detailed-process p,
.has-public-shell .legal-content p { color: var(--applo-copy); }
.has-public-shell .contact-layout { display: grid; grid-template-columns: minmax(0,.85fr) minmax(420px,1.15fr); gap: 48px; align-items: start; }
.has-public-shell .contact-layout .content-hero { margin-bottom: 0; }
.has-public-shell .contact-form { padding: 28px; }
.has-public-shell .contact-form label { color: var(--applo-ink); }
.has-public-shell .contact-form input,
.has-public-shell .contact-form textarea {
    border: 1px solid var(--applo-line);
    border-radius: 11px;
    color: var(--applo-ink);
    background: var(--applo-card);
}
.has-public-shell .contact-form input:focus,
.has-public-shell .contact-form textarea:focus { border-color: var(--portal-blue); box-shadow: 0 0 0 4px rgba(20,101,255,.1); }

.public-site-footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 30px;
    align-items: center;
    padding: 28px 10px 38px;
    border-top: 1px solid var(--applo-line);
    color: var(--applo-copy);
}
.public-footer-brand { font-size: 17px; }
.public-site-footer p { margin: 0; font-size: 12px; }
.public-site-footer nav { display: flex; gap: 18px; }
.public-site-footer nav a { color: var(--applo-copy); text-decoration: none; font-size: 12px; font-weight: 650; }
.public-site-footer nav a:hover { color: var(--portal-blue); }

/* ---------- Auth: concept-aligned split shell ---------- */
.has-auth-shell {
    padding: 32px;
    background:
        radial-gradient(circle at 8% 0%, rgba(73, 126, 255, .08), transparent 28%),
        radial-gradient(circle at 96% 16%, rgba(125, 104, 255, .06), transparent 26%),
        var(--applo-page);
}
.has-auth-shell .applo-auth-shell {
    width: min(1320px, 100%);
    min-height: calc(100vh - 64px);
    margin: 0 auto;
    grid-template-columns: minmax(420px, 1fr) minmax(500px, 1fr);
    overflow: hidden;
    border: 1px solid var(--applo-line);
    border-radius: 28px;
    background: var(--applo-card);
    box-shadow: 0 24px 80px rgba(27, 53, 99, .10);
}
.has-auth-shell .auth-brand-panel {
    min-height: auto;
    padding: clamp(42px, 5vw, 70px);
    color: #0b1b49;
    border-right: 1px solid #e3eaf6;
    background:
        radial-gradient(circle at 35% 82%, rgba(73, 126, 255, .18), transparent 30%),
        radial-gradient(circle at 80% 22%, rgba(132, 105, 255, .11), transparent 28%),
        linear-gradient(145deg, #f9fbff 0%, #f2f6ff 53%, #eaf1ff 100%);
}
.has-auth-shell .auth-brand { font-size: 28px; }
.has-auth-shell .auth-brand-copy {
    margin: 0;
    padding: clamp(66px, 9vh, 110px) 0 0;
    max-width: 520px;
}
.has-auth-shell .auth-brand-copy h1 {
    max-width: 8ch;
    margin: 0;
    color: #071744;
    font-size: clamp(52px, 5.4vw, 76px);
}
.has-auth-shell .auth-brand-copy > p {
    max-width: 480px;
    margin-top: 24px;
    color: #4c5e80;
    font-size: 18px;
}
.has-auth-shell .auth-seed-stage {
    position: relative;
    left: auto;
    top: auto;
    width: min(440px, 86%);
    margin: 28px auto 0;
    transform: none;
}
.has-auth-shell .auth-seed-stage > img {
    position: absolute;
    left: 50%;
    top: 47%;
    width: 32%;
    height: 42%;
    object-fit: contain;
    transform: translate(-50%, -50%);
    opacity: .72;
    filter: saturate(.7) brightness(1.08);
}
.has-auth-shell .auth-trust-line {
    display: grid;
    grid-template-columns: 28px minmax(0,1fr);
    gap: 11px;
    align-items: start;
    margin-top: auto;
    padding-top: 30px;
    color: #506183;
}
.has-auth-shell .auth-trust-line > span:first-child { color: #2569ef; font-size: 22px; line-height: 1; }
.has-auth-shell .auth-trust-line > span:last-child { display: grid; gap: 2px; }
.has-auth-shell .auth-trust-line strong { color: #162951; font-size: 13px; }
.has-auth-shell .auth-trust-line small { color: #647392; font-size: 11px; }

.has-auth-shell .auth-form-panel { min-height: auto; background: var(--applo-card); }
.has-auth-shell .auth-form-panel > main { padding: 48px clamp(42px, 6vw, 82px) 20px; }
.has-auth-shell .auth-form-panel .form-main { width: min(100%, 480px); }
.has-auth-shell .auth-card {
    padding: 36px 36px 32px;
    border: 1px solid var(--applo-line);
    border-radius: 20px;
    background: var(--applo-card);
    box-shadow: 0 14px 40px rgba(25, 52, 101, .07);
}
.auth-card-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: max-content;
    margin: 0 auto 34px;
    color: var(--applo-ink) !important;
    text-decoration: none;
    font-size: 25px;
    font-weight: 830;
    letter-spacing: -.04em;
}
.auth-card-heading { margin-bottom: 26px; }
.has-auth-shell .auth-card h1 { margin-bottom: 5px; font-size: 31px; }
.has-auth-shell .auth-card .form-intro { margin-bottom: 0; }
.has-auth-shell .auth-card form { gap: 16px; }
.auth-field { gap: 7px !important; }
.auth-input-wrap { position: relative; display: block; }
.auth-input-wrap > svg {
    position: absolute;
    left: 13px;
    top: 50%;
    z-index: 2;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    fill: none;
    stroke: #7d8aa4;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.auth-input-wrap > svg + input { padding-left: 42px !important; }
.has-auth-shell .auth-card input { min-height: 50px; background: color-mix(in srgb, var(--applo-card) 96%, var(--applo-page)); }
.has-auth-shell .auth-submit { width: 100%; margin-top: 4px; }
.auth-divider {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 24px 0 18px;
    color: var(--portal-muted);
    font-size: 12px;
}
.auth-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--applo-line); }
.auth-divider span { position: relative; z-index: 1; padding: 0 12px; background: var(--applo-card); }
.auth-invite-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 45px;
    padding: 0 14px;
    border: 1px solid var(--applo-line);
    border-radius: 10px;
    color: var(--portal-blue) !important;
    background: var(--applo-card);
    text-decoration: none;
    font-size: 13px;
    font-weight: 720;
}
.auth-invite-action:hover { background: var(--applo-blue-soft); border-color: #bfd0ec; }
.auth-security-note { margin: 24px 0 0; color: var(--portal-muted); text-align: center; font-size: 11px; line-height: 1.5; }
.auth-security-note > span { margin-right: 5px; color: var(--portal-blue); }
.has-auth-shell .auth-footer {
    justify-content: space-between;
    gap: 18px;
    width: min(100% - 80px, 620px);
    margin: 0 auto;
    padding: 0 0 30px;
    font-size: 11px;
}
.has-auth-shell .auth-footer-links { display: flex; gap: 14px; }

/* ---------- Portal: tighter, more product-like ---------- */
.has-portal-shell .applo-shell { grid-template-columns: 232px minmax(0, 1fr); }
.has-portal-shell .applo-sidebar { padding: 24px 14px 20px; }
.has-portal-shell .portal-brand { padding-inline: 12px; }
.has-portal-shell .portal-primary-nav > a { min-height: 44px; border-radius: 10px; }
.has-portal-shell .portal-topbar { min-height: 70px; padding-inline: clamp(22px, 3vw, 40px); }
.has-portal-shell .portal-topbar-context { color: var(--portal-text); font-size: 14px; font-weight: 760; }
.has-portal-shell .portal-content { padding-inline: clamp(22px, 3vw, 40px); }
.has-portal-shell .dashboard-main { width: min(100%, 1140px); padding-top: 34px; }
.portal-home { gap: 27px; }
.portal-welcome { align-items: center; padding-bottom: 2px; }
.portal-welcome-desktop-title { display: block; }
.portal-welcome-mobile-title { display: none; }
.has-portal-shell .portal-welcome h1 { font-size: clamp(30px, 2.8vw, 38px); }
.portal-app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.portal-app-card {
    display: flex;
    min-height: 210px;
    flex-direction: column;
    padding: 18px;
    border-radius: 15px;
}
.portal-app-card-body { display: grid; gap: 15px; }
.portal-app-card .portal-app-icon { width: 52px; height: 52px; }
.portal-app-card .portal-app-copy { gap: 8px; }
.portal-app-card .portal-app-title-row { align-items: flex-start; flex-direction: column; gap: 7px; }
.portal-app-card .portal-app-description { min-height: 38px; }
.portal-app-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: max-content;
    min-width: 88px;
    min-height: 38px;
    margin-top: auto;
    padding: 0 13px;
    border-radius: 9px;
    color: var(--portal-blue) !important;
    background: var(--portal-blue-soft);
    text-decoration: none;
    font-size: 12px;
    font-weight: 760;
}
.portal-app-action:hover { background: color-mix(in srgb, var(--portal-blue-soft) 72%, var(--portal-blue) 10%); }
.portal-home-secondary { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.portal-help-card,
.portal-admin-card { border-radius: 15px; }

html[data-theme="dark"] .public-home-visual,
html[data-theme="dark"] .has-auth-shell .auth-brand-panel {
    background:
        radial-gradient(circle at 35% 78%, rgba(65, 119, 255, .20), transparent 31%),
        radial-gradient(circle at 80% 22%, rgba(130, 103, 255, .14), transparent 28%),
        linear-gradient(145deg, #111a2d 0%, #10192b 55%, #0e1727 100%);
    border-color: #25324b;
}
html[data-theme="dark"] .has-auth-shell .auth-brand-copy h1,
html[data-theme="dark"] .has-auth-shell .auth-trust-line strong { color: #f5f8ff; }
html[data-theme="dark"] .has-auth-shell .auth-brand-copy > p,
html[data-theme="dark"] .has-auth-shell .auth-trust-line { color: #a9b5cd; }
html[data-theme="dark"] .has-auth-shell .auth-trust-line small { color: #8997b2; }
html[data-theme="dark"] .public-home-visual::before { background: linear-gradient(90deg, rgba(17,27,45,.9), transparent 26%); }
html[data-theme="dark"] .public-seed-core {
    background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(80,132,255,.24) 47%, rgba(116,91,239,.18));
    box-shadow: inset 20px 16px 35px rgba(255,255,255,.08), inset -18px -24px 42px rgba(61,103,225,.14), 0 24px 52px rgba(0,0,0,.22);
}

@media (max-width: 1120px) {
    .public-home-hero { grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); }
    .public-process { gap: 40px; }
    .has-auth-shell .applo-auth-shell { grid-template-columns: minmax(360px, .9fr) minmax(480px, 1.1fr); }
    .portal-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .applo-public-shell { width: min(100%, calc(100% - 28px)); }
    .public-site-header { grid-template-columns: auto 1fr auto; min-height: 70px; padding-inline: 2px; }
    .public-brand { font-size: 22px; }
    .public-brand img { width: 31px; height: 35px; }
    .public-desktop-nav,
    .public-header-actions > .public-login-button { display: none; }
    .public-header-actions { grid-column: 3; }
    .public-menu-toggle {
        position: relative;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid var(--applo-line);
        border-radius: 11px;
        background: var(--applo-card);
    }
    .public-menu-toggle > span,
    .public-menu-toggle > span::before,
    .public-menu-toggle > span::after { width: 17px; height: 2px; border-radius: 999px; background: var(--applo-ink); }
    .public-menu-toggle > span { position: relative; }
    .public-menu-toggle > span::before,
    .public-menu-toggle > span::after { content: ""; position: absolute; left: 0; }
    .public-menu-toggle > span::before { top: -5px; }
    .public-menu-toggle > span::after { top: 5px; }
    .public-mobile-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 66px;
        z-index: 50;
        display: none;
        gap: 3px;
        padding: 10px;
        border: 1px solid var(--applo-line);
        border-radius: 15px;
        background: var(--applo-card);
        box-shadow: 0 18px 50px rgba(17,34,67,.14);
    }
    .public-mobile-nav[data-open="true"] { display: grid; }
    .public-mobile-nav a { min-height: 44px; padding: 0 11px; border-radius: 9px; text-decoration: none; color: var(--applo-copy); font-size: 13px; font-weight: 680; }
    .public-mobile-nav a:hover,
    .public-mobile-nav a[aria-current="page"] { color: var(--portal-blue); background: var(--applo-blue-soft); }

    .public-site-main { padding-top: 2px; }
    .public-home-hero { display: block; min-height: 0; border-radius: 22px; }
    .public-home-copy { padding: 48px 24px 32px; }
    .public-home-copy h1 { font-size: clamp(46px, 14vw, 64px); }
    .public-home-lead { font-size: 16px; }
    .public-home-actions { display: grid; }
    .public-home-actions a { width: 100%; }
    .public-home-visual { min-height: 370px; }
    .public-home-visual::before { background: linear-gradient(180deg, var(--applo-card), transparent 26%); }
    .public-seed-stage { width: min(420px, 100%); top: 52%; }
    .public-process { grid-template-columns: 1fr; gap: 26px; padding: 58px 18px 52px; }
    .public-site-footer { grid-template-columns: 1fr; gap: 12px; padding-inline: 4px; }
    .public-site-footer nav { gap: 16px; }

    .has-public-shell .content-main { padding: 42px 2px 58px; }
    .has-public-shell .content-hero { margin-bottom: 30px; }
    .has-public-shell .content-hero h1 { font-size: clamp(40px, 12vw, 55px); }
    .has-public-shell .content-hero > p:last-child { font-size: 16px; }
    .has-public-shell .contact-layout { display: block; }
    .has-public-shell .contact-layout .content-hero { margin-bottom: 28px; }
    .has-public-shell .editorial-grid,
    .has-public-shell .detailed-process,
    .has-public-shell .legal-content { grid-template-columns: 1fr; }

    .has-auth-shell { padding: 0; background: var(--applo-card); }
    .has-auth-shell .applo-auth-shell { width: 100%; min-height: 100vh; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
    .has-auth-shell .auth-brand-panel { display: none; }
    .has-auth-shell .auth-mobile-header { padding: 20px 20px 0; }
    .has-auth-shell .auth-form-panel > main { padding: 42px 20px 24px; }
    .has-auth-shell .auth-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
    .auth-card-brand { display: none; }
    .has-auth-shell .auth-card h1 { font-size: 32px; }
    .has-auth-shell .auth-footer { width: calc(100% - 40px); flex-direction: column; align-items: center; padding-bottom: calc(22px + env(safe-area-inset-bottom)); text-align: center; }

    .portal-welcome-desktop-title { display: none; }
    .portal-welcome-mobile-title { display: block; }
    .portal-app-grid { grid-template-columns: 1fr; }
    .portal-app-card { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 13px; }
    .portal-app-card-body { grid-template-columns: 46px minmax(0,1fr); gap: 12px; align-items: center; }
    .portal-app-card .portal-app-icon { width: 46px; height: 46px; }
    .portal-app-card .portal-app-title-row { display: block; }
    .portal-app-card .portal-app-status { display: none; }
    .portal-app-card .portal-app-description { min-height: 0; margin-top: 4px; -webkit-line-clamp: 1; }
    .portal-app-action { min-width: 67px; min-height: 36px; margin-top: 0; }
}

@media (max-width: 520px) {
    .applo-public-shell { width: calc(100% - 22px); }
    .public-home-copy { padding-inline: 20px; }
    .public-home-visual { min-height: 330px; }
    .has-public-shell .contact-form { padding: 20px; }
    .has-auth-shell .auth-form-panel > main { padding-inline: 18px; }
    .auth-card-heading { margin-bottom: 22px; }
    .portal-app-action { padding-inline: 10px; }
}

/* The established transparent Applo mark is reused, but the central portal shell
   shifts it into the blue/lilac product palette used by the new visual system. */
.public-brand img,
.public-footer-brand img,
.has-auth-shell .auth-brand img,
.auth-card-brand img,
.portal-brand img,
.portal-mobile-brand img {
    filter: hue-rotate(164deg) saturate(2.15) brightness(1.12);
}

/* ---------- 3.5.5 account recovery + persistent login ---------- */
.auth-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: -2px;
    font-size: 12px;
}
.auth-remember {
    display: inline-flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 8px !important;
    color: var(--portal-muted);
    font-weight: 650 !important;
    cursor: pointer;
}
.has-auth-shell .auth-card .auth-remember input {
    width: 16px;
    min-height: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--portal-blue);
}
.auth-forgot-link {
    color: var(--portal-blue) !important;
    text-decoration: none;
    font-weight: 700;
}
.auth-forgot-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-recovery-card .success { margin-bottom: 18px; }
.auth-recovery-card .auth-recovery-back { width: 100%; justify-content: center; }
.auth-recovery-card .form-aside { margin-top: 20px; text-align: center; }
@media (max-width: 520px) {
    .auth-form-options { align-items: flex-start; }
    .auth-recovery-card .auth-card-heading h1 { font-size: 29px; }
}

/* ========================================================================== 
   Applo 3.6.0 – Portal Redesign
   Ett sammanhållet, ljust och uppgiftsfokuserat gränssnitt för en liten
   administratörsgrupp. Den här sektionen ligger sist och är avsiktligt den
   styrande presentationen ovanpå äldre, kompatibla grundstilar.
   ========================================================================== */

html[data-ui-version^="3.6"] {
    color-scheme: light;
    --portal-bg: #f7f9fc;
    --portal-surface: #ffffff;
    --portal-surface-soft: #f8fafc;
    --portal-surface-blue: #f2f7ff;
    --portal-border: #e4e9f2;
    --portal-border-strong: #d5deeb;
    --portal-text: #0b1736;
    --portal-muted: #647089;
    --portal-muted-2: #8792a7;
    --portal-blue: #1769e8;
    --portal-blue-strong: #0b56c7;
    --portal-blue-soft: #eaf2ff;
    --portal-green: #148a55;
    --portal-green-soft: #eaf7f0;
    --portal-violet: #7250d8;
    --portal-violet-soft: #f2edff;
    --portal-amber: #a96608;
    --portal-amber-soft: #fff4df;
    --portal-red: #c8404b;
    --portal-red-soft: #fff0f1;
    --portal-info: #0c86b8;
    --portal-info-soft: #e8f7fc;
    --portal-shadow: 0 20px 54px rgba(31, 51, 91, .09);
    --portal-shadow-soft: 0 7px 24px rgba(31, 51, 91, .06);
    --portal-shadow-float: 0 14px 42px rgba(22, 45, 88, .14);
    --portal-radius-xl: 20px;
    --portal-radius-lg: 16px;
    --portal-radius-md: 12px;
    --portal-sidebar-width: 252px;
    --portal-topbar-height: 70px;
    background: var(--portal-bg);
}

html[data-ui-version^="3.6"][data-theme="dark"] {
    color-scheme: light;
    --portal-bg: #f7f9fc;
    --portal-surface: #ffffff;
    --portal-surface-soft: #f8fafc;
    --portal-surface-blue: #f2f7ff;
    --portal-border: #e4e9f2;
    --portal-border-strong: #d5deeb;
    --portal-text: #0b1736;
    --portal-muted: #647089;
    --portal-muted-2: #8792a7;
    --portal-blue: #1769e8;
    --portal-blue-strong: #0b56c7;
    --portal-blue-soft: #eaf2ff;
    --portal-green: #148a55;
    --portal-green-soft: #eaf7f0;
    --portal-amber: #a96608;
    --portal-amber-soft: #fff4df;
    --portal-red: #c8404b;
    --portal-red-soft: #fff0f1;
}

html[data-ui-version^="3.6"] body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

html[data-ui-version^="3.6"] .has-portal-shell {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 92% 4%, rgba(63, 121, 232, .05), transparent 26%),
        var(--portal-bg);
    color: var(--portal-text);
}

html[data-ui-version^="3.6"] .has-portal-shell a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
html[data-ui-version^="3.6"] .has-portal-shell button,
html[data-ui-version^="3.6"] .has-portal-shell input,
html[data-ui-version^="3.6"] .has-portal-shell select,
html[data-ui-version^="3.6"] .has-portal-shell textarea { font: inherit; }

html[data-ui-version^="3.6"] .skip-link {
    position: fixed;
    z-index: 1000;
    left: 16px;
    top: -90px;
    padding: 11px 16px;
    border-radius: 10px;
    background: #0b1736;
    color: #fff;
    font-weight: 750;
    transition: top .16s ease;
}
html[data-ui-version^="3.6"] .skip-link:focus { top: 16px; }

/* ---- Portalram --------------------------------------------------------- */
html[data-ui-version^="3.6"] .applo-shell {
    display: grid;
    grid-template-columns: var(--portal-sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
    background: transparent;
}

html[data-ui-version^="3.6"] .applo-sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: var(--portal-sidebar-width);
    height: 100vh;
    min-height: 0;
    padding: 24px 16px 18px;
    border-right: 1px solid var(--portal-border);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(18px);
}

html[data-ui-version^="3.6"] .portal-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    margin: 1px 8px 30px;
    color: var(--portal-text);
    font-size: 1.38rem;
    font-weight: 840;
    letter-spacing: -.045em;
    text-decoration: none;
}
html[data-ui-version^="3.6"] .portal-brand img { width: 31px; height: 35px; }

html[data-ui-version^="3.6"] .portal-primary-nav {
    display: grid;
    gap: 5px;
}
html[data-ui-version^="3.6"] .portal-primary-nav > a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 46px;
    gap: 12px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #526079;
    font-size: .9rem;
    font-weight: 680;
    text-decoration: none;
    transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
html[data-ui-version^="3.6"] .portal-primary-nav > a:hover {
    color: var(--portal-text);
    background: #f5f7fb;
    transform: translateX(1px);
}
html[data-ui-version^="3.6"] .portal-primary-nav > a[aria-current="page"] {
    color: var(--portal-blue);
    border-color: #dce8fc;
    background: linear-gradient(90deg, #eaf2ff 0%, #f3f7ff 100%);
    box-shadow: inset 3px 0 0 var(--portal-blue);
}
html[data-ui-version^="3.6"] .portal-primary-nav .portal-icon { width: 19px; height: 19px; }

html[data-ui-version^="3.6"] .portal-sidebar-bottom {
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--portal-border);
}
html[data-ui-version^="3.6"] .portal-user-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 7px 8px;
}
html[data-ui-version^="3.6"] .portal-user-card > span:last-child { min-width: 0; }
html[data-ui-version^="3.6"] .portal-user-card strong,
html[data-ui-version^="3.6"] .portal-user-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui-version^="3.6"] .portal-user-card strong { color: var(--portal-text); font-size: .84rem; }
html[data-ui-version^="3.6"] .portal-user-card small { margin-top: 2px; color: var(--portal-muted); font-size: .72rem; }

html[data-ui-version^="3.6"] .portal-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid #dce5f3;
    border-radius: 50%;
    background: linear-gradient(145deg, #edf4ff, #dfeaff);
    color: #185cb8;
    font-size: .82rem;
    font-weight: 820;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.65);
}

html[data-ui-version^="3.6"] .portal-logout-form button {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    gap: 11px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--portal-muted);
    cursor: pointer;
    font-weight: 660;
}
html[data-ui-version^="3.6"] .portal-logout-form button:hover { background: var(--portal-red-soft); color: var(--portal-red); }

html[data-ui-version^="3.6"] .applo-workspace {
    min-width: 0;
    min-height: 100vh;
}

html[data-ui-version^="3.6"] .portal-topbar {
    position: sticky;
    top: 0;
    z-index: 32;
    display: flex;
    min-height: var(--portal-topbar-height);
    align-items: center;
    gap: 18px;
    padding: 0 clamp(22px, 3vw, 44px);
    border-bottom: 1px solid var(--portal-border);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(18px);
}
html[data-ui-version^="3.6"] .portal-mobile-brand { display: none; }
html[data-ui-version^="3.6"] .portal-topbar-context {
    color: #526079;
    font-size: .83rem;
    font-weight: 720;
}
html[data-ui-version^="3.6"] .portal-topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
html[data-ui-version^="3.6"] .portal-time-pill {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid var(--portal-border);
    border-radius: 999px;
    background: #fff;
    color: var(--portal-muted);
    font-size: .74rem;
    white-space: nowrap;
}
html[data-ui-version^="3.6"] .portal-time-pill .portal-icon { width: 15px; height: 15px; color: var(--portal-blue); }
html[data-ui-version^="3.6"] .portal-time-pill time { color: var(--portal-text); font-variant-numeric: tabular-nums; font-weight: 760; }

html[data-ui-version^="3.6"] .portal-account-menu { position: relative; }
html[data-ui-version^="3.6"] .portal-account-menu > summary {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 9px;
    padding: 3px 7px 3px 3px;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
}
html[data-ui-version^="3.6"] .portal-account-menu > summary::-webkit-details-marker { display: none; }
html[data-ui-version^="3.6"] .portal-account-menu > summary:hover,
html[data-ui-version^="3.6"] .portal-account-menu[open] > summary { border-color: var(--portal-border); background: var(--portal-surface-soft); }
html[data-ui-version^="3.6"] .portal-account-menu .portal-avatar { width: 34px; height: 34px; flex-basis: 34px; }
html[data-ui-version^="3.6"] .portal-account-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--portal-text); font-size: .8rem; font-weight: 720; }
html[data-ui-version^="3.6"] .portal-chevron { color: var(--portal-muted); }
html[data-ui-version^="3.6"] .portal-account-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    display: grid;
    width: 250px;
    padding: 9px;
    border: 1px solid var(--portal-border);
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--portal-shadow-float);
}
html[data-ui-version^="3.6"] .portal-account-identity { display: grid; gap: 2px; padding: 11px 11px 13px; border-bottom: 1px solid var(--portal-border); margin-bottom: 6px; }
html[data-ui-version^="3.6"] .portal-account-identity strong { font-size: .88rem; }
html[data-ui-version^="3.6"] .portal-account-identity small { overflow: hidden; text-overflow: ellipsis; color: var(--portal-muted); font-size: .73rem; }
html[data-ui-version^="3.6"] .portal-account-popover > a,
html[data-ui-version^="3.6"] .portal-account-popover form button {
    display: flex;
    width: 100%;
    min-height: 41px;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #43516a;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 650;
    text-decoration: none;
}
html[data-ui-version^="3.6"] .portal-account-popover > a:hover,
html[data-ui-version^="3.6"] .portal-account-popover form button:hover { background: var(--portal-surface-soft); color: var(--portal-text); }
html[data-ui-version^="3.6"] .portal-account-popover form { margin: 5px 0 0; padding-top: 5px; border-top: 1px solid var(--portal-border); }
html[data-ui-version^="3.6"] .portal-account-popover form button.is-danger:hover { background: var(--portal-red-soft); color: var(--portal-red); }

html[data-ui-version^="3.6"] .portal-content {
    width: min(100%, 1540px);
    min-width: 0;
    margin: 0 auto;
    padding: 34px clamp(22px, 3vw, 44px) 72px;
}
html[data-ui-version^="3.6"] .portal-mobile-nav { display: none; }

/* ---- Gemensam typografi, kort, knappar och formulär ------------------- */
html[data-ui-version^="3.6"] .portal-page,
html[data-ui-version^="3.6"] .dashboard-main,
html[data-ui-version^="3.6"] .account-page,
html[data-ui-version^="3.6"] .help-center-page { width: 100%; max-width: none; margin: 0; padding: 0; }

html[data-ui-version^="3.6"] .page-heading,
html[data-ui-version^="3.6"] .dashboard-heading,
html[data-ui-version^="3.6"] .workspace-heading {
    margin: 0 0 24px;
}
html[data-ui-version^="3.6"] .page-heading-split,
html[data-ui-version^="3.6"] .card-heading-split,
html[data-ui-version^="3.6"] .panel-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}
html[data-ui-version^="3.6"] .page-heading > div:first-child { max-width: 780px; }
html[data-ui-version^="3.6"] .page-heading h1,
html[data-ui-version^="3.6"] .dashboard-heading h1,
html[data-ui-version^="3.6"] .workspace-heading h1 {
    margin: 4px 0 8px;
    color: var(--portal-text);
    font-size: clamp(1.78rem, 2.5vw, 2.45rem);
    line-height: 1.12;
    letter-spacing: -.04em;
}
html[data-ui-version^="3.6"] .page-heading p,
html[data-ui-version^="3.6"] .dashboard-heading > div > p:last-child,
html[data-ui-version^="3.6"] .workspace-heading p { margin: 0; color: var(--portal-muted); line-height: 1.6; }
html[data-ui-version^="3.6"] .eyebrow,
html[data-ui-version^="3.6"] .section-kicker,
html[data-ui-version^="3.6"] .account-eyebrow {
    display: block;
    margin: 0 0 5px;
    color: var(--portal-blue);
    font-size: .68rem;
    font-weight: 820;
    letter-spacing: .095em;
    line-height: 1.3;
    text-transform: uppercase;
}

html[data-ui-version^="3.6"] .surface-card,
html[data-ui-version^="3.6"] .panel,
html[data-ui-version^="3.6"] .account-panel,
html[data-ui-version^="3.6"] .help-article,
html[data-ui-version^="3.6"] .help-sidebar-card {
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-lg);
    background: var(--portal-surface);
    box-shadow: var(--portal-shadow-soft);
}
html[data-ui-version^="3.6"] .surface-card,
html[data-ui-version^="3.6"] .panel { padding: 22px; }
html[data-ui-version^="3.6"] .panel { margin: 0 0 18px; }
html[data-ui-version^="3.6"] .panel h2,
html[data-ui-version^="3.6"] .surface-card h2 { margin: 0 0 7px; color: var(--portal-text); font-size: 1.14rem; letter-spacing: -.02em; }
html[data-ui-version^="3.6"] .panel h3,
html[data-ui-version^="3.6"] .surface-card h3 { color: var(--portal-text); }
html[data-ui-version^="3.6"] .panel-note { color: var(--portal-muted); line-height: 1.58; }

html[data-ui-version^="3.6"] .button,
html[data-ui-version^="3.6"] .cta-button,
html[data-ui-version^="3.6"] .small-button,
html[data-ui-version^="3.6"] button.button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-size: .84rem;
    font-weight: 740;
    line-height: 1;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
html[data-ui-version^="3.6"] .button:hover,
html[data-ui-version^="3.6"] .cta-button:hover,
html[data-ui-version^="3.6"] .small-button:hover { transform: translateY(-1px); }
html[data-ui-version^="3.6"] .button-primary,
html[data-ui-version^="3.6"] .cta-login,
html[data-ui-version^="3.6"] .cta-button:not(.button-secondary) {
    border-color: var(--portal-blue);
    background: linear-gradient(180deg, #2477f3 0%, #1769e8 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(23,105,232,.18);
}
html[data-ui-version^="3.6"] .button-primary:hover,
html[data-ui-version^="3.6"] .cta-login:hover { border-color: var(--portal-blue-strong); background: var(--portal-blue-strong); color: #fff; }
html[data-ui-version^="3.6"] .button-secondary,
html[data-ui-version^="3.6"] .small-button,
html[data-ui-version^="3.6"] .button-quiet {
    border-color: var(--portal-border-strong);
    background: #fff;
    color: #245ca8;
    box-shadow: none;
}
html[data-ui-version^="3.6"] .button-secondary:hover,
html[data-ui-version^="3.6"] .small-button:hover,
html[data-ui-version^="3.6"] .button-quiet:hover { border-color: #b9cae0; background: #f7faff; color: var(--portal-blue-strong); }
html[data-ui-version^="3.6"] .button-small,
html[data-ui-version^="3.6"] .button-compact,
html[data-ui-version^="3.6"] .compact-button { min-height: 35px; padding: 0 11px; font-size: .77rem; }
html[data-ui-version^="3.6"] .button[disabled],
html[data-ui-version^="3.6"] button[disabled] { cursor: not-allowed; opacity: .52; transform: none; box-shadow: none; }
html[data-ui-version^="3.6"] .button-row,
html[data-ui-version^="3.6"] .heading-actions,
html[data-ui-version^="3.6"] .table-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
html[data-ui-version^="3.6"] .subtle-link,
html[data-ui-version^="3.6"] .text-link,
html[data-ui-version^="3.6"] .back-link,
html[data-ui-version^="3.6"] .action-link { color: var(--portal-blue); font-size: .8rem; font-weight: 740; text-decoration: none; }
html[data-ui-version^="3.6"] .subtle-link:hover,
html[data-ui-version^="3.6"] .text-link:hover,
html[data-ui-version^="3.6"] .back-link:hover { text-decoration: underline; }
html[data-ui-version^="3.6"] .text-button {
    border: 0;
    background: transparent;
    color: var(--portal-blue);
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    font-weight: 730;
}
html[data-ui-version^="3.6"] .text-button.is-danger { color: var(--portal-red); }

html[data-ui-version^="3.6"] input,
html[data-ui-version^="3.6"] select,
html[data-ui-version^="3.6"] textarea {
    width: 100%;
    min-height: 43px;
    box-sizing: border-box;
    border: 1px solid var(--portal-border-strong);
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: var(--portal-text);
    padding: 10px 12px;
    transition: border-color .13s ease, box-shadow .13s ease, background .13s ease;
}
html[data-ui-version^="3.6"] textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
html[data-ui-version^="3.6"] input:focus,
html[data-ui-version^="3.6"] select:focus,
html[data-ui-version^="3.6"] textarea:focus {
    border-color: #6ca3ef;
    box-shadow: 0 0 0 3px rgba(23,105,232,.12);
}
html[data-ui-version^="3.6"] input[readonly],
html[data-ui-version^="3.6"] input[disabled] { background: #f6f8fb; color: #6e7990; }
html[data-ui-version^="3.6"] label > span,
html[data-ui-version^="3.6"] .field-label { display: block; margin-bottom: 6px; color: #34415b; font-size: .78rem; font-weight: 730; }
html[data-ui-version^="3.6"] label small { display: block; margin-top: 6px; color: var(--portal-muted); font-size: .72rem; line-height: 1.45; }
html[data-ui-version^="3.6"] .stacked-form,
html[data-ui-version^="3.6"] .settings-form,
html[data-ui-version^="3.6"] .simple-setting-form { display: grid; gap: 15px; }
html[data-ui-version^="3.6"] .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: end; }
html[data-ui-version^="3.6"] .form-grid-two,
html[data-ui-version^="3.6"] .form-columns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
html[data-ui-version^="3.6"] .form-span-2 { grid-column: 1 / -1; }
html[data-ui-version^="3.6"] fieldset { min-width: 0; margin: 0; padding: 15px; border: 1px solid var(--portal-border); border-radius: 11px; }
html[data-ui-version^="3.6"] legend { padding: 0 7px; color: #39465f; font-size: .77rem; font-weight: 760; }
html[data-ui-version^="3.6"] .check,
html[data-ui-version^="3.6"] .toggle-row { display: flex; gap: 9px; align-items: flex-start; }
html[data-ui-version^="3.6"] .check input { width: 17px; height: 17px; min-height: 0; margin: 2px 0 0; accent-color: var(--portal-blue); }
html[data-ui-version^="3.6"] .check > span { margin: 0; font-weight: 650; }
html[data-ui-version^="3.6"] .check > span small { font-weight: 400; }

html[data-ui-version^="3.6"] :focus-visible { outline: 3px solid rgba(23,105,232,.28); outline-offset: 2px; }
html[data-ui-version^="3.6"] .visually-hidden,
html[data-ui-version^="3.6"] .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* ---- Notiser, statusar och tomlägen ------------------------------------ */
html[data-ui-version^="3.6"] .notice,
html[data-ui-version^="3.6"] .success,
html[data-ui-version^="3.6"] .alert {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 13px 15px;
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    font-size: .83rem;
    line-height: 1.55;
}
html[data-ui-version^="3.6"] .notice-success,
html[data-ui-version^="3.6"] .success { border-color: #bfe6d0; background: var(--portal-green-soft); color: #126b46; }
html[data-ui-version^="3.6"] .notice-error,
html[data-ui-version^="3.6"] .alert { border-color: #efc8cc; background: var(--portal-red-soft); color: #9c303b; }
html[data-ui-version^="3.6"] .status-chip,
html[data-ui-version^="3.6"] .status-pill,
html[data-ui-version^="3.6"] .count-pill,
html[data-ui-version^="3.6"] .card-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f0f3f7;
    color: #5e687c;
    font-size: .68rem;
    font-weight: 780;
    white-space: nowrap;
}
html[data-ui-version^="3.6"] .status-chip.is-success,
html[data-ui-version^="3.6"] .status-pill.status-active,
html[data-ui-version^="3.6"] .status-pill.status-succeeded { background: var(--portal-green-soft); color: var(--portal-green); }
html[data-ui-version^="3.6"] .status-chip.is-info,
html[data-ui-version^="3.6"] .status-chip.is-running { background: var(--portal-blue-soft); color: var(--portal-blue); }
html[data-ui-version^="3.6"] .status-chip.is-warning { background: var(--portal-amber-soft); color: var(--portal-amber); }
html[data-ui-version^="3.6"] .status-chip.is-danger { background: var(--portal-red-soft); color: var(--portal-red); }
html[data-ui-version^="3.6"] .status-chip.is-muted,
html[data-ui-version^="3.6"] .status-chip.is-neutral { background: #f0f2f6; color: #697387; }
html[data-ui-version^="3.6"] .status-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--portal-muted-2); }
html[data-ui-version^="3.6"] .status-dot.is-success { background: var(--portal-green); box-shadow: 0 0 0 4px rgba(20,138,85,.1); }
html[data-ui-version^="3.6"] .status-dot.is-running { background: var(--portal-blue); box-shadow: 0 0 0 4px rgba(23,105,232,.1); }
html[data-ui-version^="3.6"] .compact-empty,
html[data-ui-version^="3.6"] .empty-state {
    display: grid;
    place-items: center;
    gap: 5px;
    min-height: 150px;
    padding: 28px;
    border: 1px dashed #d8e0eb;
    border-radius: 12px;
    background: #fafbfd;
    color: var(--portal-muted);
    text-align: center;
}
html[data-ui-version^="3.6"] .compact-empty strong { color: var(--portal-text); }
html[data-ui-version^="3.6"] .permission-note { margin: 14px 0 0; padding: 12px 13px; border-radius: 10px; background: #f6f8fb; color: var(--portal-muted); font-size: .78rem; line-height: 1.5; }

/* ---- Dashboard --------------------------------------------------------- */
html[data-ui-version^="3.6"] .metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin: 0 0 18px;
}
html[data-ui-version^="3.6"] .metric-card {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    gap: 12px;
    align-items: center;
    min-height: 126px;
    padding: 18px;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-lg);
    background: #fff;
    box-shadow: 0 5px 18px rgba(29,50,88,.045);
}
html[data-ui-version^="3.6"] .metric-card > div { min-width: 0; }
html[data-ui-version^="3.6"] .metric-card > div > span,
html[data-ui-version^="3.6"] .metric-card > span:not(.metric-icon) { display: block; color: #536079; font-size: .77rem; font-weight: 680; }
html[data-ui-version^="3.6"] .metric-card strong { display: block; margin: 3px 0 2px; color: var(--portal-text); font-size: 1.75rem; line-height: 1.05; letter-spacing: -.045em; }
html[data-ui-version^="3.6"] .metric-card small { display: block; color: var(--portal-muted); font-size: .69rem; line-height: 1.42; }
html[data-ui-version^="3.6"] .metric-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 1.2rem;
    font-weight: 800;
}
html[data-ui-version^="3.6"] .metric-icon.is-blue { background: var(--portal-blue-soft); color: var(--portal-blue); }
html[data-ui-version^="3.6"] .metric-icon.is-green { background: var(--portal-green-soft); color: var(--portal-green); }
html[data-ui-version^="3.6"] .metric-icon.is-violet { background: var(--portal-violet-soft); color: var(--portal-violet); }
html[data-ui-version^="3.6"] .metric-icon.is-amber { background: var(--portal-amber-soft); color: var(--portal-amber); }

html[data-ui-version^="3.6"] .overview-main-grid {
    display: grid;
    grid-template-columns: minmax(420px, .9fr) minmax(520px, 1.25fr);
    gap: 18px;
    margin-bottom: 18px;
}
html[data-ui-version^="3.6"] .package-shortcut-card {
    position: relative;
    overflow: hidden;
    min-height: 310px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: center;
    padding: 27px;
    border-color: #d7e5fb;
    background:
        radial-gradient(circle at 88% 10%, rgba(122, 161, 232, .18), transparent 30%),
        linear-gradient(135deg, #f7fbff 0%, #edf5ff 100%);
}
html[data-ui-version^="3.6"] .package-shortcut-copy { position: relative; z-index: 2; }
html[data-ui-version^="3.6"] .package-shortcut-card .card-badge { margin-bottom: 17px; background: rgba(255,255,255,.76); color: #496383; border: 1px solid rgba(183,203,232,.7); }
html[data-ui-version^="3.6"] .package-shortcut-card h2 { max-width: 430px; margin: 0 0 10px; font-size: clamp(1.42rem, 2vw, 1.9rem); line-height: 1.15; }
html[data-ui-version^="3.6"] .package-shortcut-card p:not(.eyebrow) { max-width: 500px; margin: 0 0 18px; color: #5a6a82; line-height: 1.58; font-size: .88rem; }
html[data-ui-version^="3.6"] .package-shortcut-card .subtle-link { display: inline-flex; gap: 6px; margin-top: 17px; }
html[data-ui-version^="3.6"] .package-illustration { position: relative; width: 180px; height: 180px; align-self: center; justify-self: center; }
html[data-ui-version^="3.6"] .package-box { position: absolute; left: 36px; bottom: 28px; width: 108px; height: 77px; border-radius: 8px 8px 18px 18px; background: linear-gradient(160deg,#bed7fb,#8eb8f1); box-shadow: 0 18px 28px rgba(43,91,156,.16); transform: skewY(-3deg); }
html[data-ui-version^="3.6"] .package-box::before,
html[data-ui-version^="3.6"] .package-box::after { content:""; position:absolute; top:-31px; width:62px; height:45px; background:#d7e7fd; }
html[data-ui-version^="3.6"] .package-box::before { left:0; clip-path:polygon(0 22%,100% 0,83% 100%,10% 81%); }
html[data-ui-version^="3.6"] .package-box::after { right:0; clip-path:polygon(0 0,100% 22%,90% 81%,17% 100%); }
html[data-ui-version^="3.6"] .package-file { position:absolute; z-index:3; display:grid; place-items:center; width:42px; height:52px; border:1px solid #b6cdf2; border-radius:9px; background:#fff; color:var(--portal-blue); font-style:normal; font-weight:850; box-shadow:0 10px 22px rgba(31,71,130,.14); }
html[data-ui-version^="3.6"] .package-file-one { left:26px; top:18px; transform:rotate(-9deg); color:var(--portal-green); }
html[data-ui-version^="3.6"] .package-file-two { left:75px; top:2px; transform:rotate(3deg); color:var(--portal-violet); }
html[data-ui-version^="3.6"] .package-file-three { right:14px; top:33px; transform:rotate(10deg); }

html[data-ui-version^="3.6"] .release-chart-card { min-width: 0; min-height: 310px; }
html[data-ui-version^="3.6"] .card-heading { margin-bottom: 18px; }
html[data-ui-version^="3.6"] .card-heading h2 { margin: 0; }
html[data-ui-version^="3.6"] .card-heading p:not(.eyebrow) { margin: 6px 0 0; color: var(--portal-muted); font-size: .81rem; line-height: 1.5; }
html[data-ui-version^="3.6"] .range-switch { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--portal-border); border-radius: 10px; background: #f8fafc; }
html[data-ui-version^="3.6"] .range-switch a { min-width: 66px; padding: 7px 10px; border-radius: 7px; color: var(--portal-muted); font-size: .72rem; font-weight: 700; text-align: center; text-decoration: none; }
html[data-ui-version^="3.6"] .range-switch a[aria-current="page"] { background: #fff; color: var(--portal-blue); box-shadow: 0 1px 5px rgba(33,52,87,.1); }
html[data-ui-version^="3.6"] .release-chart { display: grid; grid-template-columns: repeat(var(--chart-columns, 14), minmax(18px,1fr)); gap: 7px; height: 186px; align-items: end; padding: 15px 4px 0; border-bottom: 1px solid #dfe5ee; background: repeating-linear-gradient(to top, transparent 0, transparent 45px, #eef2f7 46px); }
html[data-ui-version^="3.6"] .release-chart-day { display: grid; grid-template-rows: 145px auto; gap: 7px; min-width: 0; height: 100%; align-items: end; }
html[data-ui-version^="3.6"] .release-chart-bars { display: flex; height: 145px; align-items: flex-end; justify-content: center; gap: 2px; }
html[data-ui-version^="3.6"] .release-chart .bar { display:block; width:min(7px,30%); min-height:3px; border-radius:4px 4px 1px 1px; opacity:.95; }
html[data-ui-version^="3.6"] .release-chart .bar.is-install,
html[data-ui-version^="3.6"] .chart-legend i.is-install { background: var(--portal-blue); }
html[data-ui-version^="3.6"] .release-chart .bar.is-upgrade,
html[data-ui-version^="3.6"] .chart-legend i.is-upgrade { background: #9bbdf1; }
html[data-ui-version^="3.6"] .release-chart .bar.is-export,
html[data-ui-version^="3.6"] .chart-legend i.is-export { background: repeating-linear-gradient(135deg,var(--portal-violet),var(--portal-violet) 2px,#b6a5ec 2px,#b6a5ec 4px); }
html[data-ui-version^="3.6"] .release-chart-day small { overflow:hidden; color:#7b8699; font-size:.58rem; line-height:1; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-version^="3.6"] .chart-legend { display:flex; justify-content:center; gap:18px; margin-top:13px; color:var(--portal-muted); font-size:.67rem; }
html[data-ui-version^="3.6"] .chart-legend span { display:inline-flex; align-items:center; gap:5px; }
html[data-ui-version^="3.6"] .chart-legend i { width:8px; height:8px; border-radius:2px; }
html[data-ui-version^="3.6"] .h-2{height:2%}.h-5{height:5%}.h-10{height:10%}.h-15{height:15%}.h-20{height:20%}.h-25{height:25%}.h-30{height:30%}.h-35{height:35%}.h-40{height:40%}.h-45{height:45%}.h-50{height:50%}.h-55{height:55%}.h-60{height:60%}.h-65{height:65%}.h-70{height:70%}.h-75{height:75%}.h-80{height:80%}.h-85{height:85%}.h-90{height:90%}.h-95{height:95%}.h-100{height:100%}

html[data-ui-version^="3.6"] .overview-secondary-grid { display:grid; grid-template-columns:1.05fr .8fr 1fr; gap:18px; }
html[data-ui-version^="3.6"] .activity-card,
html[data-ui-version^="3.6"] .quick-links-card,
html[data-ui-version^="3.6"] .health-card { min-height: 294px; }
html[data-ui-version^="3.6"] .activity-list { display:grid; gap:0; margin:0; padding:0; list-style:none; }
html[data-ui-version^="3.6"] .activity-list li { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:10px; align-items:center; min-height:54px; border-top:1px solid #edf0f5; }
html[data-ui-version^="3.6"] .activity-list li:first-child { border-top:0; }
html[data-ui-version^="3.6"] .activity-list a { min-width:0; text-decoration:none; }
html[data-ui-version^="3.6"] .activity-list strong,
html[data-ui-version^="3.6"] .activity-list small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-version^="3.6"] .activity-list strong { color:#26334c; font-size:.77rem; }
html[data-ui-version^="3.6"] .activity-list small { margin-top:2px; color:var(--portal-muted); font-size:.66rem; }
html[data-ui-version^="3.6"] .activity-list time { color:#7a8598; font-size:.65rem; white-space:nowrap; }
html[data-ui-version^="3.6"] .activity-symbol { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:#f0f3f8; color:#657186; font-size:.75rem; font-weight:850; }
html[data-ui-version^="3.6"] .activity-symbol.is-success { background:var(--portal-green-soft); color:var(--portal-green); }
html[data-ui-version^="3.6"] .activity-symbol.is-running { background:var(--portal-blue-soft); color:var(--portal-blue); }
html[data-ui-version^="3.6"] .activity-symbol.is-danger { background:var(--portal-red-soft); color:var(--portal-red); }
html[data-ui-version^="3.6"] .activity-symbol.is-warning { background:var(--portal-amber-soft); color:var(--portal-amber); }

html[data-ui-version^="3.6"] .quick-link-list { display:grid; gap:7px; }
html[data-ui-version^="3.6"] .quick-link-list a { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:11px; align-items:center; min-height:55px; padding:7px 9px; border:1px solid transparent; border-radius:11px; color:var(--portal-text); text-decoration:none; }
html[data-ui-version^="3.6"] .quick-link-list a:hover { border-color:var(--portal-border); background:#f8faff; }
html[data-ui-version^="3.6"] .quick-link-list strong,
html[data-ui-version^="3.6"] .quick-link-list small { display:block; }
html[data-ui-version^="3.6"] .quick-link-list strong { font-size:.78rem; }
html[data-ui-version^="3.6"] .quick-link-list small { margin-top:2px; color:var(--portal-muted); font-size:.66rem; }
html[data-ui-version^="3.6"] .quick-link-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--portal-blue-soft); color:var(--portal-blue); font-weight:850; }
html[data-ui-version^="3.6"] .quick-link-list b { color:#8b95a7; font-size:1rem; }

html[data-ui-version^="3.6"] .health-card { position:relative; overflow:hidden; background:linear-gradient(145deg,#fbfffd,#f3faf6); }
html[data-ui-version^="3.6"] .health-card-heading { position:relative; z-index:2; display:grid; grid-template-columns:38px 1fr; gap:11px; align-items:start; }
html[data-ui-version^="3.6"] .health-card-heading h2 { margin:1px 0 5px; }
html[data-ui-version^="3.6"] .health-card-heading p { margin:0; max-width:310px; color:#5d6e66; font-size:.77rem; line-height:1.48; }
html[data-ui-version^="3.6"] .health-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--portal-green-soft); color:var(--portal-green); font-weight:850; }
html[data-ui-version^="3.6"] .health-facts { position:relative; z-index:2; display:grid; gap:11px; margin-top:19px; }
html[data-ui-version^="3.6"] .health-facts span { display:flex; align-items:center; gap:9px; color:#57675f; font-size:.71rem; }
html[data-ui-version^="3.6"] .health-facts i { width:8px; height:8px; border-radius:50%; background:var(--portal-green); }
html[data-ui-version^="3.6"] .landscape-illustration { position:absolute; right:-8px; bottom:-8px; width:190px; height:120px; opacity:.75; pointer-events:none; }
html[data-ui-version^="3.6"] .landscape-illustration .sun { position:absolute; right:24px; top:8px; width:28px; height:28px; border-radius:50%; background:#ffd57c; box-shadow:0 0 24px rgba(255,197,78,.28); }
html[data-ui-version^="3.6"] .mountain { position:absolute; bottom:28px; width:0; height:0; border-left:70px solid transparent; border-right:70px solid transparent; border-bottom:80px solid #c5d9e7; }
html[data-ui-version^="3.6"] .mountain-back { right:36px; transform:scale(.78); border-bottom-color:#d8e5ee; }
html[data-ui-version^="3.6"] .mountain-front { right:-4px; border-bottom-color:#aec8d8; }
html[data-ui-version^="3.6"] .lake { position:absolute; right:0; bottom:0; width:180px; height:35px; border-radius:70% 0 0 0; background:linear-gradient(180deg,#c7dfe9,#aecbd9); }

html[data-ui-version^="3.6"] .apps-section { margin-top:18px; }
html[data-ui-version^="3.6"] .app-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
html[data-ui-version^="3.6"] .app-card { display:grid; gap:16px; min-height:195px; padding:20px; border:1px solid var(--portal-border); border-radius:15px; background:#fff; box-shadow:0 4px 16px rgba(31,50,84,.045); }
html[data-ui-version^="3.6"] .app-card-top { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:11px; align-items:center; }
html[data-ui-version^="3.6"] .app-card-icon,
html[data-ui-version^="3.6"] .admin-app-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--portal-blue-soft); color:var(--portal-blue); font-weight:840; overflow:hidden; }
html[data-ui-version^="3.6"] .app-card-icon img,
html[data-ui-version^="3.6"] .admin-app-icon img { width:100%; height:100%; object-fit:cover; }
html[data-ui-version^="3.6"] .app-card h3 { margin:0; font-size:.95rem; }
html[data-ui-version^="3.6"] .app-card p { margin:0; color:var(--portal-muted); font-size:.76rem; line-height:1.55; }
html[data-ui-version^="3.6"] .app-card-action { align-self:end; display:flex; justify-content:space-between; align-items:center; gap:8px; padding-top:13px; border-top:1px solid #edf0f5; color:var(--portal-blue); font-size:.75rem; font-weight:740; text-decoration:none; }

/* ---- Paketcenter ------------------------------------------------------- */
html[data-ui-version^="3.6"] .breadcrumb { display:flex; align-items:center; gap:7px; margin:0 0 16px; color:var(--portal-muted); font-size:.7rem; }
html[data-ui-version^="3.6"] .breadcrumb a { color:var(--portal-blue); text-decoration:none; }
html[data-ui-version^="3.6"] .heading-status { display:flex; min-width:250px; gap:11px; align-items:center; padding:12px 14px; border:1px solid var(--portal-border); border-radius:12px; background:#fff; }
html[data-ui-version^="3.6"] .heading-status strong,
html[data-ui-version^="3.6"] .heading-status small { display:block; }
html[data-ui-version^="3.6"] .heading-status strong { color:var(--portal-text); font-size:.79rem; }
html[data-ui-version^="3.6"] .heading-status small { margin-top:3px; color:var(--portal-muted); font-size:.67rem; }
html[data-ui-version^="3.6"] .section-tabs,
html[data-ui-version^="3.6"] .admin-tabs { display:flex; gap:4px; margin:0 0 18px; padding:4px; border:1px solid var(--portal-border); border-radius:12px; background:#f1f4f8; overflow-x:auto; }
html[data-ui-version^="3.6"] .section-tabs a,
html[data-ui-version^="3.6"] .admin-tabs a { display:inline-flex; min-height:39px; align-items:center; justify-content:center; gap:7px; padding:0 15px; border-radius:9px; color:#5b667a; font-size:.78rem; font-weight:710; text-decoration:none; white-space:nowrap; }
html[data-ui-version^="3.6"] .section-tabs a[aria-current="page"],
html[data-ui-version^="3.6"] .admin-tabs a[aria-current="page"] { background:#fff; color:var(--portal-blue); box-shadow:0 2px 7px rgba(31,52,89,.09); }
html[data-ui-version^="3.6"] .section-tabs a span { display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--portal-blue); color:#fff; font-size:.6rem; }
html[data-ui-version^="3.6"] .package-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
html[data-ui-version^="3.6"] .package-action-card { display:grid; grid-template-columns:58px minmax(0,1fr); gap:17px; min-height:200px; padding:24px; border:1px solid var(--portal-border); border-radius:18px; background:#fff; color:inherit; box-shadow:var(--portal-shadow-soft); text-decoration:none; transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
html[data-ui-version^="3.6"] .package-action-card:hover { transform:translateY(-2px); border-color:#c7d8ef; box-shadow:var(--portal-shadow); }
html[data-ui-version^="3.6"] .package-action-card.is-install { background:linear-gradient(145deg,#fff,#f3f8ff); }
html[data-ui-version^="3.6"] .package-action-card.is-export { background:linear-gradient(145deg,#fff,#faf7ff); }
html[data-ui-version^="3.6"] .package-action-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:15px; background:var(--portal-blue-soft); color:var(--portal-blue); font-size:1.45rem; font-weight:860; }
html[data-ui-version^="3.6"] .package-action-card.is-export .package-action-icon { background:var(--portal-violet-soft); color:var(--portal-violet); }
html[data-ui-version^="3.6"] .package-action-card h2 { margin:2px 0 8px; font-size:1.25rem; }
html[data-ui-version^="3.6"] .package-action-card p:not(.eyebrow) { margin:0 0 16px; color:var(--portal-muted); font-size:.82rem; line-height:1.55; }
html[data-ui-version^="3.6"] .package-metrics { margin-bottom:18px; }
html[data-ui-version^="3.6"] .package-overview-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr); gap:18px; }
html[data-ui-version^="3.6"] .latest-package-card { min-width:0; }
html[data-ui-version^="3.6"] .data-list { display:grid; }
html[data-ui-version^="3.6"] .data-list > a,
html[data-ui-version^="3.6"] .data-list > div { display:grid; grid-template-columns:34px minmax(0,1fr) auto auto; gap:10px; align-items:center; min-height:56px; border-top:1px solid #edf0f5; color:inherit; text-decoration:none; }
html[data-ui-version^="3.6"] .data-list > :first-child { border-top:0; }
html[data-ui-version^="3.6"] .data-list-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:#f1f5fb; color:var(--portal-blue); font-weight:820; }
html[data-ui-version^="3.6"] .data-list strong,
html[data-ui-version^="3.6"] .data-list small { display:block; }
html[data-ui-version^="3.6"] .data-list strong { color:#26334b; font-size:.77rem; }
html[data-ui-version^="3.6"] .data-list small { margin-top:3px; color:var(--portal-muted); font-size:.65rem; }
html[data-ui-version^="3.6"] .data-list b { color:#8e98aa; }
html[data-ui-version^="3.6"] .package-workflow-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); gap:18px; }
html[data-ui-version^="3.6"] .upload-card { min-width:0; }
html[data-ui-version^="3.6"] .package-upload-form { display:grid; gap:16px; }
html[data-ui-version^="3.6"] .drop-zone { position:relative; display:grid; place-items:center; gap:7px; min-height:190px; padding:25px; border:1.5px dashed #aebfd6; border-radius:14px; background:#f9fbfe; color:var(--portal-muted); text-align:center; cursor:pointer; transition:border-color .14s ease,background .14s ease; }
html[data-ui-version^="3.6"] .drop-zone:hover,
html[data-ui-version^="3.6"] .drop-zone.is-dragover { border-color:var(--portal-blue); background:var(--portal-blue-soft); }
html[data-ui-version^="3.6"] .drop-zone input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
html[data-ui-version^="3.6"] .drop-zone-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; background:var(--portal-blue-soft); color:var(--portal-blue); font-size:1.4rem; }
html[data-ui-version^="3.6"] .drop-zone strong { color:var(--portal-text); }
html[data-ui-version^="3.6"] .drop-zone small { font-size:.7rem; }
html[data-ui-version^="3.6"] .workflow-help-card { background:linear-gradient(145deg,#fff,#f8fafc); }
html[data-ui-version^="3.6"] .simple-steps { display:grid; gap:13px; margin:18px 0 0; padding:0; list-style:none; counter-reset:steps; }
html[data-ui-version^="3.6"] .simple-steps li { display:grid; grid-template-columns:28px minmax(0,1fr); gap:9px; align-items:start; color:#4f5d75; font-size:.78rem; line-height:1.45; counter-increment:steps; }
html[data-ui-version^="3.6"] .simple-steps li::before { content:counter(steps); display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--portal-blue-soft); color:var(--portal-blue); font-size:.68rem; font-weight:800; }
html[data-ui-version^="3.6"] .package-list-card { margin-top:18px; }
html[data-ui-version^="3.6"] .advanced-card { margin-top:18px; border:1px solid var(--portal-border); border-radius:14px; background:#fff; }
html[data-ui-version^="3.6"] .advanced-card > summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:17px 19px; cursor:pointer; list-style:none; }
html[data-ui-version^="3.6"] .advanced-card > summary::-webkit-details-marker { display:none; }
html[data-ui-version^="3.6"] .advanced-card > summary strong,
html[data-ui-version^="3.6"] .advanced-card > summary small { display:block; }
html[data-ui-version^="3.6"] .advanced-card > summary small { margin-top:3px; color:var(--portal-muted); font-size:.71rem; }
html[data-ui-version^="3.6"] .advanced-card-body { padding:0 19px 19px; border-top:1px solid var(--portal-border); }
html[data-ui-version^="3.6"] .export-option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
html[data-ui-version^="3.6"] .export-option-card { min-height:305px; }
html[data-ui-version^="3.6"] .export-option-icon { display:grid; place-items:center; width:50px; height:50px; margin-bottom:17px; border-radius:14px; background:var(--portal-blue-soft); color:var(--portal-blue); font-size:1.25rem; font-weight:850; }
html[data-ui-version^="3.6"] .export-option-icon.is-app { background:var(--portal-violet-soft); color:var(--portal-violet); }
html[data-ui-version^="3.6"] .export-option-card > p:not(.eyebrow) { color:var(--portal-muted); font-size:.82rem; line-height:1.58; }
html[data-ui-version^="3.6"] .export-option-card form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:end; margin-top:20px; }
html[data-ui-version^="3.6"] .export-option-card form .selected-export-app { padding:10px 12px; border:1px solid var(--portal-border); border-radius:10px; background:#f8fafc; }
html[data-ui-version^="3.6"] .selected-export-app strong,
html[data-ui-version^="3.6"] .selected-export-app small { display:block; }
html[data-ui-version^="3.6"] .selected-export-app small { color:var(--portal-muted); font-size:.7rem; }
html[data-ui-version^="3.6"] .export-list-card { margin-top:18px; }
html[data-ui-version^="3.6"] .export-table-wrap { width:100%; overflow-x:auto; }
html[data-ui-version^="3.6"] .modern-table { width:100%; border-collapse:collapse; min-width:680px; }
html[data-ui-version^="3.6"] .modern-table th { padding:10px 11px; border-bottom:1px solid var(--portal-border-strong); color:#6c778b; font-size:.66rem; font-weight:780; letter-spacing:.04em; text-align:left; text-transform:uppercase; }
html[data-ui-version^="3.6"] .modern-table td { padding:13px 11px; border-bottom:1px solid #edf0f5; color:#354159; font-size:.76rem; vertical-align:middle; }
html[data-ui-version^="3.6"] .modern-table tbody tr:hover { background:#fafbfd; }
html[data-ui-version^="3.6"] .modern-table strong,
html[data-ui-version^="3.6"] .modern-table small { display:block; }
html[data-ui-version^="3.6"] .modern-table strong { color:var(--portal-text); font-size:.77rem; }
html[data-ui-version^="3.6"] .modern-table small { margin-top:3px; color:var(--portal-muted); font-size:.66rem; }
html[data-ui-version^="3.6"] .history-card { min-height:350px; }
html[data-ui-version^="3.6"] .history-timeline { display:grid; }
html[data-ui-version^="3.6"] .history-timeline article { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:14px; align-items:center; padding:16px 0; border-top:1px solid #edf0f5; }
html[data-ui-version^="3.6"] .history-timeline article:first-child { border-top:0; }
html[data-ui-version^="3.6"] .timeline-marker { display:grid; place-items:center; width:31px; height:31px; border-radius:10px; background:#f1f4f8; color:#69758a; font-weight:820; }
html[data-ui-version^="3.6"] .timeline-marker.is-success { background:var(--portal-green-soft); color:var(--portal-green); }
html[data-ui-version^="3.6"] .timeline-marker.is-danger { background:var(--portal-red-soft); color:var(--portal-red); }
html[data-ui-version^="3.6"] .timeline-marker.is-warning { background:var(--portal-amber-soft); color:var(--portal-amber); }
html[data-ui-version^="3.6"] .timeline-copy { display:flex; justify-content:space-between; gap:18px; align-items:center; min-width:0; }
html[data-ui-version^="3.6"] .timeline-copy h3 { margin:2px 0 4px; font-size:.85rem; }
html[data-ui-version^="3.6"] .timeline-copy p:not(.eyebrow) { margin:0; color:var(--portal-muted); font-size:.69rem; }
html[data-ui-version^="3.6"] .timeline-copy time { color:var(--portal-muted); font-size:.7rem; white-space:nowrap; }

/* ---- Administration: appar, användare och åtkomst -------------------- */
html[data-ui-version^="3.6"] .admin-metrics { margin-bottom:18px; }
html[data-ui-version^="3.6"] .admin-app-list { display:grid; }
html[data-ui-version^="3.6"] .admin-app-row { display:grid; grid-template-columns:44px minmax(0,1fr) 150px auto; gap:13px; align-items:center; min-height:74px; padding:11px 0; border-top:1px solid #edf0f5; }
html[data-ui-version^="3.6"] .admin-app-row:first-child { border-top:0; }
html[data-ui-version^="3.6"] .admin-app-copy { min-width:0; }
html[data-ui-version^="3.6"] .admin-app-copy strong,
html[data-ui-version^="3.6"] .admin-app-copy small { display:block; }
html[data-ui-version^="3.6"] .admin-app-copy strong { color:var(--portal-text); font-size:.84rem; }
html[data-ui-version^="3.6"] .admin-app-copy small { margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--portal-muted); font-size:.69rem; }
html[data-ui-version^="3.6"] .admin-app-version { display:grid; gap:2px; color:var(--portal-muted); font-size:.67rem; }
html[data-ui-version^="3.6"] .admin-app-version strong { color:#39465d; font-size:.75rem; }
html[data-ui-version^="3.6"] .admin-app-actions { display:flex; gap:7px; justify-content:flex-end; }
html[data-ui-version^="3.6"] .admin-two-column { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.62fr); gap:18px; }
html[data-ui-version^="3.6"] .user-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
html[data-ui-version^="3.6"] .user-management-card { padding:17px; border:1px solid var(--portal-border); border-radius:13px; background:#fff; }
html[data-ui-version^="3.6"] .user-card-head { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:10px; align-items:center; }
html[data-ui-version^="3.6"] .user-card-head strong,
html[data-ui-version^="3.6"] .user-card-head small { display:block; }
html[data-ui-version^="3.6"] .user-card-head small { overflow:hidden; text-overflow:ellipsis; color:var(--portal-muted); font-size:.68rem; }
html[data-ui-version^="3.6"] .role-summary { color:var(--portal-muted); font-size:.72rem; }
html[data-ui-version^="3.6"] .user-management-card details { margin-top:12px; border-top:1px solid #edf0f5; padding-top:10px; }
html[data-ui-version^="3.6"] .user-management-card summary { cursor:pointer; color:var(--portal-blue); font-size:.72rem; font-weight:720; }
html[data-ui-version^="3.6"] .user-management-card details form { margin-top:13px; }
html[data-ui-version^="3.6"] .access-matrix-wrap { overflow:auto; }
html[data-ui-version^="3.6"] .access-matrix th:first-child { position:sticky; left:0; z-index:2; background:#fff; min-width:190px; }
html[data-ui-version^="3.6"] .inline-access-form { display:grid; gap:7px; min-width:100px; }
html[data-ui-version^="3.6"] .inline-access-form .check { margin:0; }
html[data-ui-version^="3.6"] .invitation-guidance-card { background:linear-gradient(145deg,#f9fbff,#f2f7ff); }
html[data-ui-version^="3.6"] .assurance-list { display:grid; gap:10px; margin:18px 0 0; padding:0; list-style:none; }
html[data-ui-version^="3.6"] .assurance-list li { display:flex; gap:9px; color:#45536c; font-size:.78rem; }
html[data-ui-version^="3.6"] .assurance-list li span { color:var(--portal-green); font-weight:850; }
html[data-ui-version^="3.6"] .message-card-list { display:grid; gap:13px; }
html[data-ui-version^="3.6"] .message-card { padding:16px; border:1px solid var(--portal-border); border-radius:12px; background:#fff; }
html[data-ui-version^="3.6"] .message-card header { display:flex; justify-content:space-between; gap:14px; }
html[data-ui-version^="3.6"] .message-card h3 { margin:0; font-size:.88rem; }
html[data-ui-version^="3.6"] .message-card header a,
html[data-ui-version^="3.6"] .message-card time { color:var(--portal-muted); font-size:.7rem; }
html[data-ui-version^="3.6"] .message-card > p { color:#455269; font-size:.78rem; line-height:1.58; }
html[data-ui-version^="3.6"] .message-status-form { display:grid; grid-template-columns:minmax(0,200px) auto; gap:10px; align-items:end; }

/* ---- Äldre portalvyer som behåller funktionskontrakt ----------------- */
html[data-ui-version^="3.6"] .dashboard-wide,
html[data-ui-version^="3.6"] .dashboard-narrow { max-width:none; }
html[data-ui-version^="3.6"] .dashboard-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
html[data-ui-version^="3.6"] .dashboard-heading .heading-actions { justify-content:flex-end; }
html[data-ui-version^="3.6"] .admin-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
html[data-ui-version^="3.6"] .integration-hero { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:25px; align-items:center; background:linear-gradient(145deg,#fff,#f5f9ff); }
html[data-ui-version^="3.6"] .progress-summary { display:grid; gap:10px; text-align:right; }
html[data-ui-version^="3.6"] .progress-summary strong { color:var(--portal-blue); font-size:2rem; }
html[data-ui-version^="3.6"] progress { width:100%; height:10px; accent-color:var(--portal-blue); }
html[data-ui-version^="3.6"] .check-list { display:grid; gap:9px; margin:14px 0 0; padding:0; list-style:none; }
html[data-ui-version^="3.6"] .check-list li { position:relative; padding-left:23px; color:#4b5870; font-size:.78rem; line-height:1.5; }
html[data-ui-version^="3.6"] .check-list li::before { content:"✓"; position:absolute; left:0; color:var(--portal-green); font-weight:850; }
html[data-ui-version^="3.6"] .app-builder-layout { display:grid; grid-template-columns:265px minmax(0,1fr); gap:20px; }
html[data-ui-version^="3.6"] .app-builder-sidebar { position:sticky; top:calc(var(--portal-topbar-height) + 20px); height:max-content; padding:19px; border:1px solid var(--portal-border); border-radius:15px; background:#fff; box-shadow:var(--portal-shadow-soft); }
html[data-ui-version^="3.6"] .wizard-nav { display:grid; gap:5px; }
html[data-ui-version^="3.6"] .wizard-nav a,
html[data-ui-version^="3.6"] .wizard-nav button { display:flex; width:100%; min-height:39px; align-items:center; gap:9px; padding:0 10px; border:0; border-radius:9px; background:transparent; color:#556179; font-size:.75rem; text-align:left; cursor:pointer; }
html[data-ui-version^="3.6"] .wizard-nav a[aria-current="step"],
html[data-ui-version^="3.6"] .wizard-nav button[aria-current="step"] { background:var(--portal-blue-soft); color:var(--portal-blue); }
html[data-ui-version^="3.6"] .wizard-stage,
html[data-ui-version^="3.6"] .form-section-card { padding:22px; border:1px solid var(--portal-border); border-radius:15px; background:#fff; box-shadow:var(--portal-shadow-soft); }
html[data-ui-version^="3.6"] .wizard-step-header { margin-bottom:18px; }
html[data-ui-version^="3.6"] .wizard-step-header h2 { margin:3px 0 7px; }
html[data-ui-version^="3.6"] .wizard-step-header p { color:var(--portal-muted); line-height:1.55; }
html[data-ui-version^="3.6"] .wizard-actions { display:flex; justify-content:space-between; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid var(--portal-border); }
html[data-ui-version^="3.6"] .scope-summary-grid,
html[data-ui-version^="3.6"] .responsibility-grid,
html[data-ui-version^="3.6"] .role-explainer-grid,
html[data-ui-version^="3.6"] .glossary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
html[data-ui-version^="3.6"] .scope-card,
html[data-ui-version^="3.6"] .responsibility-card,
html[data-ui-version^="3.6"] .builder-context-card,
html[data-ui-version^="3.6"] .builder-help-card { padding:16px; border:1px solid var(--portal-border); border-radius:12px; background:#fafbfd; }

/* ---- Kunskapscenter ---------------------------------------------------- */
html[data-ui-version^="3.6"] .knowledge-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; }
html[data-ui-version^="3.6"] .knowledge-main,
html[data-ui-version^="3.6"] .knowledge-create-card,
html[data-ui-version^="3.6"] .knowledge-storage-card { padding:22px; border:1px solid var(--portal-border); border-radius:16px; background:#fff; box-shadow:var(--portal-shadow-soft); }
html[data-ui-version^="3.6"] .knowledge-list { display:grid; gap:11px; }
html[data-ui-version^="3.6"] .knowledge-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:15px; padding:16px; border:1px solid var(--portal-border); border-radius:12px; color:inherit; text-decoration:none; transition:border-color .14s ease,background .14s ease; }
html[data-ui-version^="3.6"] .knowledge-card:hover { border-color:#c5d7ef; background:#f9fbff; }
html[data-ui-version^="3.6"] .knowledge-card h3 { margin:0 0 5px; font-size:.87rem; }
html[data-ui-version^="3.6"] .knowledge-card p { margin:0; color:var(--portal-muted); font-size:.72rem; line-height:1.5; }
html[data-ui-version^="3.6"] .knowledge-card-meta { display:grid; justify-items:end; gap:6px; color:var(--portal-muted); font-size:.67rem; }
html[data-ui-version^="3.6"] .knowledge-detail-main { display:grid; gap:18px; }
html[data-ui-version^="3.6"] .knowledge-document-meta { display:flex; flex-wrap:wrap; gap:8px; }
html[data-ui-version^="3.6"] .knowledge-document-meta span { padding:5px 9px; border-radius:999px; background:#f0f3f8; color:#606b7f; font-size:.67rem; }
html[data-ui-version^="3.6"] .markdown-document { padding:clamp(20px,4vw,40px); border:1px solid var(--portal-border); border-radius:16px; background:#fff; color:#344059; line-height:1.7; }
html[data-ui-version^="3.6"] .markdown-document h1,
html[data-ui-version^="3.6"] .markdown-document h2,
html[data-ui-version^="3.6"] .markdown-document h3 { color:var(--portal-text); }
html[data-ui-version^="3.6"] .markdown-document pre { overflow:auto; padding:14px; border-radius:10px; background:#0f1930; color:#e9eef8; }
html[data-ui-version^="3.6"] .markdown-document code { font-family:"SFMono-Regular",Consolas,monospace; }

/* ---- Hjälp ------------------------------------------------------------- */
html[data-ui-version^="3.6"] .help-hero { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:24px; align-items:center; margin-bottom:18px; padding:26px; border:1px solid #d9e6f8; border-radius:18px; background:linear-gradient(135deg,#f8fbff,#eef5ff); }
html[data-ui-version^="3.6"] .help-hero h1 { margin:4px 0 10px; font-size:clamp(1.8rem,3vw,2.5rem); letter-spacing:-.04em; }
html[data-ui-version^="3.6"] .help-hero p { color:#5e6d84; line-height:1.62; }
html[data-ui-version^="3.6"] .help-search { position:relative; margin-top:18px; }
html[data-ui-version^="3.6"] .help-search input { padding-left:40px; background:#fff; }
html[data-ui-version^="3.6"] .help-search-icon { position:absolute; z-index:2; left:13px; top:50%; transform:translateY(-50%); color:var(--portal-muted); }
html[data-ui-version^="3.6"] .help-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:18px; }
html[data-ui-version^="3.6"] .help-sidebar { position:sticky; top:calc(var(--portal-topbar-height) + 20px); height:max-content; }
html[data-ui-version^="3.6"] .help-sidebar-card { padding:16px; }
html[data-ui-version^="3.6"] .help-index { display:grid; gap:4px; }
html[data-ui-version^="3.6"] .help-index a { padding:9px 10px; border-radius:8px; color:#566178; font-size:.74rem; text-decoration:none; }
html[data-ui-version^="3.6"] .help-index a:hover { background:var(--portal-blue-soft); color:var(--portal-blue); }
html[data-ui-version^="3.6"] .help-content { display:grid; gap:16px; }
html[data-ui-version^="3.6"] .help-article { padding:22px; }
html[data-ui-version^="3.6"] .help-article-header { display:grid; grid-template-columns:42px minmax(0,1fr); gap:12px; align-items:start; }
html[data-ui-version^="3.6"] .article-number,
html[data-ui-version^="3.6"] .help-card-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--portal-blue-soft); color:var(--portal-blue); font-weight:820; }
html[data-ui-version^="3.6"] .help-article h2 { margin:1px 0 7px; }
html[data-ui-version^="3.6"] .help-article p,
html[data-ui-version^="3.6"] .help-article li { color:#536078; font-size:.8rem; line-height:1.62; }
html[data-ui-version^="3.6"] .help-callout { margin-top:14px; padding:13px 15px; border-left:3px solid var(--portal-blue); border-radius:0 10px 10px 0; background:#f4f8ff; color:#495977; font-size:.78rem; line-height:1.55; }
html[data-ui-version^="3.6"] .help-quick-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-bottom:18px; }
html[data-ui-version^="3.6"] .help-quick-card { padding:18px; border:1px solid var(--portal-border); border-radius:13px; background:#fff; color:inherit; text-decoration:none; }

/* ---- App- och medlemsadministration ----------------------------------- */
html[data-ui-version^="3.6"] .app-admin-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:18px; }
html[data-ui-version^="3.6"] .member-admin-list,
html[data-ui-version^="3.6"] .invitation-list { display:grid; gap:12px; }
html[data-ui-version^="3.6"] .member-admin-card,
html[data-ui-version^="3.6"] .invitation-row { padding:16px; border:1px solid var(--portal-border); border-radius:12px; background:#fff; }
html[data-ui-version^="3.6"] .member-identity { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:10px; align-items:center; }
html[data-ui-version^="3.6"] .member-avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--portal-blue-soft); color:var(--portal-blue); font-weight:820; }
html[data-ui-version^="3.6"] .member-identity h3 { margin:0; font-size:.84rem; }
html[data-ui-version^="3.6"] .member-identity p { margin:2px 0 0; color:var(--portal-muted); font-size:.69rem; }
html[data-ui-version^="3.6"] .member-role-chips { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
html[data-ui-version^="3.6"] .role-chip { display:inline-flex; align-items:center; gap:4px; min-height:26px; padding:3px 9px; border-radius:999px; background:var(--portal-blue-soft); color:var(--portal-blue); font-size:.67rem; font-weight:740; }
html[data-ui-version^="3.6"] .role-chip form { margin:0; }
html[data-ui-version^="3.6"] .role-chip button { border:0; background:transparent; color:inherit; cursor:pointer; }
html[data-ui-version^="3.6"] .member-admin-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding-top:12px; border-top:1px solid #edf0f5; }
html[data-ui-version^="3.6"] .member-status-form,
html[data-ui-version^="3.6"] .member-role-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:9px; align-items:end; }
html[data-ui-version^="3.6"] .role-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
html[data-ui-version^="3.6"] .role-option { display:flex; gap:9px; padding:10px; border:1px solid var(--portal-border); border-radius:10px; }
html[data-ui-version^="3.6"] .role-option input { width:17px; height:17px; min-height:0; accent-color:var(--portal-blue); }
html[data-ui-version^="3.6"] .role-option strong,
html[data-ui-version^="3.6"] .role-option small { display:block; }
html[data-ui-version^="3.6"] .role-option small { color:var(--portal-muted); font-size:.67rem; }
html[data-ui-version^="3.6"] .invitation-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:13px; align-items:center; }
html[data-ui-version^="3.6"] .invitation-row p,
html[data-ui-version^="3.6"] .invitation-row small { margin:3px 0 0; color:var(--portal-muted); font-size:.69rem; }
html[data-ui-version^="3.6"] .audit-list { display:grid; }
html[data-ui-version^="3.6"] .audit-list article { display:grid; grid-template-columns:minmax(0,1fr) 180px 150px; gap:12px; padding:12px 0; border-top:1px solid #edf0f5; font-size:.72rem; }
html[data-ui-version^="3.6"] .audit-list article:first-child { border-top:0; }
html[data-ui-version^="3.6"] .audit-list span,
html[data-ui-version^="3.6"] .audit-list time { color:var(--portal-muted); }

/* ---- Appvy ------------------------------------------------------------- */
html[data-ui-version^="3.6"] .app-view-actions { margin-bottom:18px; }
html[data-ui-version^="3.6"] .app-preview-card { position:relative; overflow:hidden; min-height:270px; padding:28px; border:1px solid var(--portal-border); border-radius:18px; background:linear-gradient(145deg,#fff,#f3f7fd); box-shadow:var(--portal-shadow-soft); }
html[data-ui-version^="3.6"] .app-preview-topline { display:flex; align-items:center; gap:12px; }
html[data-ui-version^="3.6"] .app-preview-mark { display:grid; place-items:center; width:50px; height:50px; border-radius:14px; background:var(--portal-blue-soft); color:var(--portal-blue); font-size:1.2rem; font-weight:850; }
html[data-ui-version^="3.6"] .app-preview-card h1 { margin:18px 0 8px; font-size:2rem; letter-spacing:-.04em; }
html[data-ui-version^="3.6"] .app-preview-card p { max-width:680px; color:var(--portal-muted); line-height:1.62; }

/* ---- Responsivitet ----------------------------------------------------- */
@media (max-width: 1280px) {
    html[data-ui-version^="3.6"] { --portal-sidebar-width: 230px; }
    html[data-ui-version^="3.6"] .overview-main-grid { grid-template-columns:1fr; }
    html[data-ui-version^="3.6"] .package-shortcut-card { min-height:270px; }
    html[data-ui-version^="3.6"] .overview-secondary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    html[data-ui-version^="3.6"] .health-card { grid-column:1 / -1; min-height:220px; }
    html[data-ui-version^="3.6"] .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    html[data-ui-version^="3.6"] .app-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    html[data-ui-version^="3.6"] .package-overview-grid { grid-template-columns:1fr; }
}

@media (max-width: 980px) {
    html[data-ui-version^="3.6"] .applo-shell { display:block; }
    html[data-ui-version^="3.6"] .applo-sidebar { display:none; }
    html[data-ui-version^="3.6"] .portal-topbar { min-height:62px; padding:0 18px; }
    html[data-ui-version^="3.6"] .portal-mobile-brand { display:inline-flex; align-items:center; gap:8px; color:var(--portal-text); font-weight:820; text-decoration:none; }
    html[data-ui-version^="3.6"] .portal-mobile-brand img { width:27px; height:31px; }
    html[data-ui-version^="3.6"] .portal-topbar-context { display:none; }
    html[data-ui-version^="3.6"] .portal-account-name { display:none; }
    html[data-ui-version^="3.6"] .portal-content { padding:25px 18px 94px; }
    html[data-ui-version^="3.6"] .portal-mobile-nav { position:fixed; z-index:48; left:12px; right:12px; bottom:10px; display:grid; grid-template-columns:repeat(4,1fr); min-height:62px; padding:6px; border:1px solid var(--portal-border); border-radius:17px; background:rgba(255,255,255,.96); box-shadow:0 14px 40px rgba(22,42,76,.18); backdrop-filter:blur(18px); }
    html[data-ui-version^="3.6"] .portal-mobile-nav > a,
    html[data-ui-version^="3.6"] .portal-mobile-nav > details > summary { display:grid; place-items:center; align-content:center; gap:3px; min-height:48px; border-radius:11px; color:#697489; font-size:.61rem; font-weight:720; text-decoration:none; list-style:none; }
    html[data-ui-version^="3.6"] .portal-mobile-nav > a[aria-current="page"] { background:var(--portal-blue-soft); color:var(--portal-blue); }
    html[data-ui-version^="3.6"] .portal-mobile-nav .portal-icon { width:19px; height:19px; }
    html[data-ui-version^="3.6"] .portal-mobile-more { position:relative; }
    html[data-ui-version^="3.6"] .portal-mobile-more > summary::-webkit-details-marker { display:none; }
    html[data-ui-version^="3.6"] .portal-mobile-sheet { position:absolute; right:0; bottom:calc(100% + 12px); display:grid; width:min(330px,calc(100vw - 28px)); padding:10px; border:1px solid var(--portal-border); border-radius:15px; background:#fff; box-shadow:var(--portal-shadow-float); }
    html[data-ui-version^="3.6"] .portal-mobile-sheet-head { display:grid; grid-template-columns:38px 1fr; gap:10px; align-items:center; padding:10px; border-bottom:1px solid var(--portal-border); margin-bottom:5px; text-align:left; }
    html[data-ui-version^="3.6"] .portal-mobile-sheet-head strong,
    html[data-ui-version^="3.6"] .portal-mobile-sheet-head small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    html[data-ui-version^="3.6"] .portal-mobile-sheet-head small { color:var(--portal-muted); font-size:.68rem; }
    html[data-ui-version^="3.6"] .portal-mobile-sheet > a,
    html[data-ui-version^="3.6"] .portal-mobile-sheet form button { display:flex; width:100%; min-height:42px; align-items:center; gap:10px; padding:0 10px; border:0; border-radius:9px; background:transparent; color:#46536a; font-size:.78rem; text-decoration:none; }
    html[data-ui-version^="3.6"] .portal-mobile-sheet form { margin-top:5px; padding-top:5px; border-top:1px solid var(--portal-border); }
    html[data-ui-version^="3.6"] .portal-mobile-sheet form button.is-danger { color:var(--portal-red); }
    html[data-ui-version^="3.6"] .package-workflow-grid,
    html[data-ui-version^="3.6"] .knowledge-layout,
    html[data-ui-version^="3.6"] .help-layout,
    html[data-ui-version^="3.6"] .app-builder-layout { grid-template-columns:1fr; }
    html[data-ui-version^="3.6"] .help-sidebar,
    html[data-ui-version^="3.6"] .app-builder-sidebar { position:static; }
    html[data-ui-version^="3.6"] .admin-two-column { grid-template-columns:1fr; }
    html[data-ui-version^="3.6"] .admin-app-row { grid-template-columns:44px minmax(0,1fr) auto; }
    html[data-ui-version^="3.6"] .admin-app-version { display:none; }
    html[data-ui-version^="3.6"] .help-hero { grid-template-columns:1fr; }
}

@media (max-width: 720px) {
    html[data-ui-version^="3.6"] .portal-time-pill span { display:none; }
    html[data-ui-version^="3.6"] .portal-time-pill { padding:0 9px; }
    html[data-ui-version^="3.6"] .portal-account-popover { width:min(250px,calc(100vw - 32px)); }
    html[data-ui-version^="3.6"] .page-heading-split,
    html[data-ui-version^="3.6"] .dashboard-heading,
    html[data-ui-version^="3.6"] .card-heading-split,
    html[data-ui-version^="3.6"] .panel-heading { display:grid; grid-template-columns:1fr; }
    html[data-ui-version^="3.6"] .heading-status { min-width:0; }
    html[data-ui-version^="3.6"] .metric-grid,
    html[data-ui-version^="3.6"] .overview-secondary-grid,
    html[data-ui-version^="3.6"] .app-card-grid,
    html[data-ui-version^="3.6"] .package-action-grid,
    html[data-ui-version^="3.6"] .export-option-grid,
    html[data-ui-version^="3.6"] .user-card-grid,
    html[data-ui-version^="3.6"] .admin-detail-grid,
    html[data-ui-version^="3.6"] .scope-summary-grid,
    html[data-ui-version^="3.6"] .responsibility-grid,
    html[data-ui-version^="3.6"] .role-explainer-grid,
    html[data-ui-version^="3.6"] .glossary-grid,
    html[data-ui-version^="3.6"] .help-quick-grid,
    html[data-ui-version^="3.6"] .app-admin-summary-grid { grid-template-columns:1fr; }
    html[data-ui-version^="3.6"] .metric-card { min-height:104px; }
    html[data-ui-version^="3.6"] .package-shortcut-card { grid-template-columns:1fr; min-height:0; padding:22px; }
    html[data-ui-version^="3.6"] .package-illustration { display:none; }
    html[data-ui-version^="3.6"] .release-chart { gap:3px; overflow:hidden; }
    html[data-ui-version^="3.6"] .release-chart-day { min-width:10px; }
    html[data-ui-version^="3.6"] .release-chart-day small { transform:rotate(-45deg); transform-origin:center; overflow:visible; font-size:.5rem; }
    html[data-ui-version^="3.6"] .range-switch { width:100%; }
    html[data-ui-version^="3.6"] .range-switch a { flex:1; min-width:0; }
    html[data-ui-version^="3.6"] .section-tabs,
    html[data-ui-version^="3.6"] .admin-tabs { margin-left:-4px; margin-right:-4px; }
    html[data-ui-version^="3.6"] .section-tabs a,
    html[data-ui-version^="3.6"] .admin-tabs a { flex:0 0 auto; padding:0 12px; }
    html[data-ui-version^="3.6"] .package-action-card { grid-template-columns:47px minmax(0,1fr); min-height:0; padding:19px; }
    html[data-ui-version^="3.6"] .package-action-icon { width:45px; height:45px; }
    html[data-ui-version^="3.6"] .form-grid,
    html[data-ui-version^="3.6"] .form-grid-two,
    html[data-ui-version^="3.6"] .form-columns,
    html[data-ui-version^="3.6"] .member-admin-controls,
    html[data-ui-version^="3.6"] .role-picker { grid-template-columns:1fr; }
    html[data-ui-version^="3.6"] .export-option-card form,
    html[data-ui-version^="3.6"] .message-status-form { grid-template-columns:1fr; }
    html[data-ui-version^="3.6"] .form-span-2 { grid-column:auto; }
    html[data-ui-version^="3.6"] .timeline-copy { display:grid; gap:5px; }
    html[data-ui-version^="3.6"] .history-timeline article { grid-template-columns:31px minmax(0,1fr); }
    html[data-ui-version^="3.6"] .history-timeline article > .button { grid-column:2; width:max-content; }
    html[data-ui-version^="3.6"] .admin-app-row { grid-template-columns:42px minmax(0,1fr); }
    html[data-ui-version^="3.6"] .admin-app-actions { grid-column:1 / -1; justify-content:flex-start; padding-left:54px; }
    html[data-ui-version^="3.6"] .invitation-row { grid-template-columns:1fr; }
    html[data-ui-version^="3.6"] .audit-list article { grid-template-columns:1fr; gap:3px; }
    html[data-ui-version^="3.6"] .member-status-form,
    html[data-ui-version^="3.6"] .member-role-form { grid-template-columns:1fr; }
    html[data-ui-version^="3.6"] .account-session-row { grid-template-columns:12px minmax(0,1fr); }
}

@media (max-width: 440px) {
    html[data-ui-version^="3.6"] .portal-content { padding-left:13px; padding-right:13px; }
    html[data-ui-version^="3.6"] .portal-topbar { padding-left:13px; padding-right:13px; }
    html[data-ui-version^="3.6"] .portal-time-pill time { font-size:.68rem; }
    html[data-ui-version^="3.6"] .surface-card,
    html[data-ui-version^="3.6"] .panel { padding:18px; border-radius:14px; }
    html[data-ui-version^="3.6"] .page-heading h1 { font-size:1.7rem; }
    html[data-ui-version^="3.6"] .button-row { display:grid; grid-template-columns:1fr; }
    html[data-ui-version^="3.6"] .button-row .button { width:100%; }
    html[data-ui-version^="3.6"] .chart-legend { gap:9px; font-size:.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-ui-version^="3.6"] *,
    html[data-ui-version^="3.6"] *::before,
    html[data-ui-version^="3.6"] *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}
html[data-ui-version^="3.6"] .release-chart.chart-days-7 { --chart-columns: 7; }
html[data-ui-version^="3.6"] .release-chart.chart-days-14 { --chart-columns: 14; }
html[data-ui-version^="3.6"] .release-chart.chart-days-21 { --chart-columns: 21; }
html[data-ui-version^="3.6"] .health-card > p { position:relative; z-index:2; max-width:330px; color:#5d6e66; font-size:.77rem; line-height:1.5; }
html[data-ui-version^="3.6"] .health-facts { display:grid; gap:9px; margin:16px 0 0; }
html[data-ui-version^="3.6"] .health-facts > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; max-width:340px; }
html[data-ui-version^="3.6"] .health-facts dt { color:#65736c; font-size:.68rem; }
html[data-ui-version^="3.6"] .health-facts dd { margin:0; color:#294338; font-size:.68rem; font-weight:730; text-align:right; }
html[data-ui-version^="3.6"] .simple-steps { counter-reset:none; }
html[data-ui-version^="3.6"] .simple-steps li::before { display:none; content:none; }
html[data-ui-version^="3.6"] .simple-steps li > span:first-child,
html[data-ui-version^="3.6"] .workflow-number { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:var(--portal-blue-soft); color:var(--portal-blue); font-size:.69rem; font-weight:820; }
html[data-ui-version^="3.6"] .simple-steps strong,
html[data-ui-version^="3.6"] .simple-steps small { display:block; }
html[data-ui-version^="3.6"] .simple-steps small { margin-top:2px; color:var(--portal-muted); font-size:.68rem; }
html[data-ui-version^="3.6"] .upload-card .card-heading { display:grid; grid-template-columns:32px minmax(0,1fr); gap:12px; align-items:start; }
html[data-ui-version^="3.6"] .package-activity-list { display:grid; gap:0; margin:0; padding:0; list-style:none; }
html[data-ui-version^="3.6"] .package-activity-list li { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:10px; align-items:center; min-height:54px; border-top:1px solid #edf0f5; }
html[data-ui-version^="3.6"] .package-activity-list li:first-child { border-top:0; }
html[data-ui-version^="3.6"] .package-activity-list a { min-width:0; text-decoration:none; }
html[data-ui-version^="3.6"] .package-activity-list strong,
html[data-ui-version^="3.6"] .package-activity-list small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-ui-version^="3.6"] .package-activity-list strong { color:#26334c; font-size:.77rem; }
html[data-ui-version^="3.6"] .package-activity-list small { margin-top:2px; color:var(--portal-muted); font-size:.66rem; }
html[data-ui-version^="3.6"] .package-activity-list time { color:#7a8598; font-size:.65rem; white-space:nowrap; }
html[data-ui-version^="3.6"] .versions-card { margin-top:18px; }
html[data-ui-version^="3.6"] .version-list { display:grid; }
html[data-ui-version^="3.6"] .version-list article { display:grid; grid-template-columns:38px minmax(0,1fr) 100px auto; gap:12px; align-items:center; min-height:64px; border-top:1px solid #edf0f5; }
html[data-ui-version^="3.6"] .version-list article:first-child { border-top:0; }
html[data-ui-version^="3.6"] .version-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--portal-blue-soft); color:var(--portal-blue); font-weight:840; }
html[data-ui-version^="3.6"] .version-icon.is-platform { background:#e8eef9; color:#1e3f75; }
html[data-ui-version^="3.6"] .version-list strong,
html[data-ui-version^="3.6"] .version-list small { display:block; }
html[data-ui-version^="3.6"] .version-list strong { font-size:.78rem; }
html[data-ui-version^="3.6"] .version-list small { margin-top:2px; color:var(--portal-muted); font-size:.67rem; }
html[data-ui-version^="3.6"] .version-list b { color:#39465d; font-size:.75rem; font-variant-numeric:tabular-nums; }
@media(max-width:720px){
 html[data-ui-version^="3.6"] .release-chart.chart-days-21 .release-chart-day small{display:none}
 html[data-ui-version^="3.6"] .release-chart.chart-days-21{gap:2px}
 html[data-ui-version^="3.6"] .version-list article{grid-template-columns:36px minmax(0,1fr) auto}
 html[data-ui-version^="3.6"] .version-list article>b{display:none}
}

/* Applo 3.6.1 – Knowledge Center: current knowledge first, history opt-in. */
html[data-ui-version^="3.6"] .knowledge-export-form{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;justify-content:flex-end}
html[data-ui-version^="3.6"] .compact-options,
html[data-ui-version^="3.6"] .export-advanced-options{position:relative;color:var(--portal-muted);font-size:.72rem}
html[data-ui-version^="3.6"] .compact-options>summary,
html[data-ui-version^="3.6"] .export-advanced-options>summary{cursor:pointer;list-style:none;font-weight:720;color:var(--portal-muted);padding:9px 11px;border-radius:9px;border:1px solid var(--portal-border);background:var(--portal-surface)}
html[data-ui-version^="3.6"] .compact-options>summary::-webkit-details-marker,
html[data-ui-version^="3.6"] .export-advanced-options>summary::-webkit-details-marker{display:none}
html[data-ui-version^="3.6"] .compact-options[open]>summary,
html[data-ui-version^="3.6"] .export-advanced-options[open]>summary{color:var(--portal-text);background:var(--portal-surface-soft)}
html[data-ui-version^="3.6"] .compact-options .check-row{position:absolute;right:0;top:calc(100% + 7px);z-index:20;width:min(340px,80vw);padding:12px 13px;border:1px solid var(--portal-border);border-radius:10px;background:var(--portal-surface);box-shadow:0 12px 28px rgba(30,47,76,.12)}
html[data-ui-version^="3.6"] .check-row{display:flex;align-items:flex-start;gap:9px;line-height:1.45;color:var(--portal-text)}
html[data-ui-version^="3.6"] .check-row input{width:16px;height:16px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--portal-blue)}
html[data-ui-version^="3.6"] .knowledge-mode-switch{display:inline-flex;gap:3px;padding:4px;margin:0 0 16px;border:1px solid var(--portal-border);border-radius:11px;background:var(--portal-surface-soft)}
html[data-ui-version^="3.6"] .knowledge-mode-switch a{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:8px;color:var(--portal-muted);font-size:.76rem;font-weight:740;text-decoration:none}
html[data-ui-version^="3.6"] .knowledge-mode-switch a span{display:grid;place-items:center;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.82);font-size:.65rem;font-variant-numeric:tabular-nums}
html[data-ui-version^="3.6"] .knowledge-mode-switch a[aria-current="page"]{background:var(--portal-surface);color:var(--portal-text);box-shadow:0 1px 4px rgba(30,47,76,.07)}
html[data-ui-version^="3.6"] .knowledge-mode-switch a[aria-current="page"] span{background:var(--portal-blue-soft);color:var(--portal-blue)}
html[data-ui-version^="3.6"] .knowledge-history-notice{margin:0 0 16px}
html[data-ui-version^="3.6"] .knowledge-card{grid-template-columns:minmax(0,1fr) auto;gap:18px}
html[data-ui-version^="3.6"] .knowledge-card.is-history{background:#fbfcfe}
html[data-ui-version^="3.6"] .knowledge-card-meta-inline{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
html[data-ui-version^="3.6"] .knowledge-card-meta-inline span{padding:3px 7px;border:1px solid var(--portal-border);border-radius:999px;color:var(--portal-muted);background:var(--portal-surface-soft);font-size:.62rem;font-weight:700}
html[data-ui-version^="3.6"] .knowledge-card-role{display:flex;align-items:flex-start;justify-content:flex-end}
html[data-ui-version^="3.6"] .status-chip.is-muted{background:#f1f3f6;color:#68758a;border-color:#e1e5eb}
@media(max-width:720px){
 html[data-ui-version^="3.6"] .knowledge-export-form{justify-content:flex-start}
 html[data-ui-version^="3.6"] .knowledge-card{grid-template-columns:1fr}
 html[data-ui-version^="3.6"] .knowledge-card-role{justify-content:flex-start}
}


/* ==========================================================================
   Applo 3.6.4 – public welcome and central login
   Serene, light-only landing experience derived from the selected concept.
   ========================================================================== */

.has-welcome-shell {
    margin: 0;
    min-height: 100vh;
    color: #0b1730;
    background: #f4f1eb;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.has-welcome-shell *,
.has-auth-shell * {
    box-sizing: border-box;
}
.has-welcome-shell a,
.has-auth-shell a {
    color: inherit;
}
.applo-welcome-shell {
    min-height: 100vh;
    padding: clamp(14px, 2.1vw, 34px);
}
.welcome-stage {
    --welcome-ink: #07152e;
    --welcome-copy: #334157;
    --welcome-muted: #697383;
    --welcome-blue: #0b60dc;
    --welcome-blue-hover: #084eb7;
    --welcome-line: rgba(24, 42, 66, .13);
    --welcome-warm: #f7f4ee;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr);
    grid-template-rows: auto 1fr auto;
    gap: 24px 46px;
    width: min(1500px, 100%);
    min-height: calc(100vh - clamp(28px, 4.2vw, 68px));
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(48, 56, 61, .09);
    border-radius: 26px;
    background:
        radial-gradient(circle at 13% 14%, rgba(255,255,255,.98), transparent 23%),
        radial-gradient(circle at 70% 28%, rgba(255,255,255,.68), transparent 26%),
        linear-gradient(112deg, #fbfaf7 0 48%, #f4f1eb 48% 100%);
    box-shadow: 0 26px 80px rgba(53, 48, 39, .13);
}
.welcome-stage::before {
    content: "";
    position: absolute;
    z-index: -3;
    left: -10%;
    top: -18%;
    width: 69%;
    height: 84%;
    border-radius: 37% 63% 55% 45% / 53% 38% 62% 47%;
    background: rgba(255,255,255,.82);
    transform: rotate(-8deg);
}
.welcome-stage::after {
    content: "";
    position: absolute;
    z-index: -2;
    left: 13%;
    bottom: -22%;
    width: 43%;
    height: 44%;
    border: 4px solid rgba(124, 121, 111, .17);
    border-color: rgba(124, 121, 111, .17) transparent transparent rgba(124, 121, 111, .17);
    border-radius: 50%;
    transform: rotate(13deg);
}
.welcome-surface {
    position: absolute;
    z-index: -4;
    inset: auto 0 0;
    height: 19%;
    border-top: 1px solid rgba(91, 82, 69, .08);
    background:
        linear-gradient(180deg, rgba(255,255,255,.28), rgba(232,224,211,.56)),
        repeating-linear-gradient(90deg, rgba(144,123,96,.025) 0 1px, transparent 1px 46px);
}
.welcome-brand {
    position: relative;
    z-index: 5;
    display: inline-flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 12px;
    width: max-content;
    margin: clamp(30px, 4.4vw, 66px) 0 0 clamp(30px, 4.7vw, 72px);
    color: var(--welcome-ink) !important;
    text-decoration: none;
    font-size: clamp(25px, 2vw, 31px);
    font-weight: 830;
    letter-spacing: -.045em;
}
.welcome-brand img {
    width: 42px;
    height: auto;
    object-fit: contain;
}
.welcome-copy {
    position: relative;
    z-index: 4;
    align-self: center;
    max-width: 650px;
    padding: 18px 0 clamp(120px, 12vh, 178px) clamp(30px, 6vw, 92px);
}
.welcome-copy h1 {
    max-width: 8ch;
    margin: 0;
    color: var(--welcome-ink);
    font-family: Georgia, "Times New Roman", ui-serif, serif;
    font-size: clamp(68px, 7.3vw, 112px);
    font-weight: 500;
    line-height: .86;
    letter-spacing: -.055em;
}
.welcome-lead {
    max-width: 540px;
    margin: 34px 0 0;
    color: var(--welcome-copy);
    font-size: clamp(17px, 1.45vw, 21px);
    line-height: 1.58;
}
.welcome-growth {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 48px 0 0;
    color: #6f716b;
    font-size: 13px;
    line-height: 1.45;
}
.welcome-growth svg {
    width: 29px;
    height: 29px;
    flex: 0 0 auto;
    fill: none;
    stroke: #9da083;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.welcome-access {
    position: relative;
    z-index: 6;
    align-self: center;
    justify-self: center;
    width: min(100% - 42px, 470px);
    padding: 0 0 clamp(72px, 8vh, 120px);
}
.welcome-login-card {
    width: 100%;
    padding: clamp(32px, 3.3vw, 46px);
    border: 1px solid rgba(37, 52, 71, .12);
    border-radius: 20px;
    background: rgba(255,255,255,.92);
    box-shadow:
        0 26px 70px rgba(62, 57, 49, .11),
        0 2px 8px rgba(62, 57, 49, .04);
    backdrop-filter: blur(18px);
}
.welcome-login-heading {
    margin-bottom: 25px;
}
.welcome-login-heading h1,
.welcome-login-card > h2 {
    margin: 0;
    color: var(--welcome-ink, #07152e);
    font: 760 clamp(26px, 2.4vw, 33px)/1.14 Inter, ui-sans-serif, sans-serif;
    letter-spacing: -.035em;
}
.welcome-login-heading p {
    margin: 9px 0 0;
    color: var(--welcome-muted, #697383);
    font-size: 13px;
    line-height: 1.5;
}
.welcome-login-form {
    display: grid;
    gap: 18px;
}
.welcome-field {
    display: grid;
    gap: 8px;
    color: var(--welcome-ink, #07152e);
    font-size: 13px;
    font-weight: 680;
}
.welcome-input {
    position: relative;
    display: block;
}
.welcome-input > svg {
    position: absolute;
    left: 14px;
    top: 50%;
    z-index: 2;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    fill: none;
    stroke: #87909e;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.welcome-input input {
    width: 100%;
    min-height: 50px;
    padding: 0 46px 0 43px !important;
    border: 1px solid #d7dbe2 !important;
    border-radius: 9px !important;
    outline: 0;
    color: var(--welcome-ink, #07152e) !important;
    background: rgba(255,255,255,.9) !important;
    box-shadow: inset 0 1px 2px rgba(25, 35, 49, .02);
    font: inherit;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.welcome-input input::placeholder {
    color: #a3a9b2;
}
.welcome-input input:focus {
    border-color: #7ba8ec !important;
    box-shadow: 0 0 0 4px rgba(11, 96, 220, .10) !important;
    background: #fff !important;
}
.welcome-password-toggle {
    position: absolute;
    right: 7px;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 8px;
    color: #818996;
    background: transparent;
    cursor: pointer;
}
.welcome-password-toggle:hover,
.welcome-password-toggle:focus-visible {
    color: #39516e;
    background: #f3f5f8;
}
.welcome-password-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.welcome-password-toggle .password-eye-closed {
    display: none;
}
.welcome-password-toggle[aria-pressed="true"] .password-eye-open {
    display: none;
}
.welcome-password-toggle[aria-pressed="true"] .password-eye-closed {
    display: block;
}
.welcome-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: -2px;
}
.welcome-login-options .auth-remember {
    display: inline-flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 8px !important;
    color: #4e5969 !important;
    font-size: 12px !important;
    font-weight: 560 !important;
}
.welcome-login-options .auth-remember input {
    width: 15px !important;
    min-height: 15px !important;
    height: 15px;
    margin: 0;
    padding: 0 !important;
    accent-color: var(--welcome-blue, #0b60dc);
}
.welcome-forgot-link {
    color: var(--welcome-blue, #0b60dc) !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 690;
}
.welcome-forgot-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.welcome-login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin-top: 1px;
    padding: 0 18px;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    background: linear-gradient(180deg, #1169e9, #0755c5) !important;
    box-shadow: 0 10px 24px rgba(11, 96, 220, .18) !important;
    text-decoration: none;
    font: 700 14px/1 Inter, ui-sans-serif, sans-serif;
    cursor: pointer;
}
.welcome-login-submit:hover {
    background: #084eb7 !important;
}
.welcome-login-submit:focus-visible,
.welcome-invite-action:focus-visible,
.welcome-session-secondary:focus-visible,
.welcome-brand:focus-visible {
    outline: 3px solid rgba(11, 96, 220, .28);
    outline-offset: 3px;
}
.welcome-divider {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 25px 0 19px;
    color: #7e8793;
    font-size: 11px;
}
.welcome-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: #e2e4e8;
}
.welcome-divider span {
    position: relative;
    z-index: 1;
    padding: 0 13px;
    background: rgba(255,255,255,.96);
}
.welcome-invite-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 45px;
    padding: 0 16px;
    border: 1px solid #d8dce2;
    border-radius: 8px;
    color: #14243c !important;
    background: rgba(255,255,255,.76);
    text-decoration: none;
    font-size: 13px;
    font-weight: 640;
}
.welcome-invite-action:hover {
    border-color: #bfc7d1;
    background: #f8f9fa;
}
.welcome-invite-action svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #17335b;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.welcome-session-card {
    color: var(--welcome-copy);
}
.welcome-card-kicker {
    margin: 0 0 9px;
    color: #7d8778;
    font-size: 12px;
    font-weight: 760;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.welcome-session-card > p:not(.welcome-card-kicker) {
    margin: 16px 0 0;
    color: var(--welcome-copy);
    font-size: 14px;
    line-height: 1.6;
}
.welcome-session-actions {
    display: grid;
    gap: 10px;
    margin-top: 26px;
}
.welcome-session-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid #d8dce2;
    border-radius: 8px;
    color: #18304f !important;
    background: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 680;
}
.welcome-botanical {
    position: absolute;
    z-index: 1;
    overflow: visible;
    fill: rgba(123, 143, 91, .23);
    stroke: rgba(108, 126, 76, .40);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.welcome-botanical-right {
    right: -8px;
    top: 6%;
    width: min(20vw, 270px);
    height: min(69vh, 640px);
    opacity: .78;
}
.welcome-botanical-line {
    left: 43%;
    bottom: 8%;
    width: min(13vw, 190px);
    opacity: .33;
}
.welcome-desk {
    position: absolute;
    z-index: 1;
    inset: auto 0 0;
    height: 17%;
    pointer-events: none;
}
.welcome-book {
    position: absolute;
    left: 4%;
    bottom: 11%;
    width: 27%;
    height: 22%;
    border: 1px solid rgba(134, 120, 98, .16);
    border-radius: 4px 12px 7px 5px;
    background: linear-gradient(180deg, rgba(250,248,243,.95), rgba(223,216,204,.88));
    box-shadow: 0 9px 24px rgba(91, 77, 58, .09);
}
.welcome-book::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 4%;
    top: 30%;
    height: 1px;
    background: rgba(120, 104, 83, .13);
    box-shadow: 0 5px rgba(120, 104, 83, .08), 0 10px rgba(120, 104, 83, .06);
}
.welcome-book-one {
    transform: rotate(-2deg);
}
.welcome-book-two {
    left: 1.5%;
    bottom: -1%;
    width: 31%;
    height: 21%;
    transform: rotate(.8deg);
}
.welcome-bowl {
    position: absolute;
    right: 12%;
    bottom: 2%;
    width: 17%;
    height: 32%;
    border-radius: 5% 5% 48% 48% / 8% 8% 90% 90%;
    background: linear-gradient(165deg, rgba(238,230,215,.92), rgba(201,190,171,.88));
    box-shadow: inset 0 8px 14px rgba(255,255,255,.5), 0 12px 24px rgba(91, 77, 58, .08);
    transform: scaleY(.55);
    transform-origin: bottom;
}
.welcome-vase {
    position: absolute;
    right: -1%;
    bottom: 0;
    width: 9%;
    height: 72%;
    border-radius: 45% 45% 24% 24% / 8% 8% 10% 10%;
    background:
        repeating-linear-gradient(90deg, transparent 0 7px, rgba(134,119,98,.08) 7px 8px),
        linear-gradient(165deg, rgba(242,238,229,.96), rgba(205,196,181,.94));
    box-shadow: inset 8px 0 20px rgba(255,255,255,.38), 0 12px 30px rgba(91, 77, 58, .08);
}
.welcome-footer {
    position: relative;
    z-index: 5;
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 clamp(30px, 4.7vw, 72px) 24px;
    color: rgba(54, 65, 75, .58);
    font-size: 11px;
}
.welcome-footer nav {
    display: flex;
    gap: 16px;
}
.welcome-footer a {
    text-decoration: none;
}
.welcome-footer a:hover {
    color: var(--welcome-blue);
}

/* Central auth pages use the same quiet product language as the landing page. */
.has-auth-shell {
    padding: clamp(14px, 2.1vw, 34px);
    background: #f4f1eb;
}
.has-auth-shell .applo-auth-shell {
    width: min(1500px, 100%);
    min-height: calc(100vh - clamp(28px, 4.2vw, 68px));
    grid-template-columns: minmax(420px, 1.12fr) minmax(440px, .88fr);
    border: 1px solid rgba(48, 56, 61, .09);
    border-radius: 26px;
    background: #f8f6f1;
    box-shadow: 0 26px 80px rgba(53, 48, 39, .13);
}
.has-auth-shell .welcome-auth-brand-panel {
    position: relative;
    overflow: hidden;
    min-height: auto;
    padding: clamp(36px, 4.7vw, 70px);
    border-right: 1px solid rgba(58, 62, 64, .08);
    color: #07152e;
    background:
        radial-gradient(circle at 15% 12%, rgba(255,255,255,.98), transparent 24%),
        linear-gradient(135deg, #fbfaf7 0%, #f5f1e9 100%);
}
.has-auth-shell .welcome-auth-brand-panel::after {
    content: "";
    position: absolute;
    left: -16%;
    bottom: -30%;
    width: 70%;
    height: 49%;
    border: 4px solid rgba(124, 121, 111, .15);
    border-color: rgba(124, 121, 111, .15) transparent transparent rgba(124, 121, 111, .15);
    border-radius: 50%;
}
.has-auth-shell .auth-brand {
    position: relative;
    z-index: 2;
    color: #07152e !important;
    font-size: 28px;
}
.has-auth-shell .auth-brand-copy {
    position: relative;
    z-index: 2;
    max-width: 610px;
    margin: auto 0;
    padding: 74px 0 120px;
}
.has-auth-shell .auth-brand-copy h1 {
    max-width: 8ch;
    color: #07152e;
    font-family: Georgia, "Times New Roman", ui-serif, serif;
    font-size: clamp(64px, 6.3vw, 96px);
    font-weight: 500;
    line-height: .88;
    letter-spacing: -.055em;
}
.has-auth-shell .auth-brand-copy > p {
    max-width: 520px;
    margin-top: 30px;
    color: #38455a;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.62;
}
.has-auth-shell .auth-growth-line {
    margin-top: 42px !important;
    color: #787b70 !important;
    font-size: 13px !important;
}
.auth-botanical {
    position: absolute;
    right: -3%;
    bottom: 0;
    width: min(25vw, 310px);
    height: 70%;
    fill: rgba(123, 143, 91, .20);
    stroke: rgba(108, 126, 76, .36);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .75;
    pointer-events: none;
}
.has-auth-shell .auth-form-panel {
    min-height: auto;
    background:
        radial-gradient(circle at 65% 25%, rgba(255,255,255,.98), transparent 31%),
        #f6f3ed;
}
.has-auth-shell .auth-form-panel > main {
    padding: 52px clamp(34px, 5vw, 72px) 22px;
}
.has-auth-shell .auth-form-panel .form-main {
    width: min(100%, 470px);
}
.has-auth-shell .auth-card {
    padding: clamp(31px, 3.1vw, 44px);
    border: 1px solid rgba(37, 52, 71, .12);
    border-radius: 20px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 26px 70px rgba(62, 57, 49, .11);
}
.has-auth-shell .auth-card-brand,
.has-auth-shell .auth-security-note {
    display: none;
}
.has-auth-shell .auth-card h1 {
    font-size: clamp(26px, 2.4vw, 33px);
}
.has-auth-shell .auth-footer {
    width: min(100% - 68px, 600px);
    color: #777d86;
}
.has-auth-shell .auth-footer a:hover {
    color: #0b60dc;
}

@media (max-width: 1080px) {
    .welcome-stage {
        grid-template-columns: minmax(0, 1fr) minmax(350px, .82fr);
        gap: 20px 24px;
    }
    .welcome-copy {
        padding-left: clamp(30px, 5vw, 62px);
    }
    .welcome-copy h1 {
        font-size: clamp(62px, 8vw, 86px);
    }
    .welcome-desk {
        opacity: .75;
    }
    .has-auth-shell .applo-auth-shell {
        grid-template-columns: minmax(360px, .95fr) minmax(410px, 1.05fr);
    }
}

@media (max-width: 820px) {
    .applo-welcome-shell {
        padding: 0;
    }
    .welcome-stage {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background:
            radial-gradient(circle at 18% 3%, rgba(255,255,255,.96), transparent 24%),
            linear-gradient(165deg, #fbfaf7 0%, #f3efe8 100%);
    }
    .welcome-stage::before {
        left: -34%;
        top: -12%;
        width: 120%;
        height: 54%;
    }
    .welcome-stage::after {
        left: -28%;
        bottom: -17%;
        width: 95%;
        height: 27%;
    }
    .welcome-brand {
        order: 1;
        align-self: center;
        margin: 20px auto 0;
        font-size: 25px;
    }
    .welcome-brand img {
        width: 36px;
    }
    /* Mobile is task-first: authentication comes before marketing copy. */
    .welcome-access {
        order: 2;
        width: min(100% - 32px, 520px);
        margin: 20px auto 0;
        padding: 0;
    }
    .welcome-login-card {
        padding: 28px 24px;
        border-radius: 17px;
        box-shadow: 0 18px 50px rgba(62, 57, 49, .10), 0 2px 7px rgba(62, 57, 49, .04);
    }
    /* 3.6.4: keep the message visually connected to the login card on mobile. */
    .welcome-copy {
        order: 3;
        align-self: center;
        max-width: 620px;
        margin: 0 auto;
        padding: 34px 24px 120px;
        text-align: center;
    }
    .welcome-copy h1 {
        max-width: 9ch;
        margin-inline: auto;
        font-size: clamp(57px, 15vw, 80px);
        line-height: .9;
    }
    .welcome-lead {
        max-width: 500px;
        margin: 20px auto 0;
        font-size: 16px;
    }
    .welcome-growth {
        justify-content: center;
        margin-top: 24px;
    }
    .welcome-botanical-right {
        top: 8%;
        right: -50px;
        width: 174px;
        opacity: .34;
    }
    .welcome-botanical-line {
        display: block;
        left: -28px;
        bottom: 16%;
        width: 126px;
        opacity: .19;
    }
    .welcome-desk {
        height: 105px;
        opacity: .48;
    }
    .welcome-book {
        width: 42%;
    }
    .welcome-book-two {
        width: 48%;
    }
    .welcome-bowl {
        right: 13%;
        width: 24%;
    }
    .welcome-vase {
        width: 14%;
    }
    .welcome-footer {
        order: 4;
        padding: 0 24px 20px;
    }

    .has-auth-shell {
        padding: 0;
    }
    .has-auth-shell .applo-auth-shell {
        display: flex;
        width: 100%;
        min-height: 100vh;
        flex-direction: column;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #f6f3ed;
    }
    .has-auth-shell .auth-form-panel {
        order: 1;
        min-height: auto;
    }
    .has-auth-shell .auth-mobile-header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px 20px 0;
    }
    .has-auth-shell .auth-form-panel > main {
        padding: 30px 16px 24px;
    }
    .has-auth-shell .auth-form-panel .form-main {
        margin: 0 auto;
    }
    .has-auth-shell .auth-footer {
        width: calc(100% - 32px);
        padding-bottom: 28px;
    }
    .has-auth-shell .welcome-auth-brand-panel {
        order: 2;
        display: block;
        min-height: 300px;
        padding: 44px 24px 84px;
        border: 0;
        text-align: center;
    }
    .has-auth-shell .welcome-auth-brand-panel > .auth-brand {
        display: none;
    }
    .has-auth-shell .auth-brand-copy {
        max-width: 500px;
        margin: 0 auto;
        padding: 0;
    }
    .has-auth-shell .auth-brand-copy h1 {
        max-width: 9ch;
        margin-inline: auto;
        font-size: clamp(49px, 13vw, 68px);
    }
    .has-auth-shell .auth-brand-copy > p {
        max-width: 500px;
        margin: 21px auto 0;
        font-size: 15px;
    }
    .has-auth-shell .auth-growth-line {
        display: none;
    }
    .auth-botanical {
        right: -38px;
        width: 170px;
        height: 84%;
        opacity: .28;
    }
}

@media (max-width: 480px) {
    .welcome-brand {
        margin-top: 16px;
    }
    .welcome-access {
        width: min(100% - 24px, 520px);
        margin-top: 16px;
    }
    .welcome-login-card {
        padding: 22px 20px;
    }
    .welcome-login-heading {
        margin-bottom: 18px;
    }
    .welcome-login-heading h1,
    .welcome-login-card > h2 {
        font-size: 26px;
    }
    .welcome-login-form {
        gap: 13px;
    }
    .welcome-input input {
        min-height: 48px;
    }
    .welcome-divider {
        margin: 16px 0 14px;
    }
    .welcome-copy {
        padding: 24px 18px 112px;
    }
    .welcome-copy h1 {
        font-size: clamp(50px, 15vw, 66px);
    }
    .welcome-lead {
        margin-top: 18px;
    }
    .welcome-growth {
        align-items: center;
        justify-content: center;
        margin-top: 22px;
        font-size: 12px;
    }
    .welcome-login-options {
        align-items: center;
    }
    .welcome-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
    .welcome-footer nav {
        gap: 14px;
    }
    .has-auth-shell .auth-mobile-header {
        padding-top: 20px;
    }
    .has-auth-shell .auth-form-panel > main {
        padding: 24px 12px 20px;
    }
    .has-auth-shell .auth-card {
        padding: 24px 20px;
    }
    .has-auth-shell .welcome-auth-brand-panel {
        min-height: 280px;
        padding: 40px 20px 82px;
    }
    .has-auth-shell .auth-brand-copy > p {
        max-width: 92%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .welcome-input input,
    .welcome-login-submit,
    .welcome-password-toggle,
    .welcome-invite-action {
        transition: none !important;
    }
}