@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap");

      :root {
        --bg: #f7f8fb;
        --surface: rgba(255, 255, 255, 0.88);
        --card: #ffffff;
        --text: #465064;
        --heading: #253047;
        --muted: #8a93a5;
        --border: #eceef3;
        --primary: #6f82a3;
        --primary-soft: #eef2f8;
        --secondary: #9b91b7;
        --danger: #c98791;
        --warning: #caa36f;
        --success: #7ba696;
        --shadow-sm: 0 6px 20px rgba(41, 52, 73, 0.045);
        --shadow-hover: 0 14px 34px rgba(41, 52, 73, 0.075);
        --radius: 18px;
        --radius-sm: 12px;
        --ease: cubic-bezier(0.22, 1, 0.36, 1);
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        min-height: 100vh;
        font-family:
          "Manrope",
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
        font-weight: 400;
        color: var(--text);
        background:
          radial-gradient(circle at 5% 0%, rgba(155, 145, 183, 0.075), transparent 28rem),
          radial-gradient(circle at 96% 4%, rgba(111, 130, 163, 0.07), transparent 30rem), var(--bg);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }

      button,
      input,
      select {
        font: inherit;
      }
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      button {
        -webkit-tap-highlight-color: transparent;
      }

      .container {
        width: min(100% - 40px, 1500px);
        margin: 0 auto;
        padding: 24px 0 46px;
      }

      .hero {
        position: relative;
        overflow: hidden;
        padding: 24px 28px;
        margin-bottom: 18px;
        color: var(--heading);
        border: 1px solid rgba(255, 255, 255, 0.92);
        border-radius: 20px;
        background:
          linear-gradient(115deg, rgba(255, 255, 255, 0.95), rgba(247, 249, 253, 0.91)),
          linear-gradient(135deg, rgba(111, 130, 163, 0.1), rgba(155, 145, 183, 0.08));
        box-shadow: var(--shadow-sm);
        backdrop-filter: blur(18px);
        animation: fadeUp 0.55s var(--ease) both;
      }

      .hero::before {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        right: -100px;
        top: -120px;
        border-radius: 50%;
        background: rgba(155, 145, 183, 0.09);
        pointer-events: none;
      }

      .hero::after {
        content: "";
        position: absolute;
        left: 0;
        top: 22px;
        bottom: 22px;
        width: 3px;
        border-radius: 0 8px 8px 0;
        background: linear-gradient(180deg, #8293b1, #aaa0c1);
        opacity: 0.75;
      }

      .hero h1 {
        position: relative;
        z-index: 1;
        margin: 0;
        font-size: clamp(23px, 2.4vw, 30px);
        line-height: 1.25;
        font-weight: 600;
        letter-spacing: -0.035em;
      }

      .hero p {
        position: relative;
        z-index: 1;
        max-width: 760px;
        margin: 7px 0 0;
        color: #7b8496;
        font-size: 13.5px;
        line-height: 1.65;
        font-weight: 400;
      }

      .hero-info {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 17px;
      }

      .hero-pill {
        padding: 7px 10px;
        border: 1px solid #e7eaf0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.72);
        color: #737d90;
        font-size: 11.5px;
        font-weight: 500;
        box-shadow: 0 2px 8px rgba(41, 52, 73, 0.025);
      }

      .filters {
        display: grid;
        grid-template-columns: 185px 185px minmax(280px, 1fr) auto;
        gap: 13px;
        align-items: end;
        margin-bottom: 13px;
        padding: 16px;
        border: 1px solid rgba(234, 237, 243, 0.95);
        border-radius: 17px;
        background: var(--surface);
        box-shadow: var(--shadow-sm);
        backdrop-filter: blur(16px);
        animation: fadeUp 0.55s 0.05s var(--ease) both;
      }

      .field label {
        display: block;
        margin-bottom: 7px;
        color: #929aab;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.055em;
        text-transform: uppercase;
      }

      .field input,
      .field select {
        width: 100%;
        height: 42px;
        padding: 0 13px;
        border: 1px solid #e4e7ed;
        border-radius: 11px;
        outline: none;
        color: #4a5366;
        background: rgba(250, 251, 253, 0.96);
        font-size: 13px;
        transition:
          border-color 0.25s var(--ease),
          box-shadow 0.25s var(--ease),
          background 0.25s var(--ease),
          transform 0.25s var(--ease);
      }

      .field input:hover,
      .field select:hover {
        background: #fff;
        border-color: #d9dde6;
      }
      .filter-actions {
        display: flex;
        align-items: center;
        gap: 9px;
      }
      .btn-secondary {
        color: #6f788a;
        border-color: #e2e6ed;
        background: #f7f8fa;
        box-shadow: none;
      }
      .btn-secondary:hover {
        color: #556176;
        background: #fff;
        box-shadow: 0 8px 18px rgba(41, 52, 73, 0.07);
      }
      .table-mini-filter {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 0 0 12px;
      }
      .table-mini-filter label {
        color: #929aab;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.055em;
        text-transform: uppercase;
        white-space: nowrap;
      }
      .table-mini-filter input {
        width: min(100%, 360px);
        height: 38px;
        padding: 0 12px;
        border: 1px solid #e4e7ed;
        border-radius: 10px;
        outline: none;
        color: #4a5366;
        background: rgba(250, 251, 253, 0.96);
      }
      .client-link {
        color: #7890b8;
        font-weight: 600;
        text-decoration: none;
      }
      .client-link:hover {
        text-decoration: underline;
      }
      .message-cell {
        min-width: 260px;
        max-width: 520px;
        white-space: normal;
        word-break: break-word;
      }
      .field input:focus,
      .field select:focus {
        border-color: rgba(111, 130, 163, 0.48);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(111, 130, 163, 0.085);
        transform: translateY(-1px);
      }

      .btn {
        position: relative;
        overflow: hidden;
        height: 42px;
        padding: 0 19px;
        border: 1px solid rgba(111, 130, 163, 0.15);
        border-radius: 11px;
        color: #536683;
        background: linear-gradient(180deg, #f4f7fb, #e9eef6);
        box-shadow:
          0 5px 14px rgba(91, 107, 135, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.82);
        cursor: pointer;
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: -0.01em;
        transition:
          transform 0.28s var(--ease),
          box-shadow 0.28s var(--ease),
          color 0.28s var(--ease),
          background 0.28s var(--ease);
      }

      .btn::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.65) 48%, transparent 72%);
        transform: translateX(-120%);
        transition: transform 0.65s var(--ease);
      }

      .btn:hover {
        color: #465b7a;
        background: linear-gradient(180deg, #f8faff, #eaf0f8);
        transform: translateY(-2px);
        box-shadow:
          0 10px 22px rgba(91, 107, 135, 0.14),
          inset 0 1px 0 #fff;
      }
      .btn:hover::after {
        transform: translateX(120%);
      }
      .btn:active {
        transform: translateY(0) scale(0.985);
      }
      .btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
      }

      .quick-filters,
      .page-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }
      .quick-filters {
        margin-bottom: 15px;
      }
      .page-tabs {
        margin-bottom: 18px;
      }

      .chip,
      .tab {
        position: relative;
        padding: 8px 12px;
        border: 1px solid #e7eaf0;
        border-radius: 999px;
        color: #7c8597;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 3px 10px rgba(41, 52, 73, 0.025);
        cursor: pointer;
        font-size: 11.8px;
        font-weight: 500;
        transition:
          transform 0.25s var(--ease),
          border-color 0.25s var(--ease),
          background 0.25s var(--ease),
          color 0.25s var(--ease),
          box-shadow 0.25s var(--ease);
      }

      .chip:hover,
      .tab:hover {
        color: #60728f;
        border-color: #d8deea;
        background: #fff;
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(41, 52, 73, 0.06);
      }
      .chip:active,
      .tab:active {
        transform: translateY(0) scale(0.97);
      }

      .tab.active {
        color: #536683;
        border-color: #dce2ec;
        background: linear-gradient(180deg, #f5f7fb, #e9eef6);
        box-shadow:
          inset 0 1px 0 #fff,
          0 5px 14px rgba(91, 107, 135, 0.08);
      }

      .status {
        display: none;
        margin-bottom: 16px;
        padding: 11px 14px;
        border: 1px solid transparent;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
      }
      .status.show {
        display: block;
        animation: fadeUp 0.3s var(--ease) both;
      }
      .status.loading {
        color: #60718d;
        background: #f1f4f8;
        border-color: #e4e9f0;
      }
      .status.error {
        color: #9e6069;
        background: #fbf1f2;
        border-color: #f2dfe2;
      }
      .status.ok {
        color: #5d7f72;
        background: #f0f6f3;
        border-color: #dfece6;
      }

      .kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 18px;
      }

      .kpi-grid-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .monitor-sections {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        margin-bottom: 18px;
      }

      .monitor-sections .section {
        min-width: 0;
        margin-bottom: 0;
      }

      .monitor-sections .kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 0;
      }

      .monitor-sections .kpi-card {
        min-height: 118px;
      }

      .kpi-card {
        position: relative;
        overflow: hidden;
        min-height: 126px;
        padding: 17px 18px;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: var(--shadow-sm);
        transition:
          transform 0.32s var(--ease),
          box-shadow 0.32s var(--ease),
          border-color 0.32s var(--ease);
        animation: fadeUp 0.5s var(--ease) both;
      }

      .kpi-card:hover {
        transform: translateY(-4px);
        border-color: #e1e5ec;
        box-shadow: var(--shadow-hover);
      }

      .kpi-card::after {
        content: "";
        position: absolute;
        width: 72px;
        height: 72px;
        right: -34px;
        top: -35px;
        border-radius: 50%;
        background: rgba(111, 130, 163, 0.055);
        transition: transform 0.45s var(--ease);
      }
      .kpi-card:hover::after {
        transform: scale(1.2);
      }
      .kpi-card.purple::after {
        background: rgba(155, 145, 183, 0.065);
      }
      .kpi-card.success::after {
        background: rgba(123, 166, 150, 0.07);
      }
      .kpi-card.warning::after {
        background: rgba(202, 163, 111, 0.075);
      }
      .kpi-card.danger::after {
        background: rgba(201, 135, 145, 0.07);
      }

      .kpi-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .kpi-title {
        color: #7c8597;
        font-size: 11.8px;
        font-weight: 500;
      }

      .kpi-icon {
        display: grid;
        place-items: center;
        width: 33px;
        height: 33px;
        border: 1px solid rgba(111, 130, 163, 0.08);
        border-radius: 10px;
        background: #f3f6fa;
        font-size: 15px;
        filter: saturate(0.62);
        transition:
          transform 0.3s var(--ease),
          filter 0.3s var(--ease);
      }
      .kpi-card:hover .kpi-icon {
        transform: rotate(-4deg) scale(1.04);
        filter: saturate(0.85);
      }
      .kpi-card.purple .kpi-icon {
        background: #f5f2f8;
      }
      .kpi-card.success .kpi-icon {
        background: #f0f6f3;
      }
      .kpi-card.warning .kpi-icon {
        background: #faf6ef;
      }
      .kpi-card.danger .kpi-icon {
        background: #faf1f2;
      }

      .kpi-value {
        position: relative;
        z-index: 1;
        margin-top: 13px;
        color: var(--heading);
        font-size: clamp(23px, 1.9vw, 29px);
        line-height: 1;
        font-weight: 600;
        letter-spacing: -0.045em;
      }

      .kpi-sub {
        position: relative;
        z-index: 1;
        margin-top: 8px;
        color: #969dac;
        font-size: 10.8px;
        line-height: 1.45;
        font-weight: 400;
      }

      .kpi-value-row {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
        gap: 9px;
        margin-top: 13px;
      }

      .kpi-value-row .kpi-value {
        margin-top: 0;
      }

      .kpi-trend {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 1px;
        padding: 4px 7px;
        border: 1px solid rgba(125, 148, 189, 0.22);
        border-radius: 999px;
        color: #b8c6d9;
        background: rgba(125, 148, 189, 0.1);
        font-size: 9.8px;
        line-height: 1;
        font-weight: 600;
        white-space: nowrap;
      }

      .kpi-trend.positive {
        color: #b2cdbd;
        border-color: rgba(120, 160, 138, 0.27);
        background: rgba(120, 160, 138, 0.11);
      }

      .kpi-trend.negative {
        color: #d8a9b0;
        border-color: rgba(191, 123, 134, 0.27);
        background: rgba(191, 123, 134, 0.11);
      }

      .kpi-trend.neutral {
        color: #b8c6d9;
        border-color: rgba(125, 148, 189, 0.23);
        background: rgba(125, 148, 189, 0.1);
      }

      .kpi-trend.flat {
        color: #aab4c1;
        border-color: rgba(148, 163, 184, 0.18);
        background: rgba(148, 163, 184, 0.08);
      }

      .section {
        margin-bottom: 18px;
        padding: 19px;
        border: 1px solid var(--border);
        border-radius: 17px;
        background: rgba(255, 255, 255, 0.93);
        box-shadow: var(--shadow-sm);
        animation: fadeUp 0.5s var(--ease) both;
      }

      .section-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 15px;
      }
      .section h2 {
        margin: 0;
        color: var(--heading);
        font-size: 15.5px;
        font-weight: 600;
        letter-spacing: -0.025em;
      }
      .section-caption {
        margin-top: 4px;
        color: #929aab;
        font-size: 11.5px;
        line-height: 1.5;
      }

      .charts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px;
      }
      .chart-box {
        height: 370px;
        padding: 15px 14px 10px;
        border: 1px solid #eef0f4;
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(253, 253, 255, 0.98), rgba(249, 250, 252, 0.94));
        transition:
          transform 0.3s var(--ease),
          box-shadow 0.3s var(--ease);
      }
      .chart-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(41, 52, 73, 0.055);
      }

      .graph-summary-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 14px;
      }

      .metric-guide {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        padding-top: 14px;
        border-top: 1px solid #eef0f4;
      }

      .metric-guide-item {
        padding: 11px 12px;
        border: 1px solid #edf0f4;
        border-radius: 11px;
        color: #7f8798;
        background: #fafbfd;
        font-size: 10.8px;
        line-height: 1.55;
      }

      .metric-guide-item strong {
        color: #445068;
        font-weight: 600;
      }

      .chart-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .chart-grid.three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .chart-card {
        min-width: 0;
        padding: 16px;
        border: 1px solid #ebedf2;
        border-radius: 15px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 252, 0.96));
        box-shadow: 0 5px 18px rgba(41, 52, 73, 0.035);
        transition:
          transform 0.28s var(--ease),
          box-shadow 0.28s var(--ease),
          border-color 0.28s var(--ease);
      }

      .chart-card:hover {
        transform: translateY(-2px);
        border-color: #e1e5ec;
        box-shadow: 0 12px 28px rgba(41, 52, 73, 0.06);
      }

      .chart-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        min-height: 76px;
        margin-bottom: 8px;
      }

      .chart-card h3 {
        margin: 0;
        color: #344057;
        font-size: 13px;
        line-height: 1.35;
        font-weight: 600;
        letter-spacing: -0.015em;
      }

      .chart-card p {
        max-width: 560px;
        margin: 5px 0 0;
        color: #9098a8;
        font-size: 10.6px;
        line-height: 1.55;
      }

      .chart-highlight {
        flex: 0 0 auto;
        max-width: 145px;
        padding: 6px 9px;
        border: 1px solid #e4e8ef;
        border-radius: 999px;
        color: #65738a;
        background: #f6f8fb;
        font-size: 9.8px;
        line-height: 1.3;
        font-weight: 600;
        text-align: center;
      }

      .chart-highlight.warning {
        color: #8b6b39;
        background: #fbf6ef;
        border-color: #efe3d1;
      }
      .chart-highlight.danger {
        color: #985e67;
        background: #fbf1f2;
        border-color: #f0dde0;
      }
      .chart-highlight.success {
        color: #54766a;
        background: #f0f6f3;
        border-color: #dfeae5;
      }

      .chart-visual {
        position: relative;
        height: 310px;
      }

      .chart-visual.tall {
        height: 390px;
      }

      .chart-empty {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        padding: 20px;
        color: #99a0ad;
        font-size: 11px;
        text-align: center;
      }

      .chart-footnote {
        min-height: 38px;
        margin-top: 9px;
        padding-top: 9px;
        border-top: 1px solid #eff1f5;
        color: #9299a7;
        font-size: 9.9px;
        line-height: 1.5;
      }

      .chart-footnote strong {
        color: #677389;
        font-weight: 600;
      }

      .section-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        flex-wrap: wrap;
      }

      .export-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-width: 148px;
      }

      .client-stats-note {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin: 2px 0 16px;
      }

      .client-stats-note > div {
        padding: 11px 12px;
        border: 1px solid #edf0f4;
        border-radius: 11px;
        color: #7f8798;
        background: #fafbfd;
        font-size: 10.8px;
        line-height: 1.55;
      }

      .client-stats-note strong {
        color: #445068;
        font-weight: 600;
      }

      .stats-period {
        white-space: nowrap;
        color: #69758a;
        font-weight: 500;
      }

      .stats-hours {
        max-width: 300px;
        white-space: normal;
        word-break: break-word;
      }

      .stats-empty-hint {
        padding: 14px;
        border: 1px dashed #dfe4ec;
        border-radius: 12px;
        color: #8b94a5;
        background: #fafbfd;
        font-size: 11px;
        line-height: 1.55;
      }

      .table-wrap {
        overflow-x: auto;
        border: 1px solid #eceef3;
        border-radius: 13px;
      }
      table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 11.8px;
      }
      th {
        padding: 12px 13px;
        border-bottom: 1px solid #eceef3;
        color: #7f8798;
        background: #fafbfc;
        text-align: left;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
      }
      td {
        padding: 12px 13px;
        border-bottom: 1px solid #f0f1f4;
        color: #596275;
        vertical-align: top;
        line-height: 1.5;
        background: #fff;
        transition: background 0.2s ease;
      }
      tbody tr:last-child td {
        border-bottom: 0;
      }
      tbody tr:hover td {
        background: #fafbfd;
      }
      td strong {
        color: #39445a;
        font-weight: 600;
      }
      small {
        color: var(--muted);
      }

      .badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border: 1px solid rgba(155, 145, 183, 0.08);
        border-radius: 999px;
        color: #726b8c;
        background: #f5f2f8;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
      }
      .badge-danger {
        color: #a2646d;
        background: #fbf1f2;
        border-color: #f5e2e5;
      }
      .badge-warning {
        color: #957240;
        background: #fbf6ef;
        border-color: #f2e8d9;
      }
      .badge-success {
        color: #5e7f73;
        background: #f0f6f3;
        border-color: #e0ece7;
      }

      details {
        margin-top: 6px;
      }
      summary {
        color: #7183a0;
        cursor: pointer;
        font-size: 10.7px;
        font-weight: 500;
        transition: color 0.2s ease;
      }
      summary:hover {
        color: #536683;
      }
      pre {
        max-height: 260px;
        overflow: auto;
        margin: 8px 0 0;
        padding: 12px;
        border: 1px solid #e2e5eb;
        border-radius: 10px;
        color: #596275;
        background: #f7f8fa;
        font:
          11px/1.55 ui-monospace,
          SFMono-Regular,
          Consolas,
          monospace;
        white-space: pre-wrap;
        word-break: break-word;
      }

      .dt-container {
        padding: 12px 13px 9px;
      }
      .dt-layout-row {
        align-items: center !important;
        gap: 10px;
      }
      .dt-search label,
      .dt-length label,
      .dt-info {
        color: #929aab;
        font-size: 10.8px;
      }
      .dt-search input,
      .dt-length select {
        border: 1px solid #e1e4ea !important;
        border-radius: 9px !important;
        background: #fff !important;
        color: var(--text) !important;
        outline: none !important;
        transition:
          box-shadow 0.2s ease,
          border-color 0.2s ease;
      }
      .dt-search input:focus,
      .dt-length select:focus {
        border-color: #ccd4e1 !important;
        box-shadow: 0 0 0 3px rgba(111, 130, 163, 0.07) !important;
      }
      .dt-search input {
        padding: 6px 8px !important;
      }
      .dt-length select {
        padding: 5px 7px !important;
      }
      .dt-paging-button {
        border-radius: 8px !important;
        color: #81899a !important;
        font-size: 10.8px !important;
        transition: all 0.2s ease !important;
      }
      .dt-paging-button:hover {
        background: #f3f5f8 !important;
        border-color: #e5e8ee !important;
        color: #5f6f89 !important;
      }
      .dt-paging-button.current {
        color: #5d6f8b !important;
        border-color: #dfe4ed !important;
        background: #eef2f7 !important;
      }

      .hidden {
        display: none !important;
      }

      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
      }

      @media (max-width: 1120px) {
        .filters {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .kpi-grid,
        .kpi-grid-summary {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .monitor-sections {
          grid-template-columns: 1fr;
        }
        .monitor-sections .kpi-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .charts,
        .chart-grid,
        .chart-grid.three {
          grid-template-columns: 1fr;
        }
        .graph-summary-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .metric-guide {
          grid-template-columns: 1fr;
        }
        .client-stats-note {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 650px) {
        .container {
          width: min(100% - 22px, 1500px);
          padding-top: 11px;
        }
        .hero {
          padding: 21px 19px;
          border-radius: 17px;
        }
        .hero::after {
          top: 18px;
          bottom: 18px;
        }
        .filters,
        .kpi-grid,
        .kpi-grid-summary,
        .monitor-sections .kpi-grid {
          grid-template-columns: 1fr;
        }
        .filters {
          padding: 14px;
        }
        .section {
          padding: 15px;
          border-radius: 15px;
        }
        .chart-box {
          height: 320px;
        }
        .graph-summary-grid {
          grid-template-columns: 1fr;
        }
        .chart-card-header {
          display: block;
          min-height: 0;
        }
        .chart-highlight {
          display: inline-flex;
          margin-top: 9px;
          max-width: none;
        }
        .chart-visual,
        .chart-visual.tall {
          height: 310px;
        }
      }

      .login-page {
        min-height: 100vh;
        display: grid;
        place-items: center;
        padding: 24px;
      }

      .login-card {
        width: min(100%, 430px);
        padding: 32px;
        border: 1px solid rgba(255, 255, 255, 0.92);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 24px 70px rgba(41, 52, 73, 0.12);
        backdrop-filter: blur(18px);
        animation: fadeUp 0.45s var(--ease) both;
      }

      .login-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 24px;
      }

      .login-logo {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 14px;
        color: #fff;
        background: linear-gradient(135deg, #7185a7, #9b91b7);
        font-size: 20px;
        font-weight: 600;
        box-shadow: 0 10px 24px rgba(111, 130, 163, 0.22);
      }

      .login-brand h1 {
        margin: 0;
        color: var(--heading);
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -0.035em;
      }

      .login-brand p {
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 12px;
      }

      .login-field {
        margin-bottom: 15px;
      }
      .login-field label {
        display: block;
        margin-bottom: 7px;
        color: #7f8798;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.045em;
      }

      .login-field input {
        width: 100%;
        height: 46px;
        padding: 0 14px;
        border: 1px solid #e2e6ed;
        border-radius: 12px;
        outline: none;
        color: var(--text);
        background: #fafbfd;
        transition:
          border-color 0.2s ease,
          box-shadow 0.2s ease,
          background 0.2s ease;
      }

      .login-field input:focus {
        border-color: rgba(111, 130, 163, 0.55);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(111, 130, 163, 0.09);
      }

      .login-button {
        width: 100%;
        height: 46px;
        margin-top: 5px;
        border: 0;
        border-radius: 12px;
        color: #fff;
        background: linear-gradient(135deg, #7185a7, #8f86aa);
        cursor: pointer;
        font-weight: 600;
        box-shadow: 0 10px 24px rgba(111, 130, 163, 0.22);
        transition:
          transform 0.2s ease,
          opacity 0.2s ease;
      }

      .login-button:hover {
        transform: translateY(-1px);
      }
      .login-button:disabled {
        opacity: 0.6;
        cursor: wait;
        transform: none;
      }

      .login-error {
        display: none;
        margin: 14px 0 0;
        padding: 10px 12px;
        border: 1px solid #f2dfe2;
        border-radius: 10px;
        color: #9e6069;
        background: #fbf1f2;
        font-size: 12px;
        line-height: 1.5;
      }

      .login-error.show {
        display: block;
      }

      .hero-actions {
        position: absolute;
        z-index: 2;
        top: 20px;
        right: 22px;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .logged-user {
        max-width: 240px;
        color: #7b8496;
        font-size: 11px;
        text-align: right;
      }

      .logout-btn {
        height: 36px;
        padding: 0 13px;
        border: 1px solid #e2e6ed;
        border-radius: 10px;
        color: #68758b;
        background: rgba(255, 255, 255, 0.82);
        cursor: pointer;
        font-size: 11px;
        font-weight: 600;
      }

      @media (max-width: 720px) {
        .hero-actions {
          position: relative;
          top: auto;
          right: auto;
          margin-top: 16px;
          justify-content: space-between;
        }
        .logged-user {
          text-align: left;
        }
      }

      /* =========================================================
       VISUAL HARMONICO: escuro, elegante e com cores moderadas
       ========================================================= */
      :root {
        color-scheme: dark;
        --bg: #11161c;
        --surface: rgba(24, 31, 39, 0.94);
        --card: #1a222b;
        --text: #c8d1dc;
        --heading: #edf2f7;
        --muted: #8f9baa;
        --border: rgba(148, 163, 184, 0.15);
        --primary: #7d94bd;
        --primary-soft: rgba(125, 148, 189, 0.13);
        --secondary: #998db5;
        --danger: #bf7b86;
        --warning: #bd9a60;
        --success: #78a08a;
        --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.2);
        --shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.27);
      }

      html {
        background: var(--bg);
      }

      body {
        position: relative;
        color: var(--text);
        background:
          radial-gradient(circle at 10% 0%, rgba(92, 116, 157, 0.13), transparent 30rem),
          radial-gradient(circle at 92% 4%, rgba(124, 102, 151, 0.09), transparent 28rem),
          linear-gradient(180deg, #121820 0%, #10151b 100%);
        background-attachment: fixed;
      }

      body::before {
        display: none;
      }
      .container {
        position: relative;
        z-index: 1;
      }

      .hero {
        color: #f5f7fa;
        border-color: rgba(159, 177, 204, 0.2);
        background:
          radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.07), transparent 13rem),
          linear-gradient(125deg, #26364b 0%, #30364b 58%, #2b3d42 100%);
        box-shadow:
          0 16px 40px rgba(0, 0, 0, 0.24),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .hero::before {
        width: 250px;
        height: 250px;
        right: -90px;
        top: -145px;
        background: rgba(255, 255, 255, 0.055);
        box-shadow: none;
      }

      .hero::after {
        width: 4px;
        background: linear-gradient(180deg, #8ca3c8, #9d91b8);
        box-shadow: none;
        opacity: 0.9;
      }

      .hero h1 {
        color: #f5f7fa;
        text-shadow: none;
      }
      .hero p {
        color: rgba(225, 232, 241, 0.78);
      }

      .hero-pill {
        color: #dfe7f0;
        border-color: rgba(255, 255, 255, 0.13);
        background: rgba(12, 18, 25, 0.24);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
      }

      .filters {
        position: relative;
        border-color: rgba(148, 163, 184, 0.15);
        background: rgba(24, 31, 39, 0.94);
        box-shadow:
          var(--shadow-sm),
          inset 0 1px 0 rgba(255, 255, 255, 0.025);
      }

      .filters::before {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        top: 0;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, #7d94bd, #998db5, transparent);
        opacity: 0.65;
      }

      .field label {
        color: #98a5b5;
      }

      .field input,
      .field select {
        color: #dde5ee;
        border-color: rgba(148, 163, 184, 0.25);
        background: #151c24;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
      }

      .field input:hover,
      .field select:hover {
        border-color: rgba(125, 148, 189, 0.48);
        background: #18212a;
      }
      .btn-secondary {
        color: #b7c2cf;
        border-color: rgba(148, 163, 184, 0.23);
        background: #151c24;
      }
      .btn-secondary:hover {
        color: #eef2f6;
        border-color: rgba(125, 148, 189, 0.38);
        background: #1b2530;
      }
      .table-mini-filter label {
        color: #98a5b5;
      }
      .table-mini-filter input {
        color: #dde5ee;
        border-color: rgba(148, 163, 184, 0.25);
        background: #151c24;
      }
      .table-mini-filter input:focus {
        border-color: #7d94bd;
        box-shadow: 0 0 0 3px rgba(125, 148, 189, 0.13);
      }
      .client-link {
        color: #9fb7dc;
      }

      .field input:focus,
      .field select:focus {
        border-color: #7d94bd;
        background: #18212a;
        box-shadow: 0 0 0 3px rgba(125, 148, 189, 0.13);
      }

      .btn {
        color: #f5f7fa;
        border-color: rgba(157, 176, 207, 0.25);
        background: linear-gradient(180deg, #6f86ae, #60779e);
        box-shadow:
          0 7px 18px rgba(28, 40, 58, 0.28),
          inset 0 1px 0 rgba(255, 255, 255, 0.13);
      }

      .btn:hover {
        color: #fff;
        border-color: rgba(174, 190, 216, 0.38);
        background: linear-gradient(180deg, #7a90b7, #687fa6);
        box-shadow:
          0 10px 24px rgba(28, 40, 58, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.16);
      }

      .btn:disabled {
        filter: saturate(0.65);
        opacity: 0.52;
      }

      .quick-filters,
      .page-tabs {
        padding: 4px;
        width: fit-content;
        border: 1px solid rgba(148, 163, 184, 0.13);
        border-radius: 999px;
        background: rgba(22, 29, 37, 0.78);
        backdrop-filter: blur(10px);
      }

      .chip,
      .tab {
        color: #9ca9b8;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
      }

      .chip:hover,
      .tab:hover {
        color: #e5eaf0;
        border-color: rgba(125, 148, 189, 0.18);
        background: rgba(125, 148, 189, 0.1);
        box-shadow: none;
      }

      .tab.active {
        color: #f3f6f9;
        border-color: rgba(145, 163, 193, 0.25);
        background: linear-gradient(180deg, rgba(112, 135, 173, 0.78), rgba(91, 111, 145, 0.78));
        box-shadow:
          0 5px 14px rgba(0, 0, 0, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.09);
      }

      .status.loading {
        color: #bac8db;
        background: rgba(91, 111, 145, 0.16);
        border-color: rgba(125, 148, 189, 0.24);
      }
      .status.error {
        color: #ddb2b9;
        background: rgba(145, 75, 87, 0.15);
        border-color: rgba(191, 123, 134, 0.25);
      }
      .status.ok {
        color: #b9d3c5;
        background: rgba(74, 119, 92, 0.15);
        border-color: rgba(120, 160, 138, 0.25);
      }

      .kpi-card {
        --accent: #7d94bd;
        --accent-soft: rgba(125, 148, 189, 0.11);
        border-color: rgba(148, 163, 184, 0.15);
        background:
          radial-gradient(circle at 96% 6%, var(--accent-soft), transparent 7rem),
          linear-gradient(145deg, #1b242d, #171f27);
        box-shadow:
          var(--shadow-sm),
          inset 0 1px 0 rgba(255, 255, 255, 0.025);
      }

      .kpi-card::before {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        top: 0;
        height: 2px;
        border-radius: 0 0 999px 999px;
        background: var(--accent);
        box-shadow: none;
        opacity: 0.68;
      }

      .kpi-card::after {
        width: 96px;
        height: 96px;
        right: -44px;
        top: -46px;
        background: var(--accent-soft) !important;
        filter: none;
      }

      .kpi-card.purple {
        --accent: #998db5;
        --accent-soft: rgba(153, 141, 181, 0.11);
      }
      .kpi-card.success {
        --accent: #78a08a;
        --accent-soft: rgba(120, 160, 138, 0.11);
      }
      .kpi-card.warning {
        --accent: #bd9a60;
        --accent-soft: rgba(189, 154, 96, 0.11);
      }
      .kpi-card.danger {
        --accent: #bf7b86;
        --accent-soft: rgba(191, 123, 134, 0.11);
      }

      .kpi-card:hover {
        border-color: color-mix(in srgb, var(--accent) 38%, rgba(148, 163, 184, 0.15));
        box-shadow:
          var(--shadow-hover),
          inset 0 1px 0 rgba(255, 255, 255, 0.035);
      }

      .kpi-title {
        color: #9da9b8;
      }
      .kpi-value {
        color: #edf2f7;
        text-shadow: none;
      }
      .kpi-sub {
        color: #8593a3;
      }

      .kpi-icon {
        color: #dfe6ef;
        border-color: rgba(148, 163, 184, 0.13);
        background: var(--accent-soft) !important;
        filter: saturate(0.85);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
      }

      .section {
        position: relative;
        overflow: hidden;
        border-color: rgba(148, 163, 184, 0.14);
        background: linear-gradient(145deg, #19212a, #161d25);
        box-shadow:
          var(--shadow-sm),
          inset 0 1px 0 rgba(255, 255, 255, 0.02);
      }

      .section::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, #7d94bd, transparent);
        opacity: 0.55;
      }

      #pageGeral .monitor-sections .section:first-child::before,
      #pageGeral > .section:last-child::before,
      #pageGraficos > .section:nth-of-type(3)::before,
      #pageGraficos > .section:nth-of-type(5)::before {
        background: linear-gradient(90deg, transparent, #bd9a60, transparent);
      }

      #pageGeral .monitor-sections .section:nth-child(2)::before,
      #pageGeral > .section:nth-of-type(3)::before {
        background: linear-gradient(90deg, transparent, #bf7b86, transparent);
      }

      #pageGeral > .section:nth-of-type(2)::before,
      #pageGraficos > .section:nth-of-type(6)::before,
      #pageClientes > .section:first-child::before {
        background: linear-gradient(90deg, transparent, #78a08a, transparent);
      }

      .section h2 {
        color: #e9eef4;
      }
      .section-caption {
        color: #8f9cac;
      }

      .metric-guide-item,
      .client-stats-note > div,
      .stats-empty-hint {
        border-color: rgba(148, 163, 184, 0.13);
        color: #a5b0be;
        background: #171f27;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
      }

      .metric-guide-item:nth-child(1) {
        border-left: 3px solid #bd9a60;
      }
      .metric-guide-item:nth-child(2) {
        border-left: 3px solid #bf7b86;
      }
      .metric-guide-item:nth-child(3) {
        border-left: 3px solid #78a08a;
      }
      .client-stats-note > div:nth-child(1) {
        border-left: 3px solid #7d94bd;
      }
      .client-stats-note > div:nth-child(2) {
        border-left: 3px solid #bd9a60;
      }
      .client-stats-note > div:nth-child(3) {
        border-left: 3px solid #998db5;
      }
      .metric-guide-item strong,
      .client-stats-note strong {
        color: #e4e9ef;
      }

      .chart-card {
        position: relative;
        overflow: hidden;
        border-color: rgba(148, 163, 184, 0.13);
        background: linear-gradient(145deg, #1a232c, #171f27);
        box-shadow:
          0 9px 24px rgba(0, 0, 0, 0.18),
          inset 0 1px 0 rgba(255, 255, 255, 0.018);
      }

      .chart-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 20px;
        bottom: 20px;
        width: 3px;
        border-radius: 0 999px 999px 0;
        background: #7d94bd;
        box-shadow: none;
        opacity: 0.72;
      }

      .chart-card:nth-child(3n + 2)::before {
        background: #998db5;
      }
      .chart-card:nth-child(3n)::before {
        background: #78a08a;
      }

      .chart-card:hover {
        border-color: rgba(125, 148, 189, 0.27);
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
      }

      .chart-card h3 {
        color: #e8edf3;
      }
      .chart-card p {
        color: #8d9aaa;
      }

      .chart-highlight {
        color: #b8c6d9;
        border-color: rgba(125, 148, 189, 0.23);
        background: rgba(125, 148, 189, 0.1);
        box-shadow: none;
      }

      .chart-highlight.warning {
        color: #d4bc91;
        background: rgba(189, 154, 96, 0.1);
        border-color: rgba(189, 154, 96, 0.23);
      }
      .chart-highlight.danger {
        color: #d8a9b0;
        background: rgba(191, 123, 134, 0.1);
        border-color: rgba(191, 123, 134, 0.23);
      }
      .chart-highlight.success {
        color: #b2cdbd;
        background: rgba(120, 160, 138, 0.1);
        border-color: rgba(120, 160, 138, 0.23);
      }

      .chart-footnote {
        color: #8290a0;
        border-top-color: rgba(148, 163, 184, 0.11);
      }
      .chart-footnote strong {
        color: #bdc8d5;
      }
      .chart-empty {
        color: #7f8d9e;
      }

      .table-wrap {
        border-color: rgba(148, 163, 184, 0.13);
        background: #151c24;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
      }

      th {
        color: #cbd5e1;
        border-bottom-color: rgba(148, 163, 184, 0.17);
        background: #202a35;
      }

      td {
        color: #b8c3d0;
        border-bottom-color: rgba(148, 163, 184, 0.085);
        background: #18212a;
      }

      tbody tr:nth-child(even) td {
        background: #1a232c;
      }
      tbody tr:hover td {
        background: #202b37;
      }
      td strong {
        color: #e4eaf0;
      }
      small {
        color: #7f8c9d;
      }

      .badge {
        color: #c4bad4;
        border-color: rgba(153, 141, 181, 0.22);
        background: rgba(153, 141, 181, 0.1);
        box-shadow: none;
      }
      .badge-danger {
        color: #d8a9b0;
        background: rgba(191, 123, 134, 0.1);
        border-color: rgba(191, 123, 134, 0.23);
      }
      .badge-warning {
        color: #d4bc91;
        background: rgba(189, 154, 96, 0.1);
        border-color: rgba(189, 154, 96, 0.23);
      }
      .badge-success {
        color: #b2cdbd;
        background: rgba(120, 160, 138, 0.1);
        border-color: rgba(120, 160, 138, 0.23);
      }

      summary {
        color: #9fb1c9;
      }
      summary:hover {
        color: #c4d0df;
      }
      pre {
        color: #bdc7d3;
        border-color: rgba(148, 163, 184, 0.14);
        background: #11171e;
      }

      .dt-container {
        color: #a5b1bf;
      }
      .dt-search label,
      .dt-length label,
      .dt-info {
        color: #8d99a8;
      }
      .dt-search input,
      .dt-length select {
        color: #dce4ed !important;
        border-color: rgba(148, 163, 184, 0.23) !important;
        background: #151c24 !important;
      }
      .dt-search input:focus,
      .dt-length select:focus {
        border-color: #7d94bd !important;
        box-shadow: 0 0 0 3px rgba(125, 148, 189, 0.12) !important;
      }
      .dt-paging-button {
        color: #95a2b2 !important;
      }
      .dt-paging-button:hover {
        color: #e8edf3 !important;
        background: rgba(125, 148, 189, 0.1) !important;
        border-color: rgba(125, 148, 189, 0.18) !important;
      }
      .dt-paging-button.current {
        color: #f2f5f8 !important;
        border-color: rgba(125, 148, 189, 0.25) !important;
        background: rgba(125, 148, 189, 0.18) !important;
      }

      .export-btn {
        border-color: rgba(120, 160, 138, 0.27);
        background: linear-gradient(180deg, #698f7a, #5c7f6c);
        box-shadow:
          0 7px 18px rgba(24, 56, 39, 0.23),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }
      .export-btn:hover {
        background: linear-gradient(180deg, #759b86, #658a75);
        box-shadow:
          0 10px 24px rgba(24, 56, 39, 0.28),
          inset 0 1px 0 rgba(255, 255, 255, 0.13);
      }

      .login-page {
        background:
          radial-gradient(circle at 18% 12%, rgba(92, 116, 157, 0.13), transparent 24rem),
          radial-gradient(circle at 82% 10%, rgba(124, 102, 151, 0.09), transparent 24rem), #11161c;
      }

      .login-card {
        border-color: rgba(148, 163, 184, 0.16);
        background: linear-gradient(145deg, #1b242d, #171f27);
        box-shadow:
          0 24px 64px rgba(0, 0, 0, 0.36),
          inset 0 1px 0 rgba(255, 255, 255, 0.025);
      }

      .login-logo {
        background: linear-gradient(135deg, #7188ae, #8d82a5);
        box-shadow: 0 10px 24px rgba(36, 45, 65, 0.32);
      }
      .login-brand h1 {
        color: #eef2f6;
      }
      .login-brand p {
        color: #8d9aaa;
      }
      .login-field label {
        color: #9aa6b5;
      }
      .login-field input {
        color: #dce4ed;
        border-color: rgba(148, 163, 184, 0.23);
        background: #151c24;
      }
      .login-field input:focus {
        border-color: #7d94bd;
        background: #18212a;
        box-shadow: 0 0 0 3px rgba(125, 148, 189, 0.12);
      }
      .login-button {
        background: linear-gradient(180deg, #7188ae, #61779d);
        box-shadow: 0 9px 22px rgba(36, 45, 65, 0.3);
      }
      .login-error {
        color: #d8a9b0;
        background: rgba(191, 123, 134, 0.1);
        border-color: rgba(191, 123, 134, 0.23);
      }

      .logged-user {
        color: rgba(230, 236, 243, 0.76);
      }
      .logout-btn {
        color: #e7ecf2;
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(12, 18, 25, 0.22);
        backdrop-filter: blur(8px);
      }
      .logout-btn:hover {
        background: rgba(255, 255, 255, 0.07);
      }

      @media (max-width: 650px) {
        .quick-filters,
        .page-tabs {
          width: 100%;
          border-radius: 16px;
        }
        .chip,
        .tab {
          flex: 1 1 auto;
          text-align: center;
        }
      }

      /* =========================================================
       GERENCIAMENTO DE CARDS JIRA
       ========================================================= */
      .jira-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 14px;
      }

      .jira-connection {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        min-height: 42px;
        padding: 10px 12px;
        border: 1px solid rgba(148, 163, 184, 0.14);
        border-radius: 12px;
        color: #aeb9c7;
        background: #151c24;
        font-size: 11px;
        line-height: 1.5;
      }

      .jira-filter-grid {
        display: grid;
        grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(150px, 0.8fr));
        gap: 11px;
        margin: 14px 0;
      }

      .jira-options {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
      }

      .jira-checkbox {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 38px;
        padding: 0 11px;
        border: 1px solid rgba(148, 163, 184, 0.16);
        border-radius: 10px;
        color: #aab5c3;
        background: #151c24;
        font-size: 11px;
        cursor: pointer;
        user-select: none;
      }

      .jira-checkbox input {
        accent-color: #7d94bd;
      }

      .jira-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .jira-board-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 10px;
      }

      .jira-evolution-notice {
        margin: 0 0 14px;
        padding: 10px 12px;
        border: 1px solid rgba(125, 148, 189, 0.18);
        border-radius: 11px;
        color: #9eabba;
        background: rgba(125, 148, 189, 0.07);
        font-size: 10.5px;
        line-height: 1.55;
      }

      .jira-evolution-notice.warning {
        color: #d4bc91;
        border-color: rgba(189, 154, 96, 0.23);
        background: rgba(189, 154, 96, 0.09);
      }

      .jira-chart-wide {
        grid-column: 1 / -1;
      }

      .jira-breakdown-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }

      .jira-breakdown-panel {
        min-width: 0;
        padding: 14px;
        border: 1px solid rgba(148, 163, 184, 0.14);
        border-radius: 13px;
        background: linear-gradient(145deg, #1b242d, #171f27);
      }

      .jira-breakdown-panel h3 {
        margin: 0 0 10px;
        color: #e7edf4;
        font-size: 12px;
        font-weight: 600;
      }

      .jira-breakdown-items {
        display: grid;
        gap: 7px;
      }

      .jira-breakdown-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 9px;
        border: 1px solid rgba(148, 163, 184, 0.1);
        border-radius: 9px;
        color: #aeb9c7;
        background: #151c24;
        font-size: 10.5px;
      }

      .jira-breakdown-item strong {
        color: #eef2f6;
        font-size: 12px;
        font-weight: 600;
      }

      .jira-board-column {
        position: relative;
        overflow: hidden;
        min-height: 94px;
        padding: 14px;
        border: 1px solid rgba(148, 163, 184, 0.14);
        border-radius: 13px;
        background: linear-gradient(145deg, #1b242d, #171f27);
      }

      .jira-board-column::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: #7d94bd;
        opacity: 0.75;
      }

      .jira-board-name {
        color: #9eabba;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.035em;
        text-transform: uppercase;
      }

      .jira-board-total {
        margin-top: 10px;
        color: #edf2f7;
        font-size: 25px;
        line-height: 1;
        font-weight: 600;
      }

      .jira-board-sub {
        margin-top: 7px;
        color: #7f8d9d;
        font-size: 9.8px;
      }

      .jira-link {
        color: #a9bdd8;
        font-weight: 600;
        text-decoration: none;
      }

      .jira-link:hover {
        color: #d2deed;
        text-decoration: underline;
      }

      .jira-title-cell {
        min-width: 280px;
        max-width: 520px;
      }
      .jira-title-cell strong {
        display: block;
        margin-bottom: 3px;
      }
      .jira-labels {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        max-width: 280px;
      }
      .jira-labels .badge {
        padding: 3px 6px;
        font-size: 9px;
      }
      .jira-date-overdue {
        color: #e0a5ae;
        font-weight: 600;
      }
      .jira-responsible-cell {
        min-width: 170px;
      }
      .jira-muted {
        color: #8492a2;
        font-size: 10px;
      }

      .persona-conversation-list {
        display: grid;
        gap: 14px;
      }

      .persona-header-actions {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 10px;
        flex-wrap: wrap;
      }

      .persona-goal-control {
        min-width: 185px;
      }

      .persona-goal-control label {
        display: block;
        margin-bottom: 6px;
        color: #9eabba;
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: 0.045em;
        text-transform: uppercase;
      }

      .persona-goal-control input {
        width: 100%;
        height: 36px;
        padding: 0 10px;
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: 9px;
        outline: none;
        color: #dce4ed;
        background: #151c24;
        font-size: 11px;
      }

      .persona-priority-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px;
        margin: 0 0 16px;
        padding: 14px;
        border: 1px solid rgba(189, 154, 96, 0.28);
        border-radius: 13px;
        background: linear-gradient(135deg, rgba(189, 154, 96, 0.12), rgba(125, 148, 189, 0.07));
      }

      .persona-priority-title {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #ead5ad;
        font-size: 12px;
        font-weight: 600;
      }

      .persona-priority-copy {
        margin: 5px 0 0;
        color: #aeb9c7;
        font-size: 10.5px;
        line-height: 1.55;
      }

      .persona-priority-total {
        color: #f0d6a7;
        font-size: 25px;
        font-weight: 600;
        letter-spacing: -0.04em;
      }

      .persona-priority-actions {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .persona-priority-total small {
        display: block;
        margin-top: 2px;
        color: #aeb9c7;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .persona-priority-action {
        min-width: 172px;
        height: 36px;
        padding: 0 12px;
        border: 1px solid rgba(189, 154, 96, 0.32);
        border-radius: 9px;
        color: #ead5ad;
        background: rgba(21, 28, 36, 0.7);
        cursor: pointer;
        font-size: 10.5px;
        font-weight: 600;
      }

      .persona-priority-action:hover,
      .persona-priority-action:focus-visible {
        border-color: rgba(215, 179, 116, 0.65);
        background: rgba(189, 154, 96, 0.15);
        outline: none;
      }

      .persona-conversation.critical {
        border-color: rgba(191, 123, 134, 0.5);
        box-shadow: inset 3px 0 0 #bf7b86, inset 0 1px 0 rgba(255, 255, 255, 0.025);
      }

      .metric-title-with-help {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }

      .metric-help {
        position: relative;
        display: inline-grid;
        place-items: center;
        width: 16px;
        height: 16px;
        padding: 0;
        border: 1px solid rgba(148, 163, 184, 0.32);
        border-radius: 50%;
        color: #b9c4d1;
        background: rgba(125, 148, 189, 0.11);
        cursor: help;
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
      }

      [data-tooltip] {
        cursor: help;
      }

      .metric-help:focus-visible {
        border-color: #9fb4d5;
        outline: 2px solid rgba(125, 148, 189, 0.34);
        outline-offset: 2px;
      }

      #metricTooltip {
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: min(270px, calc(100vw - 36px));
        padding: 9px 10px;
        border: 1px solid rgba(148, 163, 184, 0.25);
        border-radius: 9px;
        color: #d9e1ea;
        background: #10161d;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
        font-size: 10px;
        font-weight: 400;
        line-height: 1.5;
        text-align: left;
        transform: translate(-50%, 4px);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
      }

      #metricTooltip.show {
        visibility: visible;
        opacity: 1;
        transform: translate(-50%, 0);
      }

      .persona-conversation {
        overflow: hidden;
        padding: 16px;
        border: 1px solid rgba(148, 163, 184, 0.14);
        border-radius: 14px;
        background: linear-gradient(145deg, #1b242d, #171f27);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
      }

      .persona-conversation-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 12px;
      }

      .persona-conversation-title {
        margin: 0;
        color: #e9eef4;
        font-size: 13px;
        font-weight: 600;
      }

      .persona-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
        margin-top: 6px;
        color: #8e9bab;
        font-size: 10.5px;
        line-height: 1.5;
      }

      .persona-context {
        margin: 0 0 13px;
        padding: 11px 12px;
        border-left: 3px solid #998db5;
        border-radius: 9px;
        color: #aeb9c7;
        background: #151c24;
        font-size: 10.8px;
        line-height: 1.6;
      }

      .persona-suggestions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 10px;
      }

      .persona-suggestion {
        min-width: 0;
        padding: 13px;
        border: 1px solid rgba(148, 163, 184, 0.13);
        border-radius: 11px;
        background: #151c24;
      }

      .persona-suggestion-header {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 10px;
      }

      .persona-suggestion-text {
        margin: 0;
        color: #dce3eb;
        font-size: 11.2px;
        line-height: 1.65;
        white-space: pre-wrap;
      }

      .persona-suggestion-reason {
        margin: 10px 0 0;
        padding-top: 10px;
        border-top: 1px solid rgba(148, 163, 184, 0.11);
        color: #8f9cac;
        font-size: 10.5px;
        line-height: 1.6;
      }

      .persona-criteria { margin: 0 0 13px; padding: 13px; border: 1px solid rgba(148, 163, 184, 0.13); border-radius: 11px; background: #151c24; }
      .persona-criteria h4 { margin: 0 0 10px; color: #dce3eb; font-size: 10px; font-weight: 600; letter-spacing: 0.035em; text-transform: uppercase; }
      .persona-criteria-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 9px; }
      .persona-criterion { min-width: 0; padding: 11px 12px; border: 1px solid rgba(148, 163, 184, 0.11); border-radius: 9px; background: rgba(27, 36, 45, 0.72); }
      .persona-criterion-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #dce3eb; font-size: 10.5px; }
      .persona-criterion-header strong { font-weight: 600; }
      .persona-criterion ul { margin: 8px 0 0; padding-left: 16px; color: #9eabba; font-size: 10.3px; line-height: 1.55; }
      .persona-criterion li + li { margin-top: 4px; }

      .persona-empty {
        padding: 24px 16px;
        border: 1px dashed rgba(148, 163, 184, 0.2);
        border-radius: 12px;
        color: #8f9cac;
        background: rgba(21, 28, 36, 0.55);
        font-size: 11px;
        line-height: 1.6;
        text-align: center;
      }

      .persona-insights-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }

      #personaSummaryCards {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }

      .persona-detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 10px;
        margin: 0 0 13px;
      }

      .persona-detail-item {
        min-width: 0;
        padding: 11px 12px;
        border: 1px solid rgba(148, 163, 184, 0.13);
        border-radius: 11px;
        color: #aeb9c7;
        background: #151c24;
        font-size: 10.7px;
        line-height: 1.6;
      }

      .persona-detail-item strong {
        display: block;
        margin-bottom: 4px;
        color: #dce3eb;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.035em;
        text-transform: uppercase;
      }

      .persona-detail-item ul {
        margin: 5px 0 0;
        padding-left: 17px;
      }

      @media (max-width: 1120px) {
        .jira-filter-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .jira-kpi-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .jira-breakdown-grid {
          grid-template-columns: 1fr;
        }
        .persona-insights-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        #personaSummaryCards {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .jira-chart-wide {
          grid-column: auto;
        }
      }

      @media (max-width: 650px) {
        .jira-filter-grid,
        .jira-kpi-grid,
        .jira-breakdown-grid {
          grid-template-columns: 1fr;
        }
        .persona-insights-grid {
          grid-template-columns: 1fr;
        }
        #personaSummaryCards {
          grid-template-columns: 1fr;
        }
        .persona-header-actions {
          align-items: stretch;
          width: 100%;
        }
        .persona-goal-control {
          flex: 1;
        }
        .persona-priority-panel {
          grid-template-columns: 1fr;
        }
        .persona-priority-action {
          width: 100%;
        }
        .persona-priority-actions {
          display: grid;
          grid-template-columns: 1fr;
        }
        .jira-toolbar {
          align-items: stretch;
        }
        .jira-toolbar .section-actions {
          justify-content: stretch;
          width: 100%;
        }
        .jira-toolbar .btn {
          flex: 1;
        }
      }

      /* Visao geral: todos os resumos ficam concentrados antes das tabelas. */
      #pageGeral .monitor-section-wide {
        grid-column: 1 / -1;
      }
      #pageGeral #ragCards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #pageGeral #uncapturedReservationsCards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #pageGeral #missingInfoCards,
      #pageGeral #ragConversationOverviewCards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      @media (max-width: 650px) {
        #pageGeral .monitor-section-wide {
          grid-column: auto;
        }
        #pageGeral #ragCards,
        #pageGeral #uncapturedReservationsCards,
        #pageGeral #missingInfoCards,
        #pageGeral #ragConversationOverviewCards,
        #personaSummaryCards,
        .persona-suggestions {
          grid-template-columns: 1fr;
        }

        .persona-conversation-header {
          flex-direction: column;
        }
      }