:root {
    --pwa-bg: #f3f0fa;
    --pwa-surface: #ffffff;
    --pwa-ink: #1e1b4b;
    --pwa-muted: #6b7280;
    --pwa-line: #e8e2f4;
    --pwa-accent: #6d28d9;
    --pwa-accent-2: #4c1d95;
    --pwa-ok: #059669;
    --pwa-warn: #d97706;
    --pwa-bad: #e11d48;
    --pwa-nav: 72px;
    --pwa-safe-t: env(safe-area-inset-top, 0px);
    --pwa-safe-b: env(safe-area-inset-bottom, 0px);
    --pwa-font: "Sofia Sans", system-ui, sans-serif;
    --pwa-display: "Unbounded", var(--pwa-font);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body.pwa-body {
    margin: 0;
    background: var(--pwa-bg);
    color: var(--pwa-ink);
    font-family: var(--pwa-font);
    font-size: 16px;
    line-height: 1.45;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}
body.pwa-drawer-on { overflow: hidden; }
.pwa-splash {
    position: fixed; inset: 0; z-index: 50;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: radial-gradient(120% 80% at 50% 0%, #4c1d95, #12081f);
    color: #fff;
}
.pwa-splash img { width: 88px; height: 88px; border-radius: 22px; }
.pwa-splash .pwa-splash-logo {
    width: auto; height: 44px; max-width: 200px;
    border-radius: 0;
}
.pwa-splash strong { font-family: var(--pwa-display); font-size: 22px; letter-spacing: .04em; }
.pwa-splash.is-out { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.pwa-root { min-height: 100%; }
.pwa-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
.pwa-head {
    position: sticky; top: 0; z-index: 8;
    padding: calc(14px + var(--pwa-safe-t)) 20px 16px;
    background: rgba(243, 240, 250, .94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.pwa-mark {
    display: block;
    height: 22px;
    width: auto;
    max-width: 120px;
    margin: 0 0 10px;
}
.pwa-head-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.pwa-head-copy { flex: 1; min-width: 0; }
.pwa-bell {
    position: relative;
    appearance: none; border: 0; cursor: pointer;
    width: 44px; height: 44px; border-radius: 14px;
    background: #fff; color: var(--pwa-accent-2);
    display: grid; place-items: center; flex: 0 0 auto;
    box-shadow: 0 8px 18px rgba(76, 29, 149, .08);
}
.pwa-bell svg { width: 22px; height: 22px; }
.pwa-bell i {
    position: absolute; top: -5px; right: -5px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: #e11d48; color: #fff;
    font-size: 11px; font-weight: 800; font-style: normal; line-height: 18px;
    text-align: center; box-shadow: 0 0 0 2px #f3f0fa;
}
.pwa-push-card {
    margin: 0 0 18px;
    padding: 16px 16px 14px;
    border-radius: 22px;
    background: linear-gradient(160deg, #4c1d95, #7c3aed 55%, #db2777);
    color: #fff;
    box-shadow: 0 16px 32px rgba(76, 29, 149, .22);
}
.pwa-push-card strong { display: block; font-family: var(--pwa-display); font-size: 18px; }
.pwa-push-card p { margin: 8px 0 12px; font-size: 14px; line-height: 1.4; opacity: .92; }
.pwa-push-card .pwa-btn { background: #fff; color: #4c1d95; }
.pwa-push-card.is-off { background: #fff; color: var(--pwa-ink); border: 1px solid var(--pwa-line); box-shadow: none; }
.pwa-push-card.is-off p { color: var(--pwa-muted); opacity: 1; }
.pwa-inbox-item.is-new { border-color: #e9d5ff; background: #faf5ff; }
.pwa-login .pwa-btn-ghost { margin-top: 12px; }
.pwa-head h1 {
    margin: 0;
    font-family: var(--pwa-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
}
.pwa-head .sub { margin: 6px 0 0; color: var(--pwa-muted); font-size: 14px; line-height: 1.35; }
.pwa-main {
    flex: 1;
    padding: 8px 20px calc(var(--pwa-nav) + var(--pwa-safe-b) + 28px);
}
.pwa-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 8px 8px calc(10px + var(--pwa-safe-b));
    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--pwa-line);
    backdrop-filter: blur(18px);
}
.pwa-nav button {
    appearance: none; border: 0; background: transparent;
    color: #94a3b8; font: inherit; font-size: 10px; font-weight: 700;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 8px 0; cursor: pointer;
}
.pwa-nav button svg { width: 22px; height: 22px; }
.pwa-plan h2 { margin: 0 0 6px; font-size: 20px; }
.pwa-plan .pwa-btn, .pwa-plan .pwa-btn-ghost { margin-top: 10px; }
.pwa-plan.is-current { outline: 2px solid var(--pwa-accent); outline-offset: 0; }
.pwa-plan-feat { margin: 10px 0 4px; padding-left: 18px; color: var(--pwa-muted); font-size: 14px; display: grid; gap: 4px; }
.pwa-nav button.is-on { color: var(--pwa-accent-2); }
.pwa-card {
    background: var(--pwa-surface);
    border: 1px solid var(--pwa-line);
    border-radius: 22px;
    padding: 18px 18px 16px;
    box-shadow: 0 10px 28px rgba(76, 29, 149, .05);
}
.pwa-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.pwa-kpi {
    min-height: 102px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 16px 14px;
}
.pwa-kpi span { color: var(--pwa-muted); font-size: 13px; font-weight: 700; }
.pwa-kpi b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.04em; margin-top: 10px; }
.pwa-btn, .pwa-btn-ghost, .pwa-btn-danger {
    appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 800;
    border-radius: 999px; padding: 13px 18px; display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.pwa-btn { background: var(--pwa-ink); color: #fff; width: 100%; }
.pwa-btn-ghost { background: #f3eefc; color: var(--pwa-accent-2); width: 100%; }
.pwa-btn-danger { background: #fff1f2; color: var(--pwa-bad); width: 100%; }
.pwa-check { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; margin: 0 0 16px; }
.pwa-check input { width: auto; margin: 0; }
.pwa-list { display: flex; flex-direction: column; gap: 12px; }
.pwa-section-title {
    margin: 8px 0 14px;
    font-size: 15px;
    font-weight: 800;
}
.pwa-row {
    display: flex; gap: 12px; align-items: flex-start; text-align: left;
    width: 100%; background: var(--pwa-surface); border: 1px solid var(--pwa-line);
    border-radius: 20px; padding: 16px; cursor: pointer; font: inherit; color: inherit;
    box-shadow: 0 8px 20px rgba(76, 29, 149, .04);
}
.pwa-row > div { flex: 1; min-width: 0; }
.pwa-row strong { display: block; font-size: 16px; line-height: 1.3; }
.pwa-row small { display: block; color: var(--pwa-muted); margin-top: 6px; font-size: 13px; line-height: 1.4; }
.pwa-chevron { margin-left: auto; color: #c4b5fd; font-size: 22px; line-height: 1; font-weight: 400; }
.pwa-badge {
    margin-left: auto; flex: 0 0 auto; font-size: 11px; font-weight: 800;
    padding: 5px 10px; border-radius: 999px; background: #f3eefc; color: var(--pwa-accent-2);
    align-self: center;
}
.pwa-badge.is-new { background: #fef3c7; color: #92400e; }
.pwa-badge.is-open { background: #e0e7ff; color: #3730a3; }
.pwa-badge.is-won { background: #d1fae5; color: #065f46; }
.pwa-badge.is-lost { background: #ffe4e6; color: #9f1239; }
.pwa-field { display: grid; gap: 8px; margin: 0 0 16px; font-weight: 700; font-size: 13px; color: var(--pwa-muted); }
.pwa-field input, .pwa-field select, .pwa-field textarea,
.pwa-search, .pwa-drawer-panel select, .pwa-drawer-panel input[type="date"] {
    width: 100%; border: 1px solid var(--pwa-line); border-radius: 16px;
    padding: 13px 14px; font: inherit; background: #fff; color: var(--pwa-ink); font-weight: 600;
}
.pwa-toolbar { display: flex; gap: 10px; align-items: center; margin: 0 0 18px; }
.pwa-search { flex: 1; min-width: 0; }
.pwa-filter-btn {
    position: relative;
    flex: 0 0 auto;
    appearance: none; border: 1px solid var(--pwa-line); background: #fff;
    color: var(--pwa-ink); font: inherit; font-weight: 800; font-size: 14px;
    border-radius: 999px; padding: 12px 16px; cursor: pointer;
}
.pwa-filter-btn i {
    position: absolute; top: -6px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--pwa-accent); color: #fff;
    font-style: normal; font-size: 11px; font-weight: 800;
    display: grid; place-items: center;
}
.pwa-seg {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    background: #ece7f8; border-radius: 16px; padding: 4px; margin: 0 0 18px;
}
.pwa-seg button {
    appearance: none; border: 0; background: transparent; color: var(--pwa-muted);
    font: inherit; font-weight: 800; font-size: 14px; border-radius: 12px;
    padding: 10px 8px; cursor: pointer;
}
.pwa-seg button.is-on { background: #fff; color: var(--pwa-ink); box-shadow: 0 4px 12px rgba(76, 29, 149, .08); }
.pwa-period { display: flex; gap: 8px; margin: 0 0 18px; }
.pwa-period button {
    flex: 1; appearance: none; border: 1px solid var(--pwa-line); background: #fff;
    color: var(--pwa-ink); font: inherit; font-weight: 700; font-size: 13px;
    border-radius: 999px; padding: 10px 8px; cursor: pointer;
}
.pwa-period button.is-on { background: var(--pwa-ink); color: #fff; border-color: var(--pwa-ink); }
.pwa-login {
    min-height: 100dvh; padding: calc(28px + var(--pwa-safe-t)) 20px calc(28px + var(--pwa-safe-b));
    display: flex; flex-direction: column; justify-content: center;
    background: radial-gradient(90% 50% at 50% 0%, #ede9fe, transparent 70%);
}
.pwa-login .brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; }
.pwa-login .brand img,
.pwa-login-logo {
    width: auto; height: 40px; max-width: 180px; border-radius: 0;
}
.pwa-login h1 { margin: 0; font-family: var(--pwa-display); font-size: 24px; text-align: center; }
.pwa-login .lede { text-align: center; color: var(--pwa-muted); margin: 4px 0 0; }
.pwa-login-card {
    background: #fff;
    border: 1px solid var(--pwa-line);
    border-radius: 22px;
    padding: 20px 18px 18px;
    box-shadow: 0 18px 40px rgba(76, 29, 149, .08);
}
.pwa-google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; border: 1px solid #dadce0; background: #fff;
    border-radius: 12px; padding: 12px 16px;
    font: inherit; font-weight: 650; font-size: 15px; color: #1f1f1f;
    text-decoration: none; margin-bottom: 0;
}
.pwa-google:hover { background: #f8f9fa; border-color: #c5c9d0; color: #1f1f1f; }
.pwa-google svg { width: 18px; height: 18px; flex: 0 0 auto; }
.pwa-or {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
    text-align: center; color: var(--pwa-muted); font-size: 12px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .04em;
    margin: 16px 0 14px;
}
.pwa-or::before, .pwa-or::after { content: ''; height: 1px; background: var(--pwa-line); }
.pwa-alert { background: #fff1f2; color: #9f1239; border-radius: 16px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; }
.pwa-alert.ok { background: #ecfdf5; color: #065f46; }
.pwa-skel { height: 88px; border-radius: 20px; background: linear-gradient(90deg, #ece7f8, #f8f6fd, #ece7f8); background-size: 200% 100%; animation: pwaShimmer 1.2s infinite; }
@keyframes pwaShimmer { to { background-position: -200% 0; } }
.pwa-chart { width: 100%; height: 168px; display: block; }
.pwa-muted { color: var(--pwa-muted); }
.pwa-back {
    flex: 0 0 40px; width: 40px; height: 40px;
    border: 1px solid var(--pwa-line); background: #fff; border-radius: 14px;
    font: inherit; font-weight: 800; color: var(--pwa-accent-2); cursor: pointer;
    display: grid; place-items: center;
}
a.pwa-link { color: var(--pwa-accent-2); font-weight: 800; text-decoration: none; }
.pwa-offline { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.pwa-offline img { border-radius: 18px; }
.pwa-offline .pwa-splash-logo, .pwa-offline .pwa-login-logo {
    width: auto; height: 40px; max-width: 180px; border-radius: 0;
}
.pwa-contact { display: grid; gap: 12px; margin: 16px 0 0; }
.pwa-contact div { display: grid; gap: 2px; }
.pwa-contact dt { font-size: 12px; font-weight: 800; color: var(--pwa-muted); }
.pwa-contact dd { margin: 0; font-weight: 700; }
.pwa-lead-msg {
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--pwa-line);
    white-space: pre-wrap;
    font-size: 15px;
    line-height: 1.5;
}
.pwa-thread { display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; }
.pwa-bubble {
    border-radius: 20px;
    padding: 14px 16px;
}
.pwa-bubble.is-you { background: #fff; border: 1px solid var(--pwa-line); }
.pwa-bubble.is-staff { background: #1e1b4b; color: #eef2ff; }
.pwa-bubble .who { font-size: 12px; font-weight: 800; margin-bottom: 8px; opacity: .72; }
.pwa-bubble .when { font-size: 11px; font-weight: 600; opacity: .55; margin-top: 8px; }
.pwa-msg-body { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.pwa-msg-body p { margin: 0 0 .55em; }
.pwa-msg-body p:last-child { margin-bottom: 0; }
.pwa-msg-body a { color: inherit; font-weight: 800; }
.pwa-msg-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0; display: block; }
.pwa-avatar {
    width: 56px; height: 56px; border-radius: 18px; object-fit: cover; background: #ede9fe;
    display: grid; place-items: center; font-weight: 800; color: var(--pwa-accent-2); flex: 0 0 auto;
}
.pwa-profile-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.pwa-stack { display: grid; gap: 16px; }
.pwa-login-more { text-align: center; margin-top: 22px; }
.pwa-drawer {
    position: fixed; inset: 0; z-index: 40;
    pointer-events: none;
    overflow: hidden;
}
.pwa-drawer.is-open { pointer-events: auto; }
.pwa-drawer-mask {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .42);
    opacity: 0; transition: opacity .22s ease;
}
.pwa-drawer.is-open .pwa-drawer-mask { opacity: 1; }
.pwa-drawer-panel {
    position: absolute; top: 0; bottom: 0; left: 0;
    width: min(86vw, 360px);
    background: #fff;
    padding: calc(18px + var(--pwa-safe-t)) 20px calc(20px + var(--pwa-safe-b));
    transform: translateX(-105%);
    transition: transform .28s ease;
    overflow: auto;
    box-shadow: 16px 0 40px rgba(15, 23, 42, .14);
    display: flex; flex-direction: column;
}
.pwa-drawer.is-open .pwa-drawer-panel { transform: none; }
.pwa-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.pwa-drawer-head h2 { margin: 0; font-size: 20px; font-family: var(--pwa-display); }
.pwa-drawer-close {
    width: 36px; height: 36px; border: 0; border-radius: 12px;
    background: #f3eefc; color: var(--pwa-accent-2);
    font: inherit; font-weight: 800; cursor: pointer;
}
.pwa-status-list { display: grid; gap: 8px; margin: 0 0 18px; }
.pwa-status-list button {
    appearance: none; border: 1px solid var(--pwa-line); background: #fff;
    text-align: left; border-radius: 14px; padding: 12px 14px;
    font: inherit; font-weight: 700; cursor: pointer; color: inherit;
}
.pwa-status-list button.is-on { background: var(--pwa-ink); color: #fff; border-color: var(--pwa-ink); }
.pwa-drawer-actions { display: grid; gap: 10px; margin-top: auto; padding-top: 18px; }
@media (min-width: 720px) {
    .pwa-shell, .pwa-login { max-width: 430px; margin: 0 auto; }
    .pwa-nav { left: 50%; right: auto; width: 430px; transform: translateX(-50%); border-radius: 18px 18px 0 0; }
    .pwa-drawer { max-width: 430px; left: 50%; right: auto; transform: translateX(-50%); }
}