:root {
    --app-navy: #071a31;
    --app-navy-soft: #102f54;
    --app-blue: #2463d4;
    --app-cyan: #22a7bd;
    --app-gold: #d4af37;
    --app-surface: #ffffff;
    --app-cloud: #f3f6fa;
    --app-ink: #122033;
    --app-muted: #65748a;
    --app-line: #dce4ee;
}

.app-icon { width: 24px; height: 24px; display: block; }
.app-icon-sm { width: 18px; height: 18px; display: block; }
.app-icon-lg { width: 34px; height: 34px; display: block; }

.launcher-body {
    min-height: 100vh;
    color: var(--app-ink);
    background:
        radial-gradient(circle at 12% 8%, rgba(34, 167, 189, .15), transparent 30rem),
        radial-gradient(circle at 90% 18%, rgba(36, 99, 212, .18), transparent 32rem),
        linear-gradient(145deg, #f8fbff 0%, #edf3fa 55%, #f8fafc 100%);
}

.launcher-shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 28px 0 48px; }
.launcher-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.launcher-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--app-navy); }
.launcher-brand-mark { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg, var(--app-navy), var(--app-blue)); box-shadow: 0 14px 30px rgba(7, 26, 49, .22); }
.launcher-brand-mark .app-icon { width: 28px; height: 28px; }
.launcher-brand strong { display: block; font-size: 15px; font-weight: 900; letter-spacing: .02em; }
.launcher-brand span { display: block; color: var(--app-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.launcher-security { display: flex; align-items: center; gap: 8px; color: #46617f; font-size: 12px; font-weight: 700; }
.launcher-security .app-icon { width: 17px; height: 17px; }

.launcher-hero { max-width: 820px; margin: 78px auto 34px; text-align: center; }
.launcher-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid rgba(36, 99, 212, .18); border-radius: 999px; color: #244c7a; background: rgba(255, 255, 255, .7); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.launcher-eyebrow .app-icon { width: 16px; height: 16px; }
.launcher-hero h1 { margin: 18px 0 12px; color: var(--app-navy); font-size: clamp(38px, 6vw, 68px); line-height: .98; letter-spacing: -.055em; }
.launcher-hero h1 span { display: block; color: var(--app-blue); }
.launcher-hero p { max-width: 650px; margin: 0 auto; color: var(--app-muted); font-size: clamp(15px, 2vw, 18px); line-height: 1.65; }

.launcher-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1040px; margin: 0 auto; }
.launcher-app {
    position: relative;
    min-height: 300px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(205, 218, 232, .95);
    border-radius: 28px;
    color: var(--app-ink);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 18px 45px rgba(23, 45, 74, .08);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.launcher-app::after { content: ''; position: absolute; right: -55px; bottom: -70px; width: 175px; height: 175px; border-radius: 50%; background: var(--app-tint, #e9f0ff); opacity: .8; transition: transform .28s ease; }
.launcher-app:hover { transform: translateY(-7px); border-color: var(--app-accent, var(--app-blue)); box-shadow: 0 26px 60px rgba(23, 45, 74, .14); }
.launcher-app:hover::after { transform: scale(1.15); }
.launcher-app.admin { --app-accent: #2463d4; --app-tint: #dce8ff; }
.launcher-app.osle { --app-accent: #1593a8; --app-tint: #d8f4f7; }
.launcher-app.client { --app-accent: #916f17; --app-tint: #f7edca; }
.launcher-app-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; }
.launcher-app-icon { display: grid; width: 66px; height: 66px; place-items: center; border-radius: 20px; color: #fff; background: var(--app-accent); box-shadow: 0 14px 28px color-mix(in srgb, var(--app-accent) 28%, transparent); }
.launcher-app-icon .app-icon { width: 34px; height: 34px; }
.launcher-app-number { color: #9aabba; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.launcher-app-content { position: relative; z-index: 1; margin-top: 28px; }
.launcher-app h2 { margin: 0 0 8px; color: var(--app-navy); font-size: 22px; line-height: 1.08; }
.launcher-app p { min-height: 66px; margin: 0; color: var(--app-muted); font-size: 13px; line-height: 1.55; }
.launcher-app-action { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--app-accent); font-size: 13px; font-weight: 900; }
.launcher-app-action .app-icon { width: 17px; height: 17px; transition: transform .2s; }
.launcher-app:hover .launcher-app-action .app-icon { transform: translateX(4px); }

.launcher-info { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 18px; max-width: 1040px; margin: 28px auto 0; padding-top: 24px; border-top: 1px solid rgba(148, 163, 184, .25); }
.launcher-info-block { display: flex; gap: 10px; align-items: flex-start; color: var(--app-muted); font-size: 12px; line-height: 1.55; }
.launcher-info-block .app-icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--app-blue); }
.launcher-info-block strong { display: block; color: var(--app-navy); font-size: 12px; }

.launcher-wos-footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    max-width: 1040px;
    margin: 28px auto 0;
    padding: 20px 22px;
    overflow: hidden;
    border: 1px solid rgba(120, 157, 197, .25);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 78% -80%, rgba(63, 140, 255, .42), transparent 48%),
        linear-gradient(120deg, #06172c 0%, #0d2e52 62%, #123f70 100%);
    box-shadow: 0 18px 42px rgba(7, 26, 49, .14);
}
.launcher-wos-footer::before { content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,.08),transparent 38%); }
.launcher-wos-identity { position:relative;z-index:1;display:flex;min-width:0;align-items:center;gap:14px; }
.launcher-wos-mark { display:grid;flex:0 0 auto;width:48px;height:48px;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:15px;color:#fff;background:linear-gradient(145deg,rgba(36,99,212,.95),rgba(34,167,189,.8));box-shadow:0 10px 26px rgba(0,0,0,.22); }
.launcher-wos-mark .app-icon { width:26px;height:26px; }
.launcher-wos-copy { min-width:0; }
.launcher-wos-kicker { display:block;color:#8ed9e7;font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase; }
.launcher-wos-copy > strong { display:flex;align-items:center;gap:7px;margin-top:3px;color:#fff;font-size:17px;line-height:1.1;letter-spacing:-.01em; }
.launcher-wos-copy > strong em { padding:3px 7px;border:1px solid rgba(255,255,255,.17);border-radius:999px;color:#d9efff;background:rgba(255,255,255,.08);font-size:9px;font-style:normal;letter-spacing:.1em; }
.launcher-wos-copy small { display:block;margin-top:4px;color:#aebfd1;font-size:10px;font-weight:600;letter-spacing:.02em; }
.launcher-wos-button { position:relative;z-index:1;display:grid;min-width:268px;min-height:58px;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:9px 12px;border:1px solid rgba(255,255,255,.2);border-radius:16px;color:#0b315a;background:linear-gradient(145deg,#fff,#edf6ff);box-shadow:0 10px 26px rgba(0,0,0,.2);font:inherit;text-align:left;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.launcher-wos-button:hover { transform:translateY(-2px);border-color:#85cfe0;box-shadow:0 15px 32px rgba(0,0,0,.26); }
.launcher-wos-button:focus-visible { outline:3px solid rgba(142,217,231,.65);outline-offset:3px; }
.launcher-wos-button-icon { display:grid;width:38px;height:38px;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(145deg,var(--app-blue),var(--app-cyan)); }
.launcher-wos-button-icon .app-icon { width:18px;height:18px; }
.launcher-wos-button-copy strong,.launcher-wos-button-copy small { display:block; }
.launcher-wos-button-copy strong { color:#0a315a;font-size:11px;font-weight:900;letter-spacing:.055em;text-transform:uppercase; }
.launcher-wos-button-copy small { margin-top:2px;color:#60758d;font-size:9px;font-weight:700; }
.launcher-wos-button-arrow .app-icon { width:16px;height:16px;color:#2463d4;transition:transform .2s ease; }
.launcher-wos-button:hover .launcher-wos-button-arrow { transform:translateX(3px); }
.launcher-apps.client-session { grid-template-columns:repeat(2,minmax(0,1fr)); }

.flow-strip { display: flex; gap: 8px; align-items: center; margin: 0 0 18px; color: var(--app-muted); font-size: 11px; font-weight: 800; }
.flow-strip .flow-step { display: inline-flex; align-items: center; gap: 6px; }
.flow-strip .flow-step.active { color: var(--app-blue); }
.flow-strip .app-icon { width: 14px; height: 14px; }

.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.app-tile { position: relative; display: flex; min-height: 142px; flex-direction: column; align-items: flex-start; padding: 18px; border: 1px solid var(--app-line); border-radius: 20px; color: var(--app-ink); background: #fff; box-shadow: 0 8px 24px rgba(15, 35, 60, .05); transition: .24s ease; }
.app-tile:hover { transform: translateY(-4px); border-color: #abc3e3; box-shadow: 0 16px 34px rgba(15, 35, 60, .1); }
.app-tile-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; color: var(--tile-color, var(--app-blue)); background: var(--tile-bg, #eaf2ff); }
.app-tile-icon .app-icon { width: 23px; height: 23px; }
.app-tile strong { margin-top: 14px; color: var(--app-navy); font-size: 14px; }
.app-tile small { margin-top: 3px; color: var(--app-muted); font-size: 11px; line-height: 1.35; }
.app-tile-arrow { position: absolute; right: 15px; top: 15px; color: #9aaabd; }
.app-tile-arrow .app-icon { width: 17px; height: 17px; }

@media (max-width: 820px) {
    .launcher-hero { margin-top: 52px; }
    .launcher-apps { grid-template-columns: 1fr; max-width: 620px; }
    .launcher-app { min-height: 230px; }
    .launcher-app p { min-height: auto; }
    .launcher-info { grid-template-columns: 1fr; max-width: 620px; }
}

@media (max-width: 520px) {
    .launcher-shell { width: min(100% - 22px, 1180px); padding-top: 15px; }
    .launcher-security { display: none; }
    .launcher-brand-mark { width: 42px; height: 42px; }
    .launcher-hero { margin: 42px auto 25px; text-align: left; }
    .launcher-hero p { font-size: 14px; }
    .launcher-app { min-height: 218px; padding: 20px; border-radius: 22px; }
    .launcher-app-icon { width: 58px; height: 58px; border-radius: 18px; }
    .launcher-app-content { margin-top: 22px; }
    .launcher-info { margin-top: 22px; }
    .launcher-wos-footer { align-items:stretch;flex-direction:column;gap:16px;padding:18px;border-radius:20px; }
    .launcher-wos-button { width:100%;min-width:0; }
    .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .app-tile { min-height: 132px; padding: 14px; border-radius: 17px; }
    .app-tile small { display: none; }
}