*,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 :root {
     --verde: #29daaa;
     --verde-50: rgba(41, 218, 170, .5);
     --verde-13: rgba(41, 218, 170, .13);
     --verde-12: rgba(41, 218, 170, .12);
     --verde-10: rgba(41, 218, 170, .10);
     --verde-07: rgba(41, 218, 170, .07);
     --azul: #0090ba;
     --azul-bright: #00a6ff;
     --azul-dark: #091c27;
     --azul-mid: #194365;
     --amarelo: #ffb500;
     --amarelo-50: rgba(255, 181, 0, .5);
     --amarelo-12: rgba(255, 181, 0, .12);
     --vermelho: #f25255;
     --vermelho-50: rgba(242, 82, 85, .5);
     --vermelho-14: rgba(242, 82, 85, .14);
     --verde-dimp: #50b84d;
     --sidebar-w: 240px;
     --topbar-h: 80px;
 }

 html,
 body {
     min-height: 100vh;
     font-family: 'Space Grotesk', sans-serif;
     color: #fff;

 }

 body {
     background: radial-gradient(ellipse 144% 100% at 50% 50%,
             rgba(3, 31, 47, 1) 0%, rgb(6, 27, 23) 100%);

 }

 a {
     text-decoration: none;
     color: inherit;
 }

 button {
     font-family: inherit;
     cursor: pointer;
     border: none;
     background: none;
 }

 /* ── PAGE WRAPPER ────────────────────────────────────── */
 .page-wrapper {
     max-width: 1400px;
     margin: 0 auto;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
 }

 .page-wrapper-overlay {
     background-image: url(../img/ui/blur-bg1.png), url(../img/ui/blur-bg2.png);
     background-position: top right, bottom left;
     background-repeat: no-repeat;
     background-size: 50%, 50%;
     position: absolute;
     width: 100vw;
     min-height: 100vh;
 }

 /* ── TOP BAR ─────────────────────────────────────────── */
 .topbar {
     position: sticky;
     top: 20px;
     margin: 20px 20px 0;
     height: var(--topbar-h);
     display: flex;
     align-items: center;
     justify-content: space-between;
     z-index: 100;
     background: var(--azul-dark);
     border: 1px solid var(--verde-50);
     border-radius: 8px;
     padding: 13px;
 }

 .topbar__logo img {
     height: 44px;
     width: auto;
     display: block;
 }

 .topbar__user {
     font-family: 'JetBrains Mono', monospace;
     font-size: 15px;
     color: #fff;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .topbar__user img {
     opacity: 1;
     transition: opacity .2s;
 }

 .topbar__user img:hover {
     opacity: .5;
 }

 .topbar__user a {
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--verde);
     text-decoration: none;
     font-size: 22px;
 }

 .topbar__user .c-verde {
     color: var(--verde);
 }

 .topbar__sep {
     color: var(--verde);
     opacity: .7;
 }

 .topbar__notification {
     position: relative;
 }

 .topbar__notification--unread i {
     color: var(--verde);
     filter: drop-shadow(0 0 10px rgba(41, 218, 170, .42));
 }

 .topbar__notification-badge {
     position: absolute;
     top: -9px;
     right: -10px;
     min-width: 18px;
     height: 18px;
     padding: 0 5px;
     border-radius: 999px;
     background: var(--vermelho);
     color: #fff;
     font-size: 10px;
     line-height: 18px;
     text-align: center;
     font-weight: 700;
 }

 /* hamburger – only visible on mobile */
 .topbar__hamburger {
     display: none;
     flex-direction: column;
     gap: 5px;
     width: 36px;
     height: 36px;
     align-items: center;
     justify-content: center;
 }

 .topbar__hamburger span {
     display: block;
     width: 24px;
     height: 2px;
     background: #fff;
     border-radius: 2px;
 }

 .ph-bold {
     font-weight: bold;
 }

 .ph-sign-out {
     color: #fff;
     font-size: 20px;
 }

 /* ── SIDEBAR ─────────────────────────────────────────── */
 .sidebar {
     position: sticky;
     top: calc(var(--topbar-h) + 40px);
     align-self: flex-start;
     flex-shrink: 0;
     width: var(--sidebar-w);
     margin-left: 20px;
     margin-top: 20px;
     background: var(--azul-dark);
     border: 1px solid var(--verde-50);
     border-radius: 8px;
     padding: 16px;
     display: flex;
     flex-direction: column;
     gap: 18px;
     z-index: 90;
     max-height: calc(100vh - var(--topbar-h) - 60px);
     overflow-y: auto;
 }

 .nav-section {
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .nav-label {
     font-size: 12px;
     font-weight: 400;
     text-transform: uppercase;
 }

 .nav-label--fis {
     color: var(--azul);
 }

 .nav-label--dados {
     color: var(--verde-dimp);
 }

 .nav-label--admin {
     color: var(--amarelo);
 }

 .nav-items {
     display: flex;
     flex-direction: column;
     gap: 9px;
     padding-left: 11px;
 }

 .nav-item {
     font-size: 15px;
     color: #fff;
     transition: color .2s;
 }

 .nav-item:hover,
 .nav-item--active {
     color: var(--verde);
 }

 .nav-divider {
     height: 1px;
     background: rgba(41, 218, 170, .25);
 }

 /* ── LAYOUT ──────────────────────────────────────────── */
 .layout {
     display: flex;
     align-items: flex-start;
     flex: 1;

 }

 .main {
     flex: 1;
     min-width: 0;
     padding: 20px 20px 0;
 }

 /* ── PAGE HEADER ─────────────────────────────────────── */
 .page-header {
     background: var(--verde-10);
     border: 1px solid var(--verde-50);
     border-radius: 8px;
     padding: 15px 20px;
     margin-bottom: 40px;
 }

 .page-header h1 {
     font-size: 33px;
     font-weight: 700;
     color: var(--verde);
 }

 /* ── SECTION ─────────────────────────────────────────── */
 .section {
     margin-bottom: 79px;
 }

 .section__head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 30px;
 }

 .section__title {
     font-size: 25px;
     font-weight: 700;
     color: var(--verde);
     text-transform: uppercase;
 }

 .btn-add {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     height: 32px;
     padding: 0 17px 0 14px;
     background: var(--verde);
     border: 1px solid var(--verde);
     border-radius: 8px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 15px;
     font-weight: 600;
     color: var(--azul-dark);
     transition: opacity .2s;
 }

 .btn-add:hover {
     opacity: .82;
 }

 .btn-add img {
     width: 18px;
     height: 18px;
 }

 /* ── AGENT CARDS ─────────────────────────────────────── */
 .agents {
     display: flex;
     flex-direction: column;
     gap: 26px;
 }

 .agent {
     display: flex;
     align-items: center;
     gap: 31px;
     padding: 24px;
     border-radius: 8px;
     border-top: 1px solid;
     border-bottom: 1px solid;
     border-right: 1px solid;
     border-left: 8px solid;
 }

 .agent--yellow {
     border-color: var(--amarelo-50);
 }

 .agent--green {
     border-color: var(--verde-50);
 }

 .agent--red {
     border-color: var(--vermelho-50);
 }

 .agent__icon {
     width: 101px;
     height: 101px;
     flex-shrink: 0;
     background: var(--verde-13);
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 47px;
     line-height: 1;
 }

 .agent__body {
     flex: 1;
     min-width: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
 }

 .agent__info {
     display: flex;
     flex-direction: column;
     gap: 4px;
     flex: 1;
     min-width: 0;
 }

 .agent__name {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 31px;
     font-weight: 500;
     color: #fff;
     letter-spacing: -1.24px;
     line-height: normal;
 }

 .agent__case {
     font-family: 'JetBrains Mono', monospace;
     font-size: 15px;
     color: var(--azul);
     line-height: 1.5;
 }

 .agent__badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     height: 28px;
     padding: 0 10px;
     border: 1px solid;
     border-radius: 10px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 15px;
     font-weight: 300;
     letter-spacing: -.6px;
     white-space: nowrap;
     align-self: flex-start;
 }

 .agent__badge--waiting {
     background: var(--amarelo-12);
     border-color: var(--amarelo);
     color: var(--amarelo);
 }

 .agent__badge--analyzing {
     background: var(--verde-07);
     border-color: var(--verde);
     color: var(--verde);
 }

 .agent__badge--acting {
     background: var(--vermelho-14);
     border-color: var(--vermelho);
     color: var(--vermelho);
 }

 .agent__ctrl {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     justify-content: center;
     gap: 12px;
     flex-shrink: 0;
 }

 /* CSS-only toggle */
 .toggle {
     position: relative;
     width: 50px;
     height: 28px;
 }

 .toggle input {
     opacity: 0;
     width: 0;
     height: 0;
     position: absolute;
 }

 .toggle__track {
     position: absolute;
     inset: 0;
     background: rgba(255, 255, 255, .2);
     border-radius: 28px;
     cursor: pointer;
     transition: background .25s;
 }

 .toggle__track::before {
     content: '';
     position: absolute;
     width: 20px;
     height: 20px;
     top: 4px;
     left: 4px;
     background: #fff;
     border-radius: 50%;
     transition: transform .25s;
 }

 .toggle input:checked~.toggle__track {
     background: var(--verde);
 }

 .toggle input:checked~.toggle__track::before {
     transform: translateX(22px);
 }

 .agent__count {
     font-family: 'JetBrains Mono', monospace;
     font-size: 15px;
     color: #fff;
     white-space: nowrap;
     line-height: 1.5;
 }

 /* ── FILTER ──────────────────────────────────────────── */
 .filter {
     display: flex;
     align-items: center;
     gap: 9px;
     margin-bottom: 29px;
 }

 .filter__label {
     font-size: 20px;
     color: #fff;
 }

 .filter__btn {
     padding: 4px 24px;
     border-radius: 8px;
     border: 1px solid;
     font-size: 16px;
     transition: all .2s;
 }

 .filter__btn--on {
     background: rgba(41, 218, 170, .1);
     border-color: var(--verde-50);
     color: var(--verde);
 }

 .filter__btn--off {
     background: transparent;
     border-color: var(--azul-mid);
     color: var(--azul-mid);
 }

 /* ── CHARTS GRID ─────────────────────────────────────── */
 .charts3 {
     display: flex;
     flex-wrap: wrap;
     gap: 13px;
 }

 .charts3>* {
     flex: 1 1 calc(33.333% - 9px);
     min-width: 260px;
 }

 .charts2 {
     display: flex;
     flex-wrap: wrap;
     gap: 13px;
 }

 .charts2>* {
     flex: 1 1 calc(50% - 19px);
     min-width: 300px;
 }


 .chart-wrap {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .chart-box {
     border: 1px solid var(--verde-50);
     border-radius: 8px;
     padding: 20px 10px;
     display: flex;
     flex-direction: column;
     gap: 27px;
 }

 .chart-box--lg {
     border: 1px solid var(--verde-50);
     border-radius: 8px;
     padding: 20px 10px;
     display: flex;
     flex-direction: column;
     gap: 34px;
 }

 .chart-title {
     font-size: 27px;
     font-weight: 700;
     color: #fff;
     text-align: center;
     line-height: normal;
 }

 .chart-title .c-verde {
     color: var(--verde);
 }

 .chart-title .c-blue {
     color: var(--azul-bright);
 }

 .chart-title .c-yellow {
     color: var(--amarelo);
 }

 .chart-inner {
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
 }

 .bars {
     display: flex;
     align-items: self-end;
     width: 100%;
     justify-content: space-around;
 }


 .bar {
     display: flex;
     min-width: 21px;
     border-radius: 4px 4px 0 0;
     cursor: pointer;
     transition: opacity .2s;
     position: relative;
 }

 .bar:hover {
     opacity: .75;
 }

 .bar--verde {
     background: var(--verde);
 }

 .bar--azul {
     background: var(--azul);
 }

 .bar--amarelo {
     background: var(--amarelo);
 }

 .bar--lg {
     flex-shrink: 0;
     width: 30px;
     border-radius: 4px 4px 0 0;
     cursor: pointer;
     transition: opacity .2s;
 }

 .bar--lg:hover {
     opacity: .75;
 }

 .bar--lg.bar--verde {
     background: var(--verde);
 }

 .bar--lg.bar--amarelo {
     background: var(--amarelo);
 }

 .bar--lg.bar--vermelho {
     background: var(--vermelho);
 }

 /* floating tooltip */
 .tip {
     position: absolute;
     bottom: calc(100% + 8px);
     left: 50%;
     transform: translateX(-50%);
     background: rgba(9, 28, 39, .97);
     border: 1px solid rgba(41, 218, 170, .35);
     border-radius: 6px;
     padding: 4px 10px;
     font-family: 'Space Grotesk', sans-serif;
     font-size: 11px;
     color: #fff;
     white-space: nowrap;
     pointer-events: none;
     opacity: 0;
     transition: opacity .15s;
     z-index: 999;
 }

 .tip b {
     display: block;
     margin-bottom: 1px;
     color: var(--verde);
 }

 .bar:hover .tip,
 .bar--lg:hover .tip {
     opacity: 1;
 }

 .chart-rule {
     width: 100%;
     height: 1px;
     background: rgba(41, 218, 170, .25);
     margin-bottom: 6px;
 }

 .months {
     display: flex;
     align-items: center;
     font-family: 'JetBrains Mono', monospace;
     font-size: 10px;
     color: #fff;
     text-align: center;
     width: 100%;
     justify-content: space-around;
 }

 .months span {
     width: 21px;
     text-align: center;
 }

 .months--lg {
     gap: 14px;
 }

 .months--lg span {
     width: 30px;
 }

 /* total summary box */
 .chart-total {
     border: 1px solid var(--verde-50);
     border-radius: 8px;
     padding: 8px 36px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 2px;
     text-align: center;
     min-height: 77px;
 }

 .chart-total__label {
     font-size: 16px;
     font-weight: 400;
     color: #fff;
     white-space: nowrap;
 }

 .chart-total__value {
     font-size: 21px;
     font-weight: 700;
     white-space: nowrap;
 }

 .chart-total__value--verde {
     color: var(--verde);
 }

 .chart-total__value--blue {
     color: var(--azul-bright);
 }

 .chart-total__value--yellow {
     color: var(--amarelo);
 }

 /* ── FOOTER ──────────────────────────────────────────── */
 .footer {
     margin: 40px 19px 0;
     background: var(--verde-12);
     border: 1px solid var(--verde-50);
     border-bottom: none;
     border-radius: 8px 8px 0 0;
     padding: 29px 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
 }

 .footer__logo img {
     height: 52px;
     width: auto;
     display: block;
 }

 .footer__text {
     font-family: 'JetBrains Mono', monospace;
     font-size: 15px;
     color: var(--verde);
 }

 /* ── OVERLAY (mobile) ────────────────────────────────── */
 .overlay {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .55);
     z-index: 80;
 }

 .overlay--on {
     display: block;
 }

 /* ── RESPONSIVE ──────────────────────────────────────── */
 @media (max-width: 1200px) {
     .charts3>* {
         flex-basis: calc(50% - 7px);
     }

     .charts2>* {
         flex-basis: 100%;
     }

     .charts2 {
         gap: 20px;
     }
 }

 @media (max-width: 960px) {
     .agent__name {
         font-size: 24px;
     }

     .agent__icon {
         width: 72px;
         height: 72px;
         font-size: 34px;
     }
 }

 @media (max-width: 768px) {
     :root {
         --topbar-h: 60px;
     }

     .topbar {
         padding: 0 6px;
         left: 16px;
         right: 16px;
         top: 10px;
     }

     .topbar__hamburger {
         display: flex;
     }

     .topbar__left {
         display: flex;
         gap: 3px;
         align-items: center;
     }

     .topbar__logo img {
         height: 35px;
     }

     .topbar {
         margin: 10px 16px 0;
         top: 10px;
     }

     .sidebar {
         position: fixed;
         top: 0;
         left: -300px;
         margin: 0;
         height: 100vh;
         max-height: 100vh;
         border-radius: 0 8px 8px 0;
         transition: left .3s ease;
     }

     .sidebar--open {
         left: -1px;
         top: 85px;
     }

     .main {
         margin-left: 0;
         padding: 20px 16px 0;
     }

     .charts3>* {
         flex-basis: 100%;
     }



     .agent__name {
         font-size: 18px;
         letter-spacing: -.5px;
     }

     .agent__icon {
         width: 60px;
         height: 60px;
         font-size: 28px;
         border-radius: 10px;
     }

     .agent {
         gap: 16px;
         padding: 16px;
     }

     .page-header h1 {
         font-size: 24px;
     }

     .section__title {
         font-size: 20px;
     }

     .footer {
         flex-direction: column;
         text-align: center;
     }

     .footer__text {
         font-size: 13px;
         text-align: center;
     }
 }

 @media (max-width: 480px) {
     .agent__name {
         font-size: 16px;
     }

     .filter__label {
         font-size: 16px;
     }

     .filter__btn {
         font-size: 16px;
         padding: 4px 14px;
     }
 }


 /* ═══════════════════════════════════════════════════════════
   NOVO AGENTE — page-specific styles
   ═══════════════════════════════════════════════════════════ */

 /* Header with back button */
 .page-header--row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
 }

 .page-header--row h1 {
     font-size: 25px;
 }



 .btn-back:hover {
     background: var(--verde-10);
 }

 /* Form cards */
 .form-card {
     background: rgba(9, 28, 39, 0.6);
     border: 1px solid rgba(41, 218, 170, .2);
     border-radius: 10px;
     padding: 24px;
     margin-bottom: 20px;
 }

 .form-card__title {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 18px;
     font-weight: 500;
     color: #fff;
     margin-bottom: 20px;
 }

 /* Form inputs */
 .form-input {
     width: 100%;
     background: rgba(9, 28, 39, 0.8);
     border: 1px solid rgba(41, 218, 170, .25);
     border-radius: 8px;
     padding: 12px 16px;
     font-family: 'Space Grotesk', sans-serif;
     font-size: 15px;
     color: rgba(255, 255, 255, .5);
     outline: none;
     transition: border-color .2s, color .2s;
 }

 .form-input:focus {
     border-color: var(--verde-50);
     color: #fff;
 }

 .form-input::placeholder {
     color: rgba(255, 255, 255, .3);
 }

 .form-textarea {
     min-height: 140px;
     resize: vertical;
     line-height: 1.5;
 }

 .page-message {
     margin: 16px 0;
     padding: 16px 18px;
     border-radius: 10px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 14px;
     color: rgba(255, 255, 255, .88);
     background: rgba(9, 28, 39, 1);
     border: 1px solid rgba(255, 255, 255, .1);
     border-left: 4px solid var(--azul);
     box-shadow: 0 12px 40px rgba(41, 218, 170, .1);
 }

 .page-message--success { border-left-color: var(--verde); }
 .page-message--error { border-left-color: var(--vermelho); }
 .page-message--alert { border-left-color: var(--amarelo); }
 .page-message--info { border-left-color: var(--azul); }

 .notification-list-item {
     width: 100%;
     align-items: flex-start;
     margin-bottom: 14px;
 }

 .notification-list-item--unread {
     box-shadow: 0 16px 46px rgba(41, 218, 170, .16);
 }

 .notification-list-item__content {
     display: flex;
     flex-direction: column;
     gap: 6px;
 }

 .notification-list-item__title {
     color: #fff;
     font-family: 'Space Grotesk', sans-serif;
     font-size: 17px;
     font-weight: 700;
 }

 .notification-list-item__meta {
     color: rgba(255, 255, 255, .48);
     font-family: 'JetBrains Mono', monospace;
     font-size: 12px;
 }

 .notification-list-item__details {
     margin-top: 4px;
     color: rgba(255, 255, 255, .72);
     line-height: 1.5;
 }

 .notification-list-item__actions {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     margin-left: auto;
 }

 .notification-list-item__action {
     text-decoration: none;
     font-size: 18px;
 }

 .notification-unread-dot {
     display: inline-block;
     width: 9px;
     height: 9px;
     margin-right: 8px;
     border-radius: 999px;
     background: var(--verde);
     box-shadow: 0 0 0 4px rgba(41, 218, 170, .14);
     vertical-align: middle;
 }

 .notification-pill {
     display: inline-flex;
     align-items: center;
     width: fit-content;
     min-height: 24px;
     padding: 4px 10px;
     border-radius: 999px;
     font-size: 12px;
     font-weight: 700;
     color: #fff;
 }

 .notification-pill--success {
     background: var(--verde);
 }

 .notification-pill--error {
     background: var(--vermelho);
 }

 .notification-pill--alert {
     background: var(--amarelo);
     color: #161616;
 }

 .notification-pill--info {
     background: var(--azul);
 }

 .notification-detail {
     border-left: 4px solid var(--azul);
 }

 .notification-record--success,
 .notification-detail.notification-record--success {
     border-left-color: var(--verde);
 }

 .notification-record--error,
 .notification-detail.notification-record--error {
     border-left-color: var(--vermelho);
 }

 .notification-record--alert,
 .notification-detail.notification-record--alert {
     border-left-color: var(--amarelo);
 }

 .notification-record--info,
 .notification-detail.notification-record--info {
     border-left-color: var(--azul);
 }

 .notification-detail__title {
     margin: 18px 0 12px;
     color: #fff;
     font-size: clamp(24px, 4vw, 38px);
     line-height: 1.08;
 }

 .notification-detail__meta {
     display: flex;
     flex-wrap: wrap;
     gap: 10px 18px;
     margin-bottom: 22px;
     color: rgba(255, 255, 255, .58);
     font-family: 'JetBrains Mono', monospace;
     font-size: 13px;
 }

 .notification-detail__body {
     color: rgba(255, 255, 255, .84);
     font-size: 16px;
     line-height: 1.65;
 }

 .notification-detail__body--empty {
     color: rgba(255, 255, 255, .5);
     font-style: italic;
 }

 .semantic-form-card {
     display: block;
 }

 .semantic-form-section {
     margin-bottom: 28px;
 }

 .semantic-form-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 16px;
 }

 .semantic-field--wide {
     grid-column: 1 / -1;
 }

 .semantic-table-section {
     border-top: 1px solid rgba(41, 218, 170, .2);
     border-radius: 10px;
     margin-top: 16px;
 }

 .semantic-actions {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .search-card {
     margin: 16px 0;
 }

 .pag-btn--active {
     border-color: var(--verde-50);
     color: var(--verde);
     background: var(--verde-10);
 }

 .semantic-results {
     display: grid;
     gap: 16px;
     margin-top: 16px;
 }

 .semantic-result-card {
     padding: 18px;
 }

 .semantic-result-card h3 {
     font-size: 18px;
     margin-bottom: 12px;
     color: var(--verde);
 }

 .placeholder-copy {
     color: rgba(255, 255, 255, .72);
     line-height: 1.6;
 }

 .form-label {
     display: block;
     font-family: 'JetBrains Mono', monospace;
     font-size: 12px;
     font-weight: 400;
     color: var(--verde);
     text-transform: uppercase;
     letter-spacing: .5px;
     margin: 16px 0 10px;
 }

 /* Icon picker */
 .icon-picker {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
 }

 .icon-option {
     width: 46px;
     height: 46px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     background: rgba(41, 218, 170, .07);
     border: 1px solid rgba(41, 218, 170, .2);
     border-radius: 8px;
     cursor: pointer;
     transition: border-color .2s, background .2s;
     flex-shrink: 0;
 }

 .icon-option:hover {
     background: rgba(41, 218, 170, .15);
     border-color: var(--verde-50);
 }

 .icon-option--selected {
     background: rgba(41, 218, 170, .2);
     border-color: var(--verde);
 }

 /* Rules section */
 .rules-condition {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 20px;
     flex-wrap: wrap;
 }

 .rules-condition__label {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 16px;
     color: #fff;
 }

 .form-select {
     appearance: none;
     -webkit-appearance: none;
     background: rgba(9, 28, 39, 0.8);
     border: 1px solid var(--verde-50);
     border-radius: 8px;
     padding: 7px 36px 7px 14px;
     font-family: 'Space Grotesk', sans-serif;
     font-size: 15px;
     color: var(--verde);
     outline: none;
     cursor: pointer;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2329daaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 12px center;
     transition: border-color .2s;
     min-height: 50px;
 }

 .form-select:focus {
     border-color: var(--verde);
 }

 .form-select--muted {
     border-color: rgba(41, 218, 170, .25);
     color: rgba(255, 255, 255, .4);
 }

 .rules-condition__text {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 15px;
     color: var(--verde);
 }

 .rule-row {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 12px;
     flex-wrap: wrap;
 }

 .rule-badge {
     width: 28px;
     height: 28px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid rgba(255, 255, 255, .25);
     border-radius: 6px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 13px;
     color: #fff;
     flex-shrink: 0;
 }

 .rule-field {
     flex: 1;
     min-width: 140px;
     background: rgba(9, 28, 39, 0.8);
     border: 1px solid rgba(41, 218, 170, .2);
     border-radius: 8px;
     padding: 8px 14px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 15px;
     color: var(--verde);
     outline: none;
     min-height: 50px;
 }

 .rule-operator {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 15px;
     color: rgba(255, 255, 255, .6);
     white-space: nowrap;
     flex-shrink: 0;
 }

 .rule-value {
     flex: 1;
     min-width: 120px;
     background: rgba(9, 28, 39, 0.8);
     border: 1px solid rgba(41, 218, 170, .2);
     border-radius: 8px;
     padding: 8px 14px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 15px;
     color: var(--amarelo);
     outline: none;
     min-height: 50px;
 }

 .rule-value::placeholder {
     color: rgba(255, 255, 255, .3);
 }

 .btn-rule-del {
     width: 34px;
     height: 34px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--vermelho);
     border: none;
     border-radius: 8px;
     color: #fff;
     font-size: 20px;
     cursor: pointer;
     flex-shrink: 0;
     transition: opacity .2s;
 }

 .btn-rule-del:hover {
     opacity: .8;
 }

 .btn-rule-add {
     width: 34px;
     height: 34px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--verde);
     border: none;
     border-radius: 8px;
     color: var(--azul-dark);
     font-size: 20px;
     font-weight: 700;
     cursor: pointer;
     flex-shrink: 0;
     transition: opacity .2s;
 }

 .btn-rule-add:hover {
     opacity: .85;
 }

 /* Code preview */
 .code-preview {
     background: rgba(4, 15, 23, .9);
     border: 1px solid rgba(41, 218, 170, .15);
     border-radius: 8px;
     padding: 16px 20px;
     margin-top: 16px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 13px;
     line-height: 1.7;
     color: rgba(255, 255, 255, .55);
 }

 .code-preview .c-fn {
     color: var(--verde);
 }

 .code-preview .c-key {
     color: var(--azul);
 }

 .code-preview .c-str {
     color: var(--amarelo);
 }

 .code-preview .c-arr {
     color: var(--verde);
 }

 /* Fluxo */
 .flow-option {
     display: flex;
     align-items: center;
     gap: 24px;
     padding: 20px;
     border: 1px solid rgba(41, 218, 170, .15);
     border-radius: 8px;
     margin-bottom: 12px;
     cursor: pointer;
     transition: border-color .2s, background .2s;
 }

 .flow-option:last-child {
     margin-bottom: 0;
 }

 .flow-option:hover {
     border-color: rgba(41, 218, 170, .35);
     background: rgba(41, 218, 170, .03);
 }

 .flow-option--selected {
     border-color: rgba(41, 218, 170, .35);
     background: rgba(41, 218, 170, .04);
 }

 .flow-radio {
     display: flex;
     align-items: center;
     gap: 8px;
     white-space: nowrap;
     flex-shrink: 0;
 }

 .flow-radio input[type="radio"] {
     appearance: none;
     -webkit-appearance: none;
     width: 14px;
     height: 14px;
     border: 1px solid rgba(41, 218, 170, .5);
     border-radius: 50%;
     cursor: pointer;
     position: relative;
     flex-shrink: 0;
 }

 .flow-radio input[type="radio"]:checked::before {
     content: '';
     position: absolute;
     inset: 2px;
     background: var(--verde);
     border-radius: 50%;
 }

 .flow-radio__label {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 15px;
     color: var(--verde);
     cursor: pointer;
 }

 .flow-steps {
     display: flex;
     align-items: flex-end;
     gap: 0;
     flex: 1;
     min-width: 0;
     overflow-x: auto;
     padding-bottom: 4px;
 }

 .step-wrap {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
     flex-shrink: 0;
 }

 .step-label {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 12px;
     color: rgba(255, 255, 255, .5);
     white-space: nowrap;
 }

 .step-circle {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     border: 2px solid;
     flex-shrink: 0;
 }

 .step-circle--blue {
     border-color: var(--azul);
     background: transparent;
     color: var(--azul);
 }

 .step-circle--green {
     border-color: var(--verde);
     background: var(--verde-13);
     color: var(--verde);
 }

 .step-circle--yellow {
     border-color: var(--amarelo);
     background: transparent;
     color: var(--amarelo);
 }

 .step-circle--red {
     border-color: var(--vermelho);
     background: transparent;
     color: var(--vermelho);
 }

 .step-circle--grey {
     border-color: rgba(255, 255, 255, .15);
     background: rgba(255, 255, 255, .05);
     color: rgba(255, 255, 255, .2);
 }

 .step-connector {
     flex: 1;
     height: 2px;
     background: rgba(41, 218, 170, .2);
     margin-bottom: 22px;
     min-width: 16px;
 }

 /* Save button */
 .form-actions {
     display: flex;
     justify-content: center;
     padding: 32px 0 20px;
 }

 .btn-save {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     height: 44px;
     padding: 0 40px;
     background: var(--verde);
     border: 1px solid var(--verde);
     border-radius: 8px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 15px;
     font-weight: 600;
     color: var(--azul-dark);
     transition: opacity .2s;
     cursor: pointer;
 }

 .btn-save:hover {
     opacity: .85;
 }

 @media (max-width: 768px) {
     .page-header--row h1 {
         font-size: 18px;
     }

     .btn-back {
         font-size: 15px;
         padding: 0 12px;
     }

     .flow-option {
         flex-direction: column;
         align-items: flex-start;
     }

     .flow-steps {
         width: 100%;
     }

     .rule-row {
         flex-wrap: wrap;
     }
 }


 /* ═══════════════════════════════════════════════════════════
   MALHA FISCAL — page-specific styles
   ═══════════════════════════════════════════════════════════ */

 .page-header--actions {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     flex-wrap: wrap;
 }

 .page-header--actions h1 {
     font-size: 25px;
 }

 .header-actions {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     flex-shrink: 0;
 }

 .btn-primary {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     height: 38px;
     padding: 0 20px;
     background: var(--verde);
     border: 1px solid var(--verde);
     border-radius: 8px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 15px;
     font-weight: 600;
     color: var(--azul-dark);
     cursor: pointer;
     white-space: nowrap;
     transition: opacity .2s;
 }

 .btn-primary:hover {
     opacity: .85;
 }

 .btn-outline {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     height: 38px;
     padding: 0 18px;
     background: transparent;
     border: 1px solid var(--verde-50);
     border-radius: 8px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 15px;
     font-weight: 600;
     color: var(--verde);
     cursor: pointer;
     white-space: nowrap;
     transition: background .2s;
 }

 .btn-outline:hover {
     background: var(--verde-10);
 }

 /* Card */
 .card {
     background: rgba(9, 28, 39, 0.55);
     border: 1px solid rgba(41, 218, 170, .2);
     border-radius: 10px;
     padding: 24px;
     margin-bottom: 16px;
 }

 /* Search form */
 .search-form {
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .form-row {
     display: flex;
     gap: 14px;
     flex-wrap: wrap;
 }

 .field {
     position: relative;
     flex: 1;
     min-width: 160px;
 }

 .field__input {
     width: 100%;
     background: transparent;
     border: 1px solid rgba(41, 218, 170, .25);
     border-radius: 8px;
     padding: 11px 14px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 15px;
     color: #fff;
     outline: none;
     transition: border-color .2s;
     appearance: none;
     -webkit-appearance: none;
     min-height: 50px;
 }

 .field__input:focus {
     border-color: var(--verde-50);
 }

 .field__input::placeholder {
     color: rgba(255, 255, 255, .2);
 }

 .field__input[type="date"]::-webkit-calendar-picker-indicator {
     filter: invert(.4);
     cursor: pointer;
 }

 .search-center {
     display: flex;
     justify-content: center;
     padding-top: 4px;
 }

 .btn-search {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     height: 40px;
     padding: 0 32px;
     background: var(--verde-10);
     border: 1px solid var(--verde-50);
     border-radius: 8px;
     font-family: 'Space Grotesk', sans-serif;
     font-size: 15px;
     font-weight: 500;
     color: var(--verde);
     cursor: pointer;
     transition: background .2s;
 }

 .btn-search:hover {
     background: rgba(41, 218, 170, .18);
 }

 /* Company card */
 .company-card {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 20px;
     flex-wrap: wrap;
 }

 .company-info {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 15px;
     color: rgba(255, 255, 255, .7);
     line-height: 1.3;
 }

 .company-info strong {
     font-size: 15px;
     font-weight: 600;
     color: #fff;
 }

 .btn-fiscalizar {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     height: 40px;
     padding: 0 22px;
     background: var(--verde);
     border: none;
     border-radius: 8px;
     font-family: 'Space Grotesk', sans-serif;
     font-size: 15px;
     font-weight: 600;
     color: var(--azul-dark);
     cursor: pointer;
     white-space: nowrap;
     flex-shrink: 0;
     transition: opacity .2s;
     align-self: end;
 }

 .btn-fiscalizar:hover {
     opacity: .85;
 }

 /* Year tabs */
 .year-tabs {
     display: flex;
     gap: 0;
     border-bottom: 1px solid rgba(41, 218, 170, .15);
     margin-bottom: 0;
     overflow-x: auto;
 }

 .year-tab {
     padding: 10px 20px;
     font-family: 'Space Grotesk', sans-serif;
     font-size: 15px;
     font-weight: 400;
     color: rgba(255, 255, 255, .4);
     cursor: pointer;
     border: none;
     background: transparent;
     border-bottom: 2px solid transparent;
     margin-bottom: -1px;
     white-space: nowrap;
     transition: color .2s;
 }

 .year-tab:hover {
     color: rgba(255, 255, 255, .7);
 }

 .year-tab--active {
     color: var(--verde);
     font-weight: 600;
     border-bottom-color: var(--verde);
     background: rgba(41, 218, 170, .06);
 }

 /* Data table */
 .table-section {
     background: rgba(9, 28, 39, 0.55);
     border: 1px solid rgba(41, 218, 170, .2);
     border-radius: 0 0 10px 10px;
     border-top: none;
     overflow-x: auto;
 }

 .table-block {
     margin-bottom: 16px;
 }

 .table-block .year-tabs {
     background: rgba(9, 28, 39, .55);
     border: 1px solid rgba(41, 218, 170, .2);
     border-radius: 10px 10px 0 0;
     border-bottom: 1px solid rgba(41, 218, 170, .15);
 }

 .data-table {
     width: 100%;
     border-collapse: collapse;
     font-family: 'JetBrains Mono', monospace;
     font-size: 15px;
 }

 .data-table thead tr {
     border-bottom: 1px solid rgba(41, 218, 170, .15);
 }

 .data-table th {
     padding: 14px 16px;
     font-family: 'Space Grotesk', sans-serif;
     font-size: 11px;
     font-weight: 700;
     color: rgba(255, 255, 255, .5);
     text-transform: uppercase;
     letter-spacing: .5px;
     text-align: left;
     white-space: nowrap;
 }

 .data-table td {
     padding: 13px 16px;
     color: rgba(255, 255, 255, .7);
     white-space: nowrap;
     border-bottom: 1px solid rgba(255, 255, 255, .04);
 }

 .data-table tbody tr:hover td {
     background: rgba(41, 218, 170, .04);
 }

 .data-table tbody tr:last-child td {
     border-bottom: none;
 }

 .data-table .col-period {
     font-weight: 600;
     color: #fff;
 }

 .data-table .thead-inner th {
     padding-top: 20px;
     border-top: 2px solid rgba(41, 218, 170, .15);
 }

 /* Value colour classes */
 .val-teal {
     color: var(--verde);
 }

 .val-red {
     color: var(--vermelho);
 }

 .val-green {
     color: #50b84d;
 }

 .val-muted {
     color: rgba(255, 255, 255, .35);
 }

 /* Pagination */
 .pagination {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 20px 0 8px;
 }

 .pag-btn {
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid rgba(41, 218, 170, .25);
     border-radius: 99px;
     background: transparent;
     color: rgba(255, 255, 255, .6);
     font-size: 22px;
     line-height: 1;
     cursor: pointer;
     transition: border-color .2s, color .2s;
     padding: 18px;
 }

 .pag-btn:hover:not(:disabled) {
     border-color: var(--verde-50);
     color: var(--verde);
 }

 .pag-btn:disabled {
     opacity: .3;
     cursor: default;
 }

 @media (max-width: 768px) {
     .page-header--actions h1 {
         font-size: 20px;
     }

     .header-actions {
         width: 100%;
         justify-content: flex-end;
     }

     .company-card {
         flex-direction: column;
     }

     .data-table th,
     .data-table td {
         padding: 10px 10px;
         font-size: 11px;
     }
 }


 /* ═══════════════════════════════════════════════════════════
   FISCALIZAÇÃO AGÊNTICA — page-specific styles
   ═══════════════════════════════════════════════════════════ */

 /* Agent detail header */
 .agent-detail__header {
     display: flex;
     align-items: flex-start;
     gap: 20px;
     margin-bottom: 20px;
 }

 .agent-detail__icon {
     width: 72px;
     height: 72px;
     flex-shrink: 0;
     background: rgba(255, 255, 255, .07);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 32px;
 }

 .agent-detail__meta {
     display: flex;
     flex-direction: column;
     gap: 5px;
 }

 .agent-detail__title-row {
     display: flex;
     align-items: center;
     gap: 12px;
     flex-wrap: wrap;
 }

 .agent-detail__name {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 26px;
     font-weight: 600;
     color: #fff;
     line-height: 1.2;
 }

 .agent-detail__name span {
     color: var(--verde);
 }

 .agent-status {
     display: inline-flex;
     align-items: center;
     height: 26px;
     padding: 0 12px;
     border-radius: 99px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 12px;
     font-weight: 600;
     border: 1px solid;
 }

 .agent-status--active {
     background: rgba(41, 218, 170, .1);
     border-color: var(--verde);
     color: var(--verde);
 }

 .agent-detail__type {
     font-family: 'JetBrains Mono', monospace;
     font-size: 13px;
     font-weight: 600;
     color: var(--verde);
 }

 .agent-detail__iter {
     font-family: 'JetBrains Mono', monospace;
     font-size: 13px;
     color: var(--azul);
 }

 /* Terminal */
 .terminal {
     background: rgba(4, 15, 23, .95);
     border: 1px solid rgba(41, 218, 170, .15);
     border-radius: 8px;
     margin-bottom: 20px;
     overflow: hidden;
 }

 .terminal__bar {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 16px;
     background: rgba(255, 255, 255, .04);
     border-bottom: 1px solid rgba(41, 218, 170, .1);
     font-family: 'JetBrains Mono', monospace;
     font-size: 12px;
     color: rgba(255, 255, 255, .4);
 }

 .terminal__sep {
     color: rgba(255, 255, 255, .2);
 }

 .terminal__body {
     padding: 16px 20px;
     display: flex;
     flex-direction: column;
     gap: 3px;
 }

 .terminal__line {
     font-family: 'JetBrains Mono', monospace;
     font-size: 13px;
     line-height: 1.7;
 }

 .terminal__line--cmd {
     color: rgba(255, 255, 255, .65);
 }

 .terminal__line--ok {
     color: var(--verde);
 }

 .terminal__line--warn {
     color: var(--amarelo);
 }

 .terminal__line--err {
     color: var(--vermelho);
 }

 /* Stats grid */
 .agent-stats {
     display: flex;
     gap: 12px;
     margin-bottom: 20px;
     flex-wrap: wrap;
 }

 .stat-box {
     flex: 1 1 calc(25% - 9px);
     min-width: 110px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 5px;
     padding: 22px 12px;
     background: rgba(255, 255, 255, .03);
     border: 1px solid rgba(255, 255, 255, .07);
     border-radius: 8px;
 }

 .stat-box__value {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 44px;
     font-weight: 700;
     line-height: 1;
 }

 .stat-box__value--verde {
     color: var(--verde);
 }

 .stat-box__value--amarelo {
     color: var(--amarelo);
 }

 .stat-box__value--vermelho {
     color: var(--vermelho);
 }

 .stat-box__label {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 13px;
     color: rgba(255, 255, 255, .5);
 }

 /* Tabs */
 .agent-tabs {
     display: flex;
     border-bottom: 1px solid rgba(41, 218, 170, .15);
     overflow-x: auto;
 }

 .agent-tab {
     padding: 12px 24px;
     font-family: 'Space Grotesk', sans-serif;
     font-size: 15px;
     font-weight: 400;
     color: rgba(255, 255, 255, .4);
     background: transparent;
     border: none;
     border-bottom: 2px solid transparent;
     margin-bottom: -1px;
     cursor: pointer;
     white-space: nowrap;
     transition: color .2s;
 }

 .agent-tab:hover {
     color: rgba(255, 255, 255, .7);
 }

 .agent-tab--active {
     color: #fff;
     font-weight: 600;
     border-bottom-color: var(--verde);
     background: rgba(41, 218, 170, .04);
 }

 /* Tab panels */
 .tab-panel {
     padding: 24px 0 4px;
 }

 .tab-panel--hidden {
     display: none;
 }

 .tab-panel__title {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 16px;
     font-weight: 500;
     color: rgba(255, 255, 255, .7);
     margin-bottom: 20px;
 }

 .tab-panel__empty {
     font-family: 'JetBrains Mono', monospace;
     font-size: 13px;
     color: rgba(255, 255, 255, .3);
 }

 /* Step count label below circle (extends step-wrap) */
 .step-count {
     font-family: 'JetBrains Mono', monospace;
     font-size: 11px;
     color: var(--amarelo);
     white-space: nowrap;
 }

 /* Flow steps variant — connector aligns with circle center */
 .flow-steps--detail {
     align-items: flex-start;
 }

 .flow-steps--detail .step-connector {
     margin-bottom: 0;
     margin-top: 44px;
 }

 @media (max-width: 768px) {
     .agent-detail__header {
         flex-direction: column;
     }

     .agent-detail__name {
         font-size: 20px;
     }

     .stat-box__value {
         font-size: 32px;
     }

     .stat-box {
         padding: 14px 10px;
     }

     .agent-tab {
         padding: 10px 16px;
         font-size: 15px;
     }
 }


 /* ═══════════════════════════════════════════════════════════
   IMPORTAÇÃO DIMP — page-specific styles
   ═══════════════════════════════════════════════════════════ */

 /* Upload form */
 .import-form {
     display: flex;
     gap: 16px;
     align-items: flex-start;
     margin-bottom: 20px;
     flex-wrap: wrap;
 }

 .import-form__selects {
     display: flex;
     flex-direction: column;
     gap: 10px;
     flex-shrink: 0;
 }

 .import-form__selects .form-select {
     min-width: 180px;
 }

 .file-drop {
     flex: 1;
     min-width: 220px;
     display: flex;
     align-items: center;
     gap: 16px;
     border: 1px dashed rgba(41, 218, 170, .25);
     border-radius: 8px;
     padding: 16px 20px;
     min-height: 110px;
     cursor: pointer;

 }

 .file-drop .btn-primary {
     cursor: pointer;
     flex-shrink: 0;
 }

 .file-drop__name {
     font-family: 'JetBrains Mono', monospace;
     font-size: 13px;
     color: rgba(255, 255, 255, .35);
     word-break: break-all;
 }

 /* Records section title */
 .import-data-title {
     font-family: 'Space Grotesk', sans-serif;
     font-size: 22px;
     font-weight: 600;
     color: #fff;
     margin-bottom: 16px;
 }

 /* Import record card (composes with .card) */
 .import-record {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 20px;
 }

 .import-record__info {
     flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .import-record__lines {
     display: flex;
     flex-direction: column;
     gap: 3px;
 }

 .import-record__line {
     display: flex;
     align-items: baseline;
     gap: 8px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 15px;
     line-height: 1.7;
 }

 .import-record__lbl {
     color: rgba(255, 255, 255, .45);
     flex-shrink: 0;
 }

 .import-record__val {
     color: var(--amarelo);
 }

 .import-record__val--file {
     word-break: break-all;
 }

 /* Status badges */
 .import-badges {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
 }

 .import-badge {
     display: inline-flex;
     align-items: center;

     padding: 6px 12px;
     border: 1px solid rgba(41, 218, 170, .35);
     border-radius: 6px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 14px;
     color: rgba(41, 218, 170, .65);
     white-space: nowrap;
 }

 .calculo-badge {
     display: inline-flex;
     align-items: center;

     padding: 6px 12px;
     border: 1px solid#0090BA;
     border-radius: 6px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 14px;
     color: #0090BA;
     white-space: nowrap;
 }


 /* Action icon buttons */
 .import-record__actions {
     display: flex;
     flex-direction: row;
     gap: 8px;
     flex-shrink: 0;
     align-self: center;
 }

 .btn-icon {
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 8px;
     font-size: 16px;
     cursor: pointer;
     border: none;
     transition: opacity .2s;
     flex-shrink: 0;
 }

 .btn-icon:hover {
     opacity: .8;
 }

 .btn-icon[disabled] {
     opacity: .45;
     cursor: wait;
 }

 .btn-icon--red {
     background: var(--vermelho);
     color: #fff;
 }

 .btn-icon--teal {
     background: var(--verde);
     color: var(--azul-dark);
     font-size: 18px;
 }

 @media (max-width: 768px) {
     .import-form {
         flex-direction: column;
     }

     .import-form__selects {
         flex-direction: row;
         flex-wrap: wrap;
     }

     .file-drop {
         min-height: 64px;
     }

     .import-record {
         flex-direction: column;
     }

     .import-record__actions {
         flex-direction: row;
     }
 }


 /* ═══════════════════════════════════════════════════════════
   LOGIN — page-specific styles
   ═══════════════════════════════════════════════════════════ */

 .login-page {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 24px;
     padding: 24px;
     background-image: url(../img/ui/blur-bg1.png), url(../img/ui/blur-bg2.png);
     background-position: top right, bottom left;
     background-repeat: no-repeat;
     background-size: 50%, 50%;
 }

 .login-card {
     width: 100%;
     max-width: 420px;
     background: rgba(9, 28, 39, 0.85);
     border: 1px solid rgba(41, 218, 170, .3);
     border-radius: 14px;
     padding: 48px 40px 40px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0;
 }

 .login-logo {
     display: flex;
     justify-content: center;
     margin-bottom: 32px;
 }

 .login-logo img {
     height: 56px;
     width: auto;
 }

 .login-divider {
     width: 100%;
     height: 1px;
     background: rgba(41, 218, 170, .15);
     margin-bottom: 32px;
 }

 .login-form {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .login-input {
     font-size: 15px;
     padding: 14px 16px;
     height: auto;
 }

 .login-input--error {
     border-color: var(--vermelho) !important;
 }

 .login-submit {
     width: 100%;
     justify-content: center;
     height: 48px;
     font-size: 15px;
     margin-top: 8px;
     letter-spacing: .5px;
 }

 .login-forgot {
     text-align: center;
     font-family: 'JetBrains Mono', monospace;
     font-size: 13px;
     color: rgba(255, 255, 255, .35);
     transition: color .2s;
     margin-top: 4px;
 }

 .login-forgot:hover {
     color: var(--verde);
 }

 .login-footer {
     font-family: 'JetBrains Mono', monospace;
     font-size: 12px;
     color: rgba(41, 218, 170, .4);
     letter-spacing: .3px;
 }

 @media (max-width: 480px) {
     .login-card {
         padding: 36px 24px 32px;
     }

     .login-logo img {
         height: 44px;
     }
 }

 /* ── NOTIFICAÇÕES (TOASTS) ───────────────────────────── */

 /* Container fixo, centralizado na tela */
 .toast-container {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     flex-direction: column;
     gap: 12px;
     z-index: 9999;
     pointer-events: none;
     width: 440px;
     max-width: calc(100vw - 32px);
 }

 .toast {
     pointer-events: all;
     display: flex;
     align-items: center;
     gap: 14px;
     background: rgba(9, 28, 39, 1);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-left: 4px solid transparent;
     border-radius: 10px;
     padding: 16px 18px;
     box-shadow: 0 12px 40px rgba(41, 218, 170, 0.1);
 }

 .toast--hiding {
     animation: toast-out .28s ease forwards !important;
 }

 @keyframes toast-in {
     from {
         opacity: 0;
         transform: translateY(-14px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes toast-out {
     from {
         opacity: 1;
         transform: translateY(0);
     }

     to {
         opacity: 0;
         transform: translateY(-14px);
     }
 }

 .toast--success {
     border-left-color: var(--verde);
 }

 .toast--error {
     border-left-color: var(--vermelho);
 }

 .toast--alert {
     border-left-color: var(--amarelo);
 }

 .toast--info {
     border-left-color: var(--azul);
 }

 .toast__icon {
     font-size: 22px;
     flex-shrink: 0;
 }

 .toast--success .toast__icon {
     color: var(--verde);
 }

 .toast--error .toast__icon {
     color: var(--vermelho);
 }

 .toast--alert .toast__icon {
     color: var(--amarelo);
 }

 .toast--info .toast__icon {
     color: var(--azul);
 }

 .toast__msg {
     flex: 1;
     font-size: 14px;
     color: rgba(255, 255, 255, .88);
     line-height: 1.45;
 }

 .toast__close {
     flex-shrink: 0;
     color: rgba(255, 255, 255, .35);
     font-size: 15px;
     transition: color .2s;
     padding: 2px 4px;
 }

 .toast__close:hover {
     color: #fff;
 }

 /* ── DEMO PAGE ───────────────────────────────────────── */
 .toast-demo {
     display: flex;
     flex-direction: column;
     gap: 32px;
 }

 .toast-demo__desc {
     font-size: 14px;
     color: rgba(255, 255, 255, .5);
     font-family: 'JetBrains Mono', monospace;
 }

 .toast-demo__btns {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
 }

 .toast-trigger {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 12px 22px;
     border-radius: 8px;
     font-family: 'Space Grotesk', sans-serif;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: .4px;
     transition: opacity .2s, transform .15s;
 }

 .toast-trigger:hover {
     opacity: .85;
     transform: translateY(-1px);
 }

 .toast-trigger:active {
     transform: translateY(0);
 }

 .toast-trigger--success {
     background: rgba(41, 218, 170, .12);
     border: 1px solid var(--verde);
     color: var(--verde);
 }

 .toast-trigger--error {
     background: rgba(242, 82, 85, .12);
     border: 1px solid var(--vermelho);
     color: var(--vermelho);
 }

 .toast-trigger--alert {
     background: rgba(255, 181, 0, .12);
     border: 1px solid var(--amarelo);
     color: var(--amarelo);
 }

 .toast-trigger--info {
     background: rgba(0, 144, 186, .12);
     border: 1px solid var(--azul);
     color: var(--azul-bright);
 }

 /* Preview estático */
 .toast-preview {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .toast-preview__label {
     font-family: 'JetBrains Mono', monospace;
     font-size: 11px;
     color: rgba(255, 255, 255, .3);
     letter-spacing: .5px;
     text-transform: uppercase;
     margin-bottom: 4px;
 }

 .toast--static {
     animation: none;
     pointer-events: all;
 }

 @media (max-width: 600px) {
     .toast-demo__btns {
         flex-direction: column;
     }

     .toast-trigger {
         justify-content: center;
     }
 }

/* ── MODAIS ──────────────────────────────────────────── */

 .modal-backdrop {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(5px);
     z-index: 2000;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 16px;
     opacity: 0;
     pointer-events: none;
     animation: none;
 }

 .modal-backdrop--open {
     opacity: 1;
     pointer-events: all;
     animation: backdrop-in .22s ease forwards;
 }

 .modal-backdrop--closing {
     animation: backdrop-out .22s ease forwards;
 }

 @keyframes backdrop-in {
     from { opacity: 0; }
     to   { opacity: 1; }
 }

 @keyframes backdrop-out {
     from { opacity: 1; }
     to   { opacity: 0; }
 }

 .modal {
     position: relative;
     width: 100%;
     max-width: 420px;
     background: rgba(9, 28, 39, 0.97);
     border: 1px solid rgba(255, 255, 255, .08);
     border-top: 4px solid transparent;
     border-radius: 14px;
     padding: 44px 36px 36px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
     box-shadow: 0 24px 72px rgba(0, 0, 0, .65);
     transform: scale(.94) translateY(12px);
     transition: transform .25s ease;
 }

 .modal-backdrop--open .modal {
     transform: scale(1) translateY(0);
 }

 .modal--success { border-top-color: var(--verde); }
 .modal--error   { border-top-color: var(--vermelho); }
 .modal--alert   { border-top-color: var(--amarelo); }
 .modal--info    { border-top-color: var(--azul); }

 /* X de fechar */
 .modal__close-x {
     position: absolute;
     top: 14px;
     right: 16px;
     color: rgba(255, 255, 255, .3);
     font-size: 18px;
     transition: color .2s;
     padding: 4px;
 }

 .modal__close-x:hover { color: #fff; }

 /* Ícone com fundo circular */
 .modal__icon-wrap {
     width: 72px;
     height: 72px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 4px;
 }

 .modal__icon-wrap--success { background: rgba(41, 218, 170, .12); }
 .modal__icon-wrap--error   { background: rgba(242, 82, 85, .12); }
 .modal__icon-wrap--alert   { background: rgba(255, 181, 0, .12); }
 .modal__icon-wrap--info    { background: rgba(0, 144, 186, .12); }

 .modal__icon {
     font-size: 36px;
     line-height: 1;
 }

 .modal--success .modal__icon { color: var(--verde); }
 .modal--error   .modal__icon { color: var(--vermelho); }
 .modal--alert   .modal__icon { color: var(--amarelo); }
 .modal--info    .modal__icon { color: var(--azul-bright); }

 .modal__title {
     font-size: 18px;
     font-weight: 700;
     color: #fff;
     letter-spacing: .2px;
 }

 .modal__msg {
     font-size: 14px;
     color: rgba(255, 255, 255, .55);
     text-align: center;
     line-height: 1.55;
     max-width: 300px;
 }

 .modal__actions {
     display: flex;
     gap: 10px;
     margin-top: 12px;
 }

 .modal__btn {
     padding: 10px 30px;
     border-radius: 8px;
     font-family: 'Space Grotesk', sans-serif;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: .4px;
     border: 1px solid transparent;
     transition: opacity .2s, transform .15s;
 }

 .modal__btn:hover  { opacity: .84; transform: translateY(-1px); }
 .modal__btn:active { transform: translateY(0); }

 .modal__btn--success { background: var(--verde);    color: var(--azul-dark); }
 .modal__btn--error   { background: var(--vermelho); color: #fff; }
 .modal__btn--alert   { background: var(--amarelo);  color: var(--azul-dark); }
 .modal__btn--info    { background: var(--azul);     color: #fff; }

 .modal__btn--alert--outline {
     background: transparent;
     border-color: rgba(255, 181, 0, .4);
     color: rgba(255, 255, 255, .6);
 }

 .modal__btn--alert--outline:hover { color: #fff; border-color: var(--amarelo); }

 /* Preview grid (sem backdrop) */
 .modal-preview-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
 }

 .modal--preview {
     position: static;
     transform: none;
     max-width: 100%;
     padding: 32px 24px 28px;
     transition: none;
 }

 @media (max-width: 680px) {
     .modal-preview-grid { grid-template-columns: 1fr; }
 }

 @media (max-width: 1024px) {
     .semantic-form-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 }

 @media (max-width: 680px) {
     .semantic-form-grid {
         grid-template-columns: 1fr;
     }
 }