:root {
    --bg: #071a37;
    --bg2: #0c2b55;
    --panel: rgba(255, 255, 255, .08);
    --panel-solid: #102f5b;
    --border: rgba(183, 213, 246, .22);
    --text: #f7faff;
    --muted: #bacce2;
    --primary: #1d5db6;
    --pink: #b7dcff;
    --teal: #75c9ff;
    --grad: linear-gradient(120deg, #173f83 0%, #2166bb 55%, #3c8ce0 100%);
    --font: "DM Sans", system-ui, -apple-system, Segoe UI, sans-serif;
    --font-d: "Manrope", "DM Sans", system-ui, sans-serif;
}

body { background: #071a37; }
.topbar { background: rgba(7, 26, 55, .94); }
.topbar.scrolled { background: rgba(7, 26, 55, .98); }
.brand-mark img { border-radius: 12px; }
.brand-name { letter-spacing: -.7px; }
.header-search { background: rgba(255, 255, 255, .08); border-color: rgba(183, 213, 246, .25); }
.header-search:focus-within { border-color: #9ac9ff; box-shadow: 0 0 0 3px rgba(154, 201, 255, .15); }
.header-search input::placeholder { color: #b7cbe4; }
.user-chip, .bell { background: rgba(255, 255, 255, .08); }
.user-chip:hover, .bell:hover { background: rgba(255, 255, 255, .15); }

.workspace-page { background: #f4f8fd; color: #153253; }
.workspace-page .topbar { background: #0a2145; }
.workspace-page .topbar.scrolled { background: #081c3b; }
.workspace-shell { background: #f4f8fd; }
.workspace-rail {
    flex-basis: 100px;
    gap: 9px;
    padding: 24px 12px;
    background: linear-gradient(180deg, #103568, #0a2145 78%);
    box-shadow: inset -1px 0 rgba(255, 255, 255, .08);
}
.workspace-rail > a, .workspace-rail button {
    min-height: 60px;
    padding: 10px 4px;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.workspace-rail > a > span, .workspace-rail button > span { font-size: 1.35rem; }
.workspace-rail > a:hover, .workspace-rail .selected {
    color: #fff;
    background: rgba(159, 204, 255, .16);
    border-color: rgba(183, 213, 246, .2);
    box-shadow: inset 3px 0 #c6e4ff, 0 8px 20px -14px #000;
    transform: translateY(-1px);
}
.workspace-content {
    position: relative;
    isolation: isolate;
    padding: 34px clamp(18px, 3.2vw, 48px) 68px;
    background:
        radial-gradient(ellipse at 94% 0, rgba(220, 236, 255, .72), transparent 34rem),
        #f4f8fd;
    --text: #153253;
    --muted: #5e7590;
    --panel: #fff;
    --panel-solid: #fff;
    --border: #d7e4f2;
    --shadow: 0 18px 42px -26px rgba(18, 57, 101, .38);
    color-scheme: light;
}
.workspace-content > * { position: relative; z-index: 1; }
.workspace-content h1, .workspace-content h2, .workspace-content h3 { color: #12355f; }
.workspace-content h1 { font-size: clamp(1.8rem, 2.4vw, 2.2rem); letter-spacing: -.8px; }
.workspace-content h2 { font-size: 1.32rem; letter-spacing: -.25px; }
.workspace-content .muted { color: #5e7590; }
.workspace-content .panel,
.workspace-content .person-card,
.workspace-content .stat,
.workspace-content .list-card,
.workspace-content .table-wrap {
    border: 1px solid #dce7f3;
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 30px -24px rgba(17, 57, 103, .55), inset 0 1px #fff;
}
.workspace-content .panel { padding: clamp(18px, 2vw, 26px); }
.workspace-content .panel > summary { color: #123f76; }
.workspace-content .input {
    border-color: #ccdced;
    border-radius: 10px;
    background: #fbfdff;
    color: #153253;
}
.workspace-content .input:focus {
    border-color: #4387ce;
    box-shadow: 0 0 0 3px rgba(29, 93, 182, .14);
    outline: none;
}
.workspace-content select.input option { background: #fff; color: #153253; }
.workspace-content label.lbl { color: #244564; font-weight: 700; }
.workspace-content .btn {
    border-radius: 10px;
    background: #e8f1fb;
    color: #17457b;
    border-color: #d0e0f2;
}
.workspace-content .btn:hover { box-shadow: 0 8px 18px -14px #17457b; }
.workspace-content .btn-glow {
    color: #fff;
    background: linear-gradient(120deg, #173f83, #2876c8 70%, #438fe1);
    border-color: transparent;
    box-shadow: 0 5px 0 #12366d, 0 12px 24px -13px #174b8d;
}
.workspace-content .btn-glow:hover { box-shadow: 0 6px 0 #12366d, 0 17px 26px -13px #174b8d; }
.workspace-content .btn-ghost { background: transparent; color: #17457b; border-color: #cddded; }
.workspace-content .btn-danger { background: #fff0f3; color: #a82040; border-color: #f1c6d0; }
.workspace-content .eyebrow { color: #2a62a0; }
.workspace-content .flash-success { color: #186445; background: #e7f7ef; border-color: #a6dac2; }
.workspace-content .flash-error, .workspace-content .errors { color: #922a43; background: #fff0f3; border-color: #f2bac8; }
.workspace-content .flash-info { color: #225793; background: #eaf3ff; border-color: #b9d6f7; }
.workspace-content .flash-warn { color: #76500a; background: #fff6e5; border-color: #f3cf87; }
.workspace-content .badge { background: #eaf2fe; color: #235a9c; }
.workspace-content .badge-live { background: #d5f3e5; color: #16623f; animation: none; }
.workspace-content .stat { color: #153253; border-color: #dce7f3; }
.workspace-content .stat b { color: #12355f; }
.workspace-content .stat span { color: #5e7590; }
.workspace-content .table-wrap { background: #fff; }
.workspace-content .tbl th { color: #315477; background: #eaf2fb; }
.workspace-content .tbl td { border-color: #e2ebf5; }
.workspace-content .tbl tr:hover td { background: #f5f9fe; }
.workspace-content .tabs { border-color: #d6e2f0; }
.workspace-content .tab { color: #607995; }
.workspace-content .tab.active { color: #123f76; border-bottom-color: #2874c3; }
.workspace-content .status-todo { background: #edf1f6; color: #43566e; }
.workspace-content .status-in_progress { background: #e1efff; color: #1d58a6; }
.workspace-content .status-done { background: #dcf4e8; color: #16623f; }
.workspace-content .tag { background: #eaf2fe; color: #235a9c; }
.workspace-content .ticket-key, .workspace-content .link-btn { color: #1d5da9; }
.workspace-content .summary-link { color: #153253; }
.workspace-content .empty-state { border-color: #c8d9eb; color: #5e7590; }
.workspace-content .person-card { box-shadow: 0 8px 22px -20px #17477c; }
.workspace-content .checkbox-grid { border-color: #d7e4f2; background: #fbfdff; }
.workspace-content .checkbox-grid label:hover { background: #edf5fe; }
.workspace-content input[type="checkbox"], .workspace-content input[type="radio"] { accent-color: #1d5db6; }
.workspace-content .page-heading,
.workspace-content .view-heading,
.workspace-content .dash-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: -2px 0 27px;
    padding: 27px clamp(20px, 3vw, 34px) 34px;
    border: 1px solid rgba(164, 204, 246, .3);
    border-radius: 18px 18px 5px 5px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 18%, rgba(146, 200, 255, .23), transparent 19rem),
        linear-gradient(112deg, #0b2852, #174b88 66%, #1d5da3);
    box-shadow: 0 10px 24px -20px #0a2347;
}
.workspace-content .page-heading > *,
.workspace-content .view-heading > *,
.workspace-content .dash-head > * { position: relative; z-index: 2; }
.workspace-content .page-heading::before,
.workspace-content .view-heading::before,
.workspace-content .dash-head::before {
    position: absolute;
    z-index: 0;
    top: -110px;
    right: 7%;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(210, 232, 255, .18);
    border-radius: 50%;
    box-shadow: 0 0 0 26px rgba(210, 232, 255, .035), 0 0 0 54px rgba(210, 232, 255, .025);
    content: "";
    pointer-events: none;
}
.workspace-content .page-heading::after,
.workspace-content .view-heading::after,
.workspace-content .dash-head::after {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 19px;
    background: #f4f8fd;
    clip-path: polygon(0 38%, 10% 66%, 22% 78%, 34% 72%, 47% 42%, 60% 25%, 72% 31%, 84% 60%, 94% 69%, 100% 48%, 100% 100%, 0 100%);
    content: "";
    pointer-events: none;
}
.workspace-content .page-heading h1,
.workspace-content .view-heading h1,
.workspace-content .dash-head h1,
.workspace-content .page-heading h2,
.workspace-content .view-heading h2,
.workspace-content .dash-head h2 { color: #fff; }
.workspace-content .page-heading p,
.workspace-content .view-heading p,
.workspace-content .dash-head p { color: #d2e4f8; }
.workspace-content .page-heading .eyebrow,
.workspace-content .view-heading .eyebrow,
.workspace-content .dash-head .eyebrow { color: #b8d9fb; }
.workspace-content .page-heading .btn:not(.btn-glow),
.workspace-content .view-heading .btn:not(.btn-glow),
.workspace-content .dash-head .btn:not(.btn-glow) {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(222, 239, 255, .28);
}
.workspace-content .page-heading .btn:not(.btn-glow):hover,
.workspace-content .view-heading .btn:not(.btn-glow):hover,
.workspace-content .dash-head .btn:not(.btn-glow):hover { background: rgba(255, 255, 255, .2); }
.workspace-content .page-heading .muted,
.workspace-content .view-heading .muted,
.workspace-content .dash-head .muted { color: #d2e4f8; }
.meeting-footer {
    position: relative;
    margin-top: 0;
    padding-top: 22px;
    color: #c5d9f3;
    background: #081c38;
}
.meeting-footer::before {
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    height: 22px;
    background: #f4f8fd;
    clip-path: polygon(0 0, 100% 0, 100% 28%, 88% 72%, 76% 88%, 61% 65%, 48% 27%, 34% 18%, 21% 55%, 9% 92%, 0 54%);
    content: "";
    pointer-events: none;
}
.meeting-footer .footer-bottom { margin-top: 0; padding: 24px 0 45px; align-items: center; }
.meeting-footer .brand-name { font-size: 1.35rem; }
.connection-notice { background: #8d2541; }

.hero {
    isolation: isolate;
    overflow: hidden;
    padding-bottom: 76px;
    background:
        radial-gradient(ellipse at 83% 42%, rgba(52, 124, 198, .42), transparent 35rem),
        linear-gradient(115deg, #071a37 5%, #0c2d58 62%, #12477d);
}
.hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: linear-gradient(rgba(170, 212, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(170, 212, 255, .035) 1px, transparent 1px);
    background-size: 54px 54px;
    content: "";
    mask-image: linear-gradient(90deg, transparent, #000);
    pointer-events: none;
}
.hero::after {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 34px;
    background: #f4f8fd;
    clip-path: polygon(0 49%, 11% 74%, 23% 82%, 36% 63%, 49% 28%, 63% 23%, 75% 47%, 88% 71%, 100% 52%, 100% 100%, 0 100%);
    content: "";
    pointer-events: none;
}
.hero p.lead { color: #c6d7ea; }
.hero-eyebrow { color: #d7e8fb; background: rgba(255, 255, 255, .08); }
.hero-stats b { color: #fff; }
.hero-stats span { color: #b8cce4; }
.hv-main { border-color: #cfe7ff; box-shadow: 12px 14px 0 #143b6b, 22px 32px 65px #0007, 0 0 60px #398cff22; }
.hv-chip { background: #f4f9ff; color: #163d6d; border-color: #fff; }
.section-cross { margin: 0 0 34px; padding: 80px 0; color: #102f59; }
.section-cross::before {
    inset: 12px 0;
    background: #f3f8ff;
    clip-path: polygon(0 7%, 11% 1%, 23% 4%, 36% 15%, 49% 17%, 62% 9%, 76% 2%, 89% 7%, 100% 13%, 100% 87%, 89% 95%, 77% 98%, 63% 90%, 49% 84%, 35% 89%, 21% 98%, 8% 95%, 0 89%);
}
.section-cross::after {
    inset: 0;
    background: linear-gradient(105deg, #1d5db6, #7bbfff);
    clip-path: polygon(0 5%, 11% 0, 23% 2%, 36% 13%, 49% 15%, 62% 7%, 76% 0, 89% 5%, 100% 11%, 100% 89%, 89% 97%, 77% 100%, 63% 92%, 49% 86%, 35% 91%, 21% 100%, 8% 97%, 0 91%);
}
.section-cross .eyebrow { color: #205eb0; }
.section-cross .stat { background: #fff; border-color: #d6e5f7; box-shadow: 0 6px 0 #dce8f7, 0 18px 32px -24px #123e6b88; }
.section-cross .stat span { color: #4a6382; }
.section-cross .stat::after { display: none; }
.stat { transition: transform .25s, box-shadow .25s; }
.stat:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -24px #123e6b88; }
.auth-wrap { position: relative; isolation: isolate; }
.auth-wrap::before, .auth-wrap::after {
    position: absolute;
    z-index: -1;
    width: min(230px, 34vw);
    aspect-ratio: 1;
    border: 1px solid rgba(155, 207, 255, .18);
    border-radius: 36px;
    background: linear-gradient(140deg, rgba(57, 140, 255, .16), transparent);
    rotate: -25deg;
    content: "";
}
.auth-wrap::before { top: 8%; left: 13%; }
.auth-wrap::after { right: 13%; bottom: 8%; rotate: 25deg; }
.auth-card .panel {
    border: 1px solid rgba(183, 220, 255, .32);
    border-top-color: rgba(225, 241, 255, .55);
    background: linear-gradient(150deg, rgba(22, 57, 97, .97), rgba(8, 29, 59, .98));
    box-shadow: 0 8px 0 #071a37, 0 35px 70px -24px #000b;
}
.auth-card .panel h1 { color: #fff; }
.auth-card .panel .sub { color: #c4d6eb; }
.auth-card .panel .lbl { color: #e2effd; }
.auth-card .panel .input { color: #f7faff; background: #071d3c; border-color: rgba(183, 213, 246, .25); }
.auth-card .panel .input::placeholder { color: #a0b7d3; }

@media (max-width: 760px) {
    .workspace-rail { flex-basis: auto; }
    .workspace-content { padding: 22px 14px 55px; }
    .workspace-content .page-heading, .workspace-content .view-heading, .workspace-content .dash-head { padding: 22px 18px 29px; }
    .workspace-content .page-heading h1, .workspace-content .view-heading h1, .workspace-content .dash-head h1 { font-size: 1.65rem; }
    .hero { padding-bottom: 60px; }
    .hero::after { height: 25px; }
    .section-cross { padding: 68px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .workspace-rail > a, .workspace-rail button, .stat { transition: none; }
    .workspace-rail > a:hover, .workspace-rail .selected, .stat:hover { transform: none; }
}