:root {
    --sidebar-width: 244px;
    --bg: #f6f5fa;
    --surface: #ffffff;
    --ink: #292337;
    --muted: #81798e;
    --line: #e7e2ed;
    --accent: #7439d0;
    --accent-dark: #5f27b5;
    --accent-soft: #f0e8fa;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    color: var(--ink);
    background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--accent); text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, .button-link { cursor: pointer; }
button, input { min-height: 42px; }
button { border: 1px solid var(--line); border-radius: 9px; padding: 10px 15px; background: white; color: var(--ink); }
button:hover { border-color: var(--accent); color: var(--accent); }
button:disabled { opacity: .6; cursor: wait; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #b79adf; outline-offset: 3px; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { flex-shrink: 0; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.2; letter-spacing: -1.6px; margin-bottom: 14px; }
h1 span { color: var(--accent); }
h2 { font-size: 23px; letter-spacing: -.7px; line-height: 1.35; }
.muted { color: var(--muted); line-height: 1.7; }
.eyebrow { font-size: 11px; letter-spacing: 1.8px; line-height: 1.5; font-weight: 700; color: var(--accent); }
.primary, .button-link { display: inline-flex; gap: 22px; align-items: center; justify-content: center; border-radius: 9px; padding: 13px 18px; font-size: 13px; font-weight: 600; }
.primary { background: var(--accent); color: white; border: 1px solid var(--accent); }
.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: white; }
.button-link:not(.primary) { background: var(--accent-soft); color: var(--accent); }
.button-link:not(.primary):hover { background: #e4d6f6; }
.brand { display: flex; align-items: center; gap: 12px; color: white; font-size: 22px; letter-spacing: -.9px; width: max-content; }
.brand-mark { flex-shrink: 0; display: grid; place-items: center; width: 43px; height: 43px; background: linear-gradient(145deg, #9252ea, #6824bb); border-radius: 13px; font-size: 34px; line-height: 1; font-weight: 800; }
.brand b { color: #c9b9e3; font-weight: 400; }
.brand small { display: block; font-size: 11px; letter-spacing: .85px; margin-top: 6px; color: #a79bb8; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); background: #211b2e; padding: 31px 22px 26px; color: white; z-index: 30; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; transition: width .2s ease, transform .2s ease; }
.sidebar-section { font-size: 11px; letter-spacing: 1.5px; color: #8f829f; margin: 52px 13px 17px; white-space: nowrap; }
.sidebar nav { display: grid; gap: 8px; }
.nav-item { display: flex; align-items: center; gap: 13px; height: 49px; padding: 12px 14px; border-radius: 10px; color: #b6acc5; border: 1px solid transparent; font-size: 13px; white-space: nowrap; }
.nav-item > svg:last-child { margin-left: auto; width: 13px; opacity: .55; }
.nav-item:hover { background: #30253e; color: white; }
.nav-item.active { background: #372649; color: #d5b8fc; border-color: #543172; }
.nav-item.active > svg:first-child { color: #b27cf6; }
.sidebar-bottom { margin-top: auto; padding-top: 60px; display: flex; gap: 12px; align-items: center; font-size: 13px; white-space: nowrap; }
.workspace-mark { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #584569; border-radius: 10px; background: #352a43; color: #c9aedf; flex-shrink: 0; font-size: 11px; }
.workspace-label small { display: block; color: #95869f; font-size: 11px; margin-top: 5px; }
.platform-frame { margin-left: var(--sidebar-width); min-height: 100dvh; display: flex; flex-direction: column; transition: margin-left .2s ease; }
.topbar { height: 83px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; background: white; border-bottom: 1px solid var(--line); padding: 0 38px; gap: 20px; position: sticky; top: 0; z-index: 20; }
.topbar-left, .topbar-user { display: flex; align-items: center; gap: 16px; }
.topbar-user form { margin: 0; }
.icon-button { display: inline-grid; place-items: center; width: 40px; min-height: 40px; padding: 9px; border: 1px solid transparent; background: transparent; color: #8b8298; }
.icon-button:hover { background: var(--accent-soft); border-color: transparent; }
.breadcrumb { display: flex; gap: 14px; font-size: 12px; align-items: center; }
.breadcrumb span { color: #8c8498; }
.breadcrumb i { font-style: normal; color: #c9c3d1; }
.breadcrumb strong { font-weight: 500; }
.user-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #efe6fb; color: var(--accent); border: 3px solid #f9f5fe; font-size: 13px; font-weight: 700; }
.user-info { display: block; font-size: 12px; max-width: 180px; overflow-wrap: anywhere; }
.user-info small { display: block; color: var(--muted); font-size: 11px; margin-top: 5px; }
.workspace-content { padding: 38px 42px 50px; flex: 1; width: 100%; max-width: 1600px; margin: 0 auto; }
.workspace-content:focus { outline: 0; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin: 0 0 34px; }
.page-heading .eyebrow { margin-bottom: 13px; }
.page-heading .muted { font-size: 13px; margin-bottom: 0; }
.platform-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 42px; color: #938b9f; font-size: 11px; border-top: 1px solid var(--line); }
.welcome-panel { position: relative; min-height: 345px; border-radius: 18px; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 45px 42px; gap: 28px; overflow: hidden; }
.welcome-panel > div:first-child { position: relative; z-index: 1; max-width: 460px; }
.section-number { display: block; font-size: 11px; letter-spacing: 1.7px; color: #a095b0; margin-bottom: 25px; }
.welcome-panel h2 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -1px; margin-bottom: 17px; }
.welcome-panel p { font-size: 13px; margin-bottom: 23px; max-width: 390px; }
.welcome-panel a { font-size: 12px; font-weight: 600; }
.welcome-panel a:hover { color: var(--accent-dark); }
.welcome-art { position: relative; width: 270px; height: 240px; flex-shrink: 0; display: grid; place-items: center; }
.welcome-art > span { z-index: 2; display: grid; place-items: center; width: 96px; height: 96px; background: linear-gradient(135deg, #a464ee, #5d22aa); border-radius: 29px; color: white; font-size: 74px; font-weight: 800; box-shadow: 0 20px 50px #8143bd35; transform: rotate(-9deg); }
.welcome-art i { position: absolute; width: 170px; height: 170px; border: 1px solid #e6d8f7; border-radius: 50%; }
.welcome-art i:nth-of-type(2) { width: 230px; height: 230px; }
.welcome-art i:nth-of-type(3) { width: 295px; height: 295px; border-color: #f0e8f9; }
.welcome-art::before, .welcome-art::after { content: ""; position: absolute; border-radius: 50%; background: #b17be7; z-index: 1; width: 12px; height: 12px; top: 24px; right: 43px; }
.welcome-art::after { width: 9px; height: 9px; top: auto; bottom: 36px; right: auto; left: 38px; background: #d8bef2; }
.module-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.module-card { display: flex; align-items: center; gap: 18px; padding: 26px; background: white; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); }
.module-card:hover { border-color: #b79adf; box-shadow: 0 8px 22px #4a2b6b08; }
.module-card h2 { font-size: 18px; margin: 6px 0 9px; }
.module-card p { margin: 0; font-size: 12px; }
.module-card .eyebrow { font-size: 11px; }
.module-card > svg:last-child { margin-left: auto; color: #9c89b2; }
.module-icon, .empty-icon { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border-radius: 14px; width: 53px; height: 53px; flex-shrink: 0; }
.subtle-badge { border: 1px solid #e3d7f1; background: #f1eafb; color: #8a66b0; padding: 10px 13px; border-radius: 20px; font-size: 11px; letter-spacing: .6px; white-space: nowrap; }
.empty-module { background: white; padding: 65px 25px; text-align: center; border: 1px solid var(--line); border-radius: 17px; }
.empty-icon { margin: 0 auto 25px; width: 65px; height: 65px; }
.empty-icon svg { width: 29px; height: 29px; }
.empty-module h2 { font-size: 26px; margin: 10px 0 16px; }
.empty-module > p:not(.eyebrow) { color: var(--muted); line-height: 1.8; max-width: 420px; margin: 0 auto 27px; font-size: 13px; }
.sidebar-collapsed { --sidebar-width: 82px; }
.sidebar-collapsed .sidebar { padding-inline: 16px; }
.sidebar-collapsed .brand-word, .sidebar-collapsed .sidebar-section, .sidebar-collapsed .nav-item span, .sidebar-collapsed .nav-item > svg:last-child, .sidebar-collapsed .workspace-label { display: none; }
.sidebar-collapsed .brand { margin: 0 auto; }
.sidebar-collapsed .sidebar nav { margin-top: 55px; }
.sidebar-collapsed .nav-item { width: 49px; padding: 13px; }
.sidebar-collapsed .sidebar-bottom { justify-content: center; }
.mobile-close, .sidebar-overlay { display: none; }
.skip-link { position: fixed; top: -80px; left: 15px; z-index: 100; padding: 12px; background: white; border: 2px solid var(--accent); border-radius: 6px; }
.skip-link:focus { top: 10px; }
.login-page { min-height: 100dvh; display: grid; grid-template-columns: 49% 51%; background: #fcfbfe; }
.login-story { min-height: 100dvh; background: radial-gradient(ellipse at 5% 95%, #49216d, transparent 60%), #21192f; color: white; padding: 45px 55px 33px; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.login-story > .brand { position: relative; z-index: 2; }
.login-story > small { position: relative; z-index: 2; color: #8f7f9e; font-size: 11px; }
.login-message { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 60px 0 135px; }
.login-message .eyebrow { color: #b893e3; font-size: 11px; z-index: 1; }
.login-message h1 { font-size: clamp(35px, 4.1vw, 62px); font-weight: 600; line-height: 1.13; letter-spacing: -2.5px; margin: 15px 0 26px; z-index: 1; }
.login-message h1 span { color: #ba8dea; }
.login-message > p:not(.eyebrow) { font-size: 14px; line-height: 1.9; color: #b8a8c8; z-index: 1; }
.login-orbit { position: absolute; width: 310px; height: 310px; display: grid; place-items: center; right: -120px; bottom: -10px; }
.login-orbit span { display: grid; place-items: center; background: linear-gradient(140deg, #9758d4, #56258c); color: #d9bbed; border-radius: 27px; width: 90px; height: 90px; font-weight: 800; font-size: 73px; transform: rotate(-15deg); box-shadow: 0 25px 55px #140c2188; }
.login-orbit i { position: absolute; border: 1px solid #68428377; border-radius: 50%; width: 190px; height: 190px; }
.login-orbit i:nth-of-type(2) { width: 255px; height: 255px; }
.login-orbit i:nth-of-type(3) { width: 320px; height: 320px; }
.login-main { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 55px 40px 28px; position: relative; }
.login-card { width: 100%; max-width: 365px; margin: auto; padding: 45px 0; }
.login-card h2 { font-size: 32px; letter-spacing: -1.1px; margin: 15px 0 13px; }
.login-card > .muted { font-size: 13px; margin: 0 0 35px; }
#login-form { display: grid; gap: 22px; }
#login-form label { display: flex; flex-direction: column; gap: 10px; font-weight: 500; font-size: 12px; }
#login-form input:not([type=hidden]) { width: 100%; height: 47px; padding: 13px; border: 1px solid #ded6e8; border-radius: 8px; font-size: 12px; color: var(--ink); background: white; }
#login-form input::placeholder { color: #aaa0b6; }
.password-field { display: flex; position: relative; }
#login-form .password-field input { padding-right: 49px; }
.password-field button { position: absolute; right: 5px; top: 3px; width: 36px; height: 40px; min-height: 40px; display: grid; place-items: center; color: #9b87b4; padding: 8px; border: 0; background: transparent; }
.password-field button svg { width: 20px; height: 20px; stroke-width: 1.8; }
.password-field button:hover { color: var(--accent); }
.login-submit { width: 100%; justify-content: space-between; min-height: 47px; margin-top: 2px; }
.login-help { color: #9a8ea6; font-size: 11px; line-height: 1.7; margin: 28px 0 0; text-align: center; }
.login-footer { font-size: 11px; color: #a89daf; }
.form-error { font-size: 12px; color: #a63854; border: 1px solid #f2d5dd; border-radius: 8px; padding: 12px; background: #fff3f6; line-height: 1.7; margin: 0; }
[hidden] { display: none !important; }
@media (max-width: 1100px) {
    .topbar { padding-inline: 24px; }
    .workspace-content { padding-inline: 28px; }
    .platform-footer { padding-inline: 28px; }
    .page-heading { align-items: flex-start; }
    .welcome-panel { padding: 35px 28px; }
    .welcome-art { width: 160px; margin-right: 10px; }
    .welcome-art i:nth-of-type(3) { width: 250px; height: 250px; }
    .module-links { grid-template-columns: 1fr; }
    .login-story { padding-inline: 35px; }
    .login-message h1 { font-size: 44px; }
}
@media (max-width: 760px) {
    :root { --sidebar-width: 244px; }
    .platform-frame { margin-left: 0; }
    .sidebar { transform: translateX(-100%); }
    .sidebar-mobile-open { overflow: hidden; }
    .sidebar-mobile-open .sidebar { transform: translateX(0); }
    .mobile-close { display: block; position: absolute; top: 90px; right: 23px; width: 30px; height: 30px; min-height: 30px; border: 0; padding: 3px; background: #34263f; color: #c8afd9; font-size: 20px; }
    .sidebar-overlay { display: block; position: fixed; inset: 0; background: #1a112c66; z-index: 25; border: 0; border-radius: 0; }
    .topbar { height: 73px; padding-inline: 15px; }
    .topbar-left, .topbar-user { gap: 9px; }
    .breadcrumb { font-size: 11px; gap: 8px; }
    .breadcrumb > span, .breadcrumb > i { display: none; }
    .user-info { max-width: 100px; font-size: 11px; }
    .user-info small { font-size: 11px; }
    .user-avatar { display: none; }
    .workspace-content { padding: 30px 19px; }
    .page-heading { flex-direction: column; gap: 22px; margin-bottom: 27px; }
    .page-heading h1 { font-size: 33px; }
    .welcome-panel { padding: 30px 25px; min-height: 325px; }
    .welcome-panel h2 { font-size: 27px; }
    .welcome-panel > div:first-child { max-width: 100%; }
    .welcome-art { display: none; }
    .module-card { padding: 23px; gap: 15px; }
    .module-card p:not(.eyebrow) { font-size: 11px; }
    .module-icon { width: 45px; height: 45px; border-radius: 12px; }
    .platform-footer { padding: 20px; font-size: 11px; align-items: flex-start; }
    .platform-footer > span:last-child { text-align: right; }
    .login-page { grid-template-columns: 1fr; }
    .login-story { min-height: auto; padding: 25px 25px 30px; }
    .login-story .brand { font-size: 20px; }
    .login-message { padding: 35px 0 0; }
    .login-message h1 { font-size: 35px; line-height: 1.15; letter-spacing: -1px; margin: 10px 0 15px; }
    .login-message h1 br { display: none; }
    .login-message h1 br::after { content: " "; }
    .login-message .eyebrow, .login-message > p:not(.eyebrow), .login-orbit, .login-story > small { display: none; }
    .login-main { padding: 30px 26px 25px; }
    .login-card { padding: 10px 0 35px; max-width: 400px; }
    .login-card h2 { font-size: 29px; }
    .login-footer { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Validação de formulário: mensagens abaixo de cada campo, sem tooltip nativo. */
#login-form input.is-invalid {
    border-color: #d94761;
    background-color: #fff8fa;
}
#login-form input.is-invalid:focus-visible {
    outline-color: #edb1bd;
}
#login-form .field-error {
    display: block;
    color: #c4314e;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    margin-top: -3px;
}