/* ===== inline style ===== */
    :root {
      --green: #6ab04c;
      --green-dark: #5a9e3e;
      --green-light: #f0fdf4;
      --green-text: #166534;
      --red: #ef4444;
      --red-light: #fef2f2;
      --blue: #3b82f6;
      --bg: #f5f6fa;
      --white: #ffffff;
      --border: #e5e7eb;
      --text: #111827;
      --text-sub: #374151;
      --text-muted: #6b7280;
      --text-faint: #9ca3af;
      --shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
      --radius: 14px;
      --sidebar: 220px;
    }

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

    html,
    body {
      height: 100%;
      font-family: 'Nunito', sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    .layout {
      display: flex;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
    }

    .sidebar {
      width: var(--sidebar);
      background: var(--white);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      height: 100vh;
      height: 100dvh;
      transition: transform .3s ease;
      z-index: 300;
    }

    .sidebar-brand {
      padding: 20px 16px 16px;
      border-bottom: 1px solid #f3f4f6;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .brand-logo {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .brand-logo img {
      width: 42px;
      height: 42px;
      object-fit: cover;
      border-radius: 12px;
      display: block;
    }

    .brand-name {
      font-size: 20px;
      font-weight: 800;
      color: var(--text);
    }

    .brand-sub {
      font-size: 10px;
      color: var(--text-faint);
      font-weight: 600;
      margin-top: 1px;
    }

    .nav {
      flex: 1;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      overflow-y: auto;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      cursor: pointer;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      transition: background .15s;
    }

    .nav-item:hover {
      background: var(--bg);
    }

    .nav-item.active {
      background: var(--green-light);
    }

    .nav-item svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    .nav-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-sub);
    }

    .nav-item.active .nav-label {
      color: var(--green);
    }

    .nav-finvio {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      cursor: pointer;
      border: none;
      background: var(--green);
      width: 100%;
      text-align: left;
      margin-top: 6px;
    }

    .nav-finvio:hover {
      background: var(--green-dark);
    }

    .nav-finvio-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      background: var(--green-dark);
    }

    .nav-finvio-icon img {
      width: 28px;
      height: 28px;
      object-fit: cover;
      display: block;
    }

    .nav-finvio-label {
      font-size: 13px;
      font-weight: 700;
      color: #fff;
    }

    .sidebar-footer {
      padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 24px));
      border-top: 1px solid #f3f4f6;
    }

    .play-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #111827;
      border-radius: 10px;
      padding: 9px 12px;
      cursor: pointer;
      border: none;
      text-decoration: none;
      width: 100%;
    }

    .play-btn:hover {
      background: #1f2937;
    }

    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 0;
    }

    .topbar {
      padding: 14px 20px;
      border-bottom: 1px solid var(--border);
      background: var(--white);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      gap: 10px;
    }

    .topbar-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .topbar-title {
      font-size: 20px;
      font-weight: 800;
      color: var(--text);
    }

    .topbar-logo {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      object-fit: cover;
    }

    .menu-btn {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      border-radius: 8px;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
    }

    .menu-btn:hover {
      background: var(--bg);
    }

    .finvio-topbtn {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 8px 14px;
      border: 1.5px solid var(--green);
      border-radius: 10px;
      background: var(--green-light);
      color: var(--green);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      font-family: inherit;
    }

    .finvio-topbtn:hover {
      background: #dcfce7;
    }

    .finvio-topbtn img {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      object-fit: cover;
    }

    .add-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 9px 16px;
      border: none;
      border-radius: 10px;
      background: var(--green);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      font-family: inherit;
    }

    .add-btn:hover {
      background: var(--green-dark);
    }

    .content {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .content::-webkit-scrollbar {
      width: 4px;
    }

    .content::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 4px;
    }

    .card {
      background: var(--white);
      border-radius: var(--radius);
      padding: 16px 18px;
      box-shadow: var(--shadow);
      border: 0.5px solid #f3f4f6;
    }

    .card-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 10px;
    }

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

    /* Dashboard period selector (Week / Month / Year) */
    .dash-period-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .dash-period-label {
      font-size: 12px;
      color: var(--text-faint);
      font-weight: 600;
    }

    .dash-period-label strong {
      color: var(--text);
      font-weight: 800;
    }

    .dash-seg {
      display: inline-flex;
      background: #f3f4f6;
      border-radius: 10px;
      padding: 3px;
      gap: 2px;
    }

    .dash-seg-btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      border-radius: 8px;
      font: 700 12px/1 'Nunito', sans-serif;
      color: #6b7280;
      cursor: pointer;
      transition: .15s;
    }

    .dash-seg-btn:hover {
      color: #374151;
    }

    .dash-seg-btn.active {
      background: var(--green, #6ab04c);
      color: #fff;
      box-shadow: 0 2px 6px rgba(106, 176, 76, .3);
    }

    body.dark .dash-seg {
      background: #1f2937;
    }

    body.dark .dash-seg-btn {
      color: #9ca3af;
    }

    body.dark .dash-seg-btn:hover {
      color: #f3f4f6;
    }

    body.dark .dash-period-label {
      color: #9ca3af;
    }

    body.dark .dash-period-label strong {
      color: #f3f4f6;
    }

    .stat-card {
      background: var(--white);
      border-radius: 12px;
      padding: 14px 16px;
      box-shadow: var(--shadow);
      border: 0.5px solid #f3f4f6;
    }

    .stat-label {
      font-size: 11px;
      color: var(--text-faint);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 5px;
    }

    .stat-val {
      font-size: 22px;
      font-weight: 800;
    }

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

    .g {
      color: #16a34a;
    }

    .r {
      color: var(--red);
    }

    .b {
      color: var(--blue);
    }

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

    .entry {
      background: var(--white);
      border-radius: 12px;
      padding: 14px 16px;
      box-shadow: var(--shadow);
      border: 0.5px solid #f3f4f6;
      position: relative;
      overflow: hidden;
    }

    .entry-tag {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 10px;
      font-weight: 700;
      padding: 4px 11px;
      border-radius: 0 12px 0 9px;
      color: #fff;
    }

    .entry-tag-g {
      background: var(--green);
    }

    .entry-tag-r {
      background: var(--red);
    }

    .entry-row {
      display: flex;
      gap: 6px;
      margin-bottom: 5px;
      flex-wrap: wrap;
    }

    .entry-key {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-muted);
      min-width: 100px;
    }

    .entry-val {
      font-size: 12px;
      color: var(--text-sub);
      font-weight: 500;
    }

    .entry-btns {
      display: flex;
      gap: 6px;
      margin-top: 10px;
    }

    .btn-edit {
      flex: 1;
      padding: 7px;
      border: 1.5px solid var(--green);
      border-radius: 7px;
      background: var(--white);
      font-size: 12px;
      color: var(--green);
      cursor: pointer;
      font-weight: 700;
      font-family: inherit;
    }

    .btn-edit:hover {
      background: var(--green-light);
    }

    .btn-del {
      flex: 1;
      padding: 7px;
      border: 1.5px solid var(--red);
      border-radius: 7px;
      background: var(--white);
      font-size: 12px;
      color: var(--red);
      cursor: pointer;
      font-weight: 700;
      font-family: inherit;
    }

    .btn-del:hover {
      background: var(--red-light);
    }

    .count-row {
      font-size: 13px;
      color: var(--text-muted);
      font-weight: 600;
      margin-bottom: 12px;
    }

    .count-row span {
      color: var(--text);
      font-weight: 700;
    }

    .empty {
      text-align: center;
      padding: 50px 20px;
      color: var(--text-faint);
      font-size: 14px;
      font-weight: 600;
    }

    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 500;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .modal-overlay.show {
      display: flex;
    }

    .modal-box {
      background: var(--white);
      border-radius: 18px;
      padding: 24px 24px 28px;
      width: 100%;
      max-width: 420px;
      max-height: 90vh;
      overflow-y: auto;
    }

    .modal-box::-webkit-scrollbar {
      display: none;
    }

    .modal-box h3 {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 16px;
    }

    .field {
      margin-bottom: 10px;
    }

    .field label {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 600;
      display: block;
      margin-bottom: 4px;
    }

    .field input,
    .field select {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 9px;
      font-size: 13px;
      color: var(--text);
      background: var(--white);
      font-family: 'Nunito', sans-serif;
      font-weight: 500;
    }

    .field input:focus,
    .field select:focus {
      outline: none;
      border-color: var(--green);
    }

    .btn-row {
      display: flex;
      gap: 8px;
      margin-top: 14px;
    }

    .btn-cancel {
      flex: 1;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--white);
      font-size: 13px;
      color: var(--text-muted);
      cursor: pointer;
      font-weight: 600;
      font-family: inherit;
    }

    .btn-save {
      flex: 1;
      padding: 10px;
      border: none;
      border-radius: 9px;
      background: var(--green);
      font-size: 13px;
      color: #fff;
      cursor: pointer;
      font-weight: 700;
      font-family: inherit;
    }

    .btn-save:hover {
      background: var(--green-dark);
    }

    .chat-wrap {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .chat-hdr {
      padding: 14px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--white);
      flex-shrink: 0;
    }

    .back-btn {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      border-radius: 8px;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
    }

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

    @media(max-width:768px) {
      .back-btn {
        display: flex;
      }
    }

    .finvio-av {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      overflow: hidden;
      flex-shrink: 0;
      background: var(--green);
    }

    .finvio-av img {
      width: 38px;
      height: 38px;
      object-fit: cover;
      display: block;
    }

    .msgs {
      flex: 1;
      overflow-y: auto;
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: var(--bg);
    }

    .msgs::-webkit-scrollbar {
      width: 4px;
    }

    .msgs::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 4px;
    }

    .bot-row {
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }

    .bav {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      margin-top: 1px;
      background: var(--green);
    }

    .bav img {
      width: 28px;
      height: 28px;
      object-fit: cover;
      display: block;
    }

    .bb {
      background: var(--white);
      border: 0.5px solid var(--border);
      border-radius: 12px 12px 12px 3px;
      padding: 11px 14px;
      max-width: 75%;
      font-size: 13px;
      color: var(--text-sub);
      line-height: 1.6;
      font-weight: 500;
    }

    .user-row {
      display: flex;
      justify-content: flex-end;
    }

    .ub {
      background: var(--green);
      border-radius: 14px 14px 3px 14px;
      padding: 10px 14px;
      max-width: 70%;
      font-size: 13px;
      color: #fff;
      line-height: 1.5;
      font-weight: 600;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 10px 20px;
      border-top: 0.5px solid var(--border);
      background: transparent;
    }

    .chip {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 5px 12px;
      font-size: 12px;
      color: var(--text-muted);
      cursor: pointer;
      font-weight: 600;
      font-family: inherit;
    }

    .chip:hover {
      background: var(--green-light);
      border-color: var(--green);
      color: var(--green-text);
    }

    .inp-row {
      display: flex;
      gap: 10px;
      padding: 14px 20px 18px;
      align-items: flex-end;
      border-top: 0.5px solid var(--border);
      background: var(--white);
      position: relative;
    }

    .inp-attach-btn {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: #f0f0f0;
      border: 1px solid var(--border);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.15s;
      color: var(--text-muted);
      padding: 0;
    }

    .inp-attach-btn svg {
      width: 20px;
      height: 20px;
      display: block;
    }

    .inp-attach-btn:hover {
      background: #e5e7eb;
      color: var(--text);
    }

    .img-preview-wrap {
      display: none;
      padding: 8px 20px;
      background: var(--white);
      border-top: 0.5px solid var(--border);
      gap: 10px;
      overflow-x: auto;
    }

    .img-preview-item {
      position: relative;
      width: 60px;
      height: 60px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--border);
      flex-shrink: 0;
    }

    .img-preview-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .img-preview-remove {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 16px;
      height: 16px;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      cursor: pointer;
      border: none;
    }

    .calc-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      margin-top: 8px;
    }

    .calc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 12px;
    }

    .calc-field label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
      margin-bottom: 4px;
      text-transform: uppercase;
    }

    .calc-field input {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 13px;
      font-family: inherit;
    }

    .calc-result {
      background: var(--green-light);
      border-radius: 10px;
      padding: 12px;
      text-align: center;
    }

    .calc-result-val {
      font-size: 20px;
      font-weight: 800;
      color: var(--green-text);
    }

    .calc-result-label {
      font-size: 11px;
      color: var(--green-text);
      font-weight: 600;
      margin-top: 2px;
    }

    .inp-box {
      flex: 1;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 14px 18px;
      font-size: 15px;
      color: var(--text);
      resize: none;
      line-height: 1.45;
      min-height: 48px;
      max-height: 140px;
      font-weight: 500;
      font-family: 'Nunito', sans-serif;
    }

    .inp-box:focus {
      outline: none;
      border-color: var(--green);
    }

    .snd-btn {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--green);
      border: none;
      cursor: pointer;
      color: #fff;
      font-size: 18px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .snd-btn:disabled {
      background: var(--border);
    }

    .chat-ft {
      text-align: center;
      font-size: 10px;
      color: #d1d5db;
      padding: 3px 0 8px;
      background: var(--white);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .fmax-counter {
      font-size: 10px;
      color: #9ca3af;
      font-weight: 700;
      background: rgba(0, 0, 0, 0.05);
      padding: 2px 8px;
      border-radius: 12px;
      display: none;
      white-space: nowrap;
    }

    body.dark .fmax-counter {
      background: rgba(255, 255, 255, 0.05);
    }

    .fmax-limit-msg {
      display: none;
      background: #fef2f2;
      border: 1px solid #fee2e2;
      border-radius: 12px;
      padding: 12px 16px;
      margin: 10px 20px;
      text-align: left;
      font-size: 13px;
      color: #991b1b;
      line-height: 1.5;
      animation: fadeIn 0.3s ease;
    }

    body.dark .fmax-limit-msg {
      background: #450a0a;
      border-color: #7f1d1d;
      color: #fecaca;
    }

    .fmax-limit-msg-title {
      font-weight: 800;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .fmax-limit-reset {
      font-size: 11px;
      opacity: 0.8;
      margin-top: 6px;
      font-weight: 600;
    }

    .mc {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 8px;
    }

    .mci {
      flex: 1;
      min-width: 70px;
      border-radius: 8px;
      padding: 7px 9px;
      border: 0.5px solid var(--border);
    }

    .mcl {
      font-size: 9px;
      color: var(--text-faint);
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: 2px;
      font-weight: 700;
    }

    .mcv {
      font-size: 13px;
      font-weight: 700;
    }

    .ins {
      margin-top: 8px;
      padding: 8px 11px;
      border-left: 3px solid var(--green);
      font-size: 12px;
      color: var(--green-text);
      line-height: 1.55;
      background: var(--green-light);
      font-weight: 600;
    }

    .alert-row {
      background: var(--red-light);
      border: 0.5px solid #fecaca;
      border-radius: 9px;
      padding: 9px 12px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
    }

    .rank-row {
      background: #f9fafb;
      border: 0.5px solid var(--border);
      border-radius: 9px;
      padding: 9px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 5px;
    }

    .list-item {
      background: #f9fafb;
      border: 0.5px solid var(--border);
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 12px;
      color: var(--text-sub);
      line-height: 1.5;
      margin-bottom: 4px;
      font-weight: 500;
    }

    .typing {
      display: flex;
      gap: 4px;
      align-items: center;
      padding: 10px 14px;
      background: var(--white);
      border: 0.5px solid var(--border);
      border-radius: 12px 12px 12px 3px;
      width: fit-content;
    }

    .typing span {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
      animation: typingpulse 1.2s ease infinite;
    }

    .typing span:nth-child(2) {
      animation-delay: .18s;
    }

    .typing span:nth-child(3) {
      animation-delay: .36s;
    }

    #finvio-mic,
    #finvio-stop {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: #f0f0f0;
      border: 1px solid var(--border);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.15s;
      color: var(--text-sub);
      padding: 0;
    }

    #finvio-mic svg,
    #finvio-stop svg {
      width: 20px;
      height: 20px;
      display: block;
    }

    #finvio-stop {
      color: #ff4d4d;
      display: none;
    }

    #finvio-stop:hover {
      background: #ffe0e0;
    }

    #finvio-mic.listening {
      animation: pulse 1.5s infinite;
      background: #ffe0e0;
      color: #ff4d4d;
      border-color: #ffcccc;
    }

    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.4);
      }

      70% {
        box-shadow: 0 0 0 10px rgba(255, 77, 77, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(255, 77, 77, 0);
      }
    }

    @keyframes typingpulse {

      0%,
      100% {
        opacity: .3
      }

      50% {
        opacity: 1
      }
    }

    .bottom-nav {
      display: none;
      background: var(--white);
      border-top: 1px solid var(--border);
      flex-shrink: 0;
      z-index: 10;
    }

    .bottom-nav-inner {
      display: flex;
      padding: 6px 0 max(env(safe-area-inset-bottom, 0px), 10px);
    }

    .bnav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      border: none;
      background: none;
      cursor: pointer;
      padding: 4px 0;
      font-family: inherit;
    }

    .bnav-item svg {
      width: 22px;
      height: 22px;
    }

    .bnav-label {
      font-size: 9px;
      color: var(--text-faint);
      font-weight: 600;
    }

    .bnav-item.active .bnav-label {
      color: var(--green);
    }

    .bnav-finvio {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
      border: none;
      background: none;
      cursor: pointer;
      padding: 3px 0;
      font-family: inherit;
    }

    .bnav-finvio-icon {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      overflow: hidden;
      background: var(--green);
    }

    .bnav-finvio-icon img {
      width: 32px;
      height: 32px;
      object-fit: cover;
      display: block;
    }

    .bnav-finvio-label {
      font-size: 9px;
      color: var(--green);
      font-weight: 700;
    }

    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 200;
    }

    .sidebar-overlay.show {
      display: block;
    }

    .screen {
      display: none;
      flex-direction: column;
      height: 100%;
    }

    .screen.active {
      display: flex;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(5px)
      }

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

    .fade {
      animation: fadeUp .2s ease;
    }

    @media(max-width:768px) {
      .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
      }

      .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
      }

      .bottom-nav {
        display: block;
      }

      .menu-btn {
        display: flex;
      }

      .content {
        padding: 14px;
        gap: 12px;
      }

      .topbar {
        padding: 12px 14px;
      }

      .topbar-title {
        font-size: 18px;
      }

      .topbar-logo {
        display: none;
      }

      .finvio-topbtn {
        display: none;
      }

      .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .charts-grid {
        grid-template-columns: 1fr;
      }

      .entry-grid {
        grid-template-columns: 1fr;
      }

      .stat-val {
        font-size: 18px;
      }

      .bb {
        max-width: 88%;
        font-size: 13.5px;
        border-radius: 16px 16px 16px 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        padding: 12px 14px;
        border: none;
      }

      .ub {
        max-width: 85%;
        font-size: 13.5px;
        border-radius: 16px 16px 4px 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        padding: 12px 14px;
      }

      .msgs {
        padding: 16px 14px;
        background: #f8fafc;
      }

      .chat-hdr {
        padding: 12px 14px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
        position: relative;
        z-index: 10;
      }

      .inp-row {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 12px));
        gap: 8px;
        background: var(--white);
        border-top: 1px solid rgba(0, 0, 0, 0.04);
        align-items: flex-end;
      }

      #finvio-mic,
      #finvio-stop,
      .snd-btn,
      .inp-attach-btn {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
      }

      .inp-box {
        padding: 12px 16px;
        font-size: 15px;
        border-radius: 22px;
        background: #f1f5f9;
        border: 1px solid transparent;
        min-height: 44px;
      }

      .inp-box:focus {
        background: var(--white);
        border-color: var(--green);
        box-shadow: 0 0 0 3px var(--green-light);
      }

      .chips {
        padding: 10px 14px;
        gap: 8px;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
      }

      .chips::-webkit-scrollbar {
        display: none;
      }

      .chip {
        font-size: 12px;
        padding: 8px 14px;
        border-radius: 20px;
        flex-shrink: 0;
        background: transparent;
        box-shadow: none;
        border: 1px solid var(--border);
      }

      .chat-hdr button:hover {
        background: #f3f4f6 !important;
      }
    }

    @media(min-width:769px) and (max-width:1024px) {
      :root {
        --sidebar: 190px;
      }

      .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .entry-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ══════════════════ DARK MODE ══════════════════ */
    body.dark {
      --bg: #0f1117;
      --white: #1a1d27;
      --border: #2d3145;
      --text: #f1f3f9;
      --text-sub: #c8cde0;
      --text-muted: #8b92b4;
      --text-faint: #5c6387;
      --shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
      --green-light: #0d2818;
      --green-text: #6ab04c;
      --red-light: #2a1010;
      color-scheme: dark;
    }

    /* Sidebar */
    body.dark .sidebar {
      background: #1a1d27;
      border-right-color: #2d3145;
    }

    body.dark .sidebar-brand {
      border-bottom-color: #2d3145;
    }

    body.dark .sidebar-footer {
      border-top-color: #2d3145;
    }

    body.dark .nav-item:hover {
      background: #12151f;
    }

    body.dark .nav-item.active {
      background: #0d2818;
    }

    body.dark .nav-label {
      color: #8b92b4;
    }

    body.dark .nav-item.active .nav-label {
      color: #6ab04c;
    }

    /* Topbar */
    body.dark .topbar {
      background: #1a1d27;
      border-bottom-color: #2d3145;
    }

    body.dark .topbar-title {
      color: #f1f3f9;
    }

    body.dark .topbar-theme-btn {
      background: #1a1d27;
      border-color: #2d3145;
    }

    /* Cards */
    body.dark .card,
    body.dark .stat-card,
    body.dark .entry {
      background: #1a1d27;
      border-color: #2d3145;
    }

    body.dark .card-title {
      color: #f1f3f9;
    }

    body.dark .stat-label {
      color: #5c6387;
    }

    body.dark .entry-key {
      color: #8b92b4;
    }

    body.dark .entry-val {
      color: #c8cde0;
    }

    body.dark .count-row {
      color: #8b92b4;
    }

    body.dark .count-row span {
      color: #f1f3f9;
    }

    body.dark .empty {
      color: #5c6387;
    }

    /* Lists */
    body.dark .rank-row,
    body.dark .list-item {
      background: #12151f;
      border-color: #2d3145;
      color: #c8cde0;
    }

    body.dark .alert-row {
      background: #2a1010;
      border-color: #5a2020;
    }

    body.dark .ins {
      background: #0d2818;
      color: #6ab04c;
      border-left-color: #6ab04c;
    }

    /* Chat */
    body.dark #chat-msgs {
      background: #0f1117;
    }

    body.dark .chat-hdr {
      background: #1a1d27;
      border-bottom-color: #2d3145;
    }

    body.dark #finvio-header-name {
      color: #f1f3f9 !important;
    }

    body.dark .bb {
      background: #1a1d27;
      border-color: #2d3145;
      color: #c8cde0 !important;
    }

    body.dark .bb * {
      color: #c8cde0 !important;
    }

    body.dark .bb .mcl {
      color: #5c6387 !important;
    }

    body.dark .bb .ins {
      color: #6ab04c !important;
      background: #0d2818 !important;
    }

    body.dark .bb .alert-row {
      background: #2a1010 !important;
    }

    body.dark .bb .rank-row {
      background: #12151f !important;
      border-color: #2d3145 !important;
    }

    body.dark .bb .list-item {
      background: #12151f !important;
      border-color: #2d3145 !important;
    }

    body.dark .bb select,
    body.dark .bb input {
      background: #0f1117 !important;
      color: #f1f3f9 !important;
      border-color: #2d3145 !important;
    }

    body.dark .ub {
      background: #5a9e3e;
      color: #fff;
    }

    body.dark .chips {
      background: transparent;
      border-top-color: #2d3145;
    }

    body.dark .chip {
      background: transparent;
      border-color: #2d3145;
      color: #8b92b4;
    }

    body.dark .inp-row {
      background: #1a1d27;
      border-top-color: #2d3145;
    }

    body.dark .inp-box {
      background: #12151f;
      border-color: #2d3145;
      color: #f1f3f9;
    }

    body.dark .inp-box::placeholder {
      color: #5c6387;
    }

    body.dark .chat-ft {
      background: #1a1d27;
      color: #3a3f5c;
    }

    body.dark .typing {
      background: #1a1d27;
      border-color: #2d3145;
    }

    /* Modal */
    body.dark .modal-overlay {
      background: rgba(0, 0, 0, 0.7);
    }

    body.dark .modal-box {
      background: #1a1d27;
    }

    body.dark .modal-box h3 {
      color: #f1f3f9;
    }

    body.dark .field label {
      color: #8b92b4;
    }

    body.dark .field input,
    body.dark .field select {
      background: #0f1117;
      color: #f1f3f9;
      border-color: #2d3145;
    }

    body.dark .btn-cancel {
      background: #1a1d27;
      color: #8b92b4;
      border-color: #2d3145;
    }

    body.dark .btn-edit {
      background: #0d2818;
    }

    body.dark .btn-del {
      background: #2a1010;
    }

    /* Bottom nav */
    body.dark .bottom-nav {
      background: #1a1d27;
      border-top-color: #2d3145;
    }

    body.dark .bnav-label {
      color: #5c6387;
    }

    body.dark .bnav-item.active .bnav-label {
      color: #6ab04c;
    }

    /* Play btn */
    body.dark .play-btn {
      background: #12151f;
    }

    body.dark .play-btn:hover {
      background: #1e2235;
    }

    /* Currency select */
    body.dark #currency-select {
      background: #0f1117;
      color: #f1f3f9;
      border-color: #2d3145;
    }

    body.dark select option {
      background: #1a1d27;
      color: #f1f3f9;
    }

    /* Toggle */
    body.dark .toggle-track {
      background: #6ab04c;
    }

    body.dark .theme-toggle-wrap {
      border-top-color: #2d3145;
    }

    body.dark .toggle-label {
      color: #8b92b4;
    }

    /* Hardcoded color overrides via attribute selectors */
    body.dark [style*="color:#111827"] {
      color: #f1f3f9 !important;
    }

    body.dark [style*="color: #111827"] {
      color: #f1f3f9 !important;
    }

    body.dark [style*="color:#374151"] {
      color: #c8cde0 !important;
    }

    body.dark [style*="color: #374151"] {
      color: #c8cde0 !important;
    }

    body.dark [style*="color:#6b7280"] {
      color: #8b92b4 !important;
    }

    body.dark [style*="color: #6b7280"] {
      color: #8b92b4 !important;
    }

    body.dark [style*="color:#9ca3af"] {
      color: #5c6387 !important;
    }

    body.dark [style*="color: #9ca3af"] {
      color: #5c6387 !important;
    }

    body.dark [style*="color:#d1d5db"] {
      color: #3a3f5c !important;
    }

    body.dark [style*="border-bottom:0.5px solid #f3f4f6"] {
      border-bottom-color: #2d3145 !important;
    }

    body.dark [style*="background:#f3f4f6"] {
      background: #12151f !important;
      color: #c8cde0 !important;
    }

    body.dark [style*="background:#f9fafb"] {
      background: #12151f !important;
    }

    body.dark [style*="background:#f0fdf4"] {
      background: #0d2818 !important;
    }

    body.dark [style*="background:#fff7ed"] {
      background: #1f1208 !important;
    }

    body.dark [style*="background:#fef2f2"] {
      background: #2a1010 !important;
    }

    body.dark [style*="background:#eef2ff"] {
      background: #0d1228 !important;
    }

    body.dark [style*="border:1px solid #e5e7eb"] {
      border-color: #2d3145 !important;
      background: #1a1d27 !important;
      color: #c8cde0 !important;
    }

    body.dark [style*="border:0.5px solid #e5e7eb"] {
      border-color: #2d3145 !important;
    }

    body.dark [style*="stroke:#374151"] {
      stroke: #c8cde0 !important;
    }

    /* Profile page */
    body.dark .finvio-topbtn {
      background: #0d2818;
      border-color: #6ab04c;
      color: #6ab04c;
    }

    body.dark .finvio-topbtn:hover {
      background: #0d2818;
    }

    body.dark .topbar-theme-btn:hover {
      background: #12151f;
    }

    /* ══════════════════ TOGGLE STYLES ══════════════════ */
    .theme-toggle-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px 14px;
      border-top: 1px solid #f3f4f6;
    }

    .toggle-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-faint);
      text-transform: uppercase;
      letter-spacing: .05em;
      flex: 1;
    }

    .toggle-track {
      width: 46px;
      height: 26px;
      border-radius: 13px;
      background: #e5e7eb;
      position: relative;
      cursor: pointer;
      transition: background .3s ease;
      flex-shrink: 0;
      border: none;
      padding: 0;
    }

    .toggle-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      position: absolute;
      top: 3px;
      left: 3px;
      transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      pointer-events: none;
    }

    body.dark .toggle-thumb {
      transform: translateX(20px);
    }

    .topbar-theme-btn {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: 1.5px solid var(--border);
      background: var(--white);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all .2s;
    }

    .topbar-theme-btn:hover {
      background: var(--bg);
    }

    /* ══════════════ MESSAGING TAB — STABLE MOBILE-FIRST UI ══════════════ */
    #s-messages {
      min-height: 0;
      overflow: hidden;
    }

    #s-messages .topbar {
      flex-shrink: 0;
    }

    #messages-body {
      min-height: 0;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
      gap: 16px;
      padding: 20px;
      background: var(--bg);
    }

    .msg-list-pane,
    .msg-chat-area {
      min-height: 0;
      background: var(--white);
      border: 0.5px solid #f3f4f6;
      border-radius: 18px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .msg-list-pane {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 14px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .msg-list-pane::-webkit-scrollbar,
    .msg-chatbox::-webkit-scrollbar {
      width: 4px;
    }

    .msg-list-pane::-webkit-scrollbar-thumb,
    .msg-chatbox::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 4px;
    }

    .msg-connect-card {
      background: linear-gradient(180deg, var(--white), #fbfdfb);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 14px;
      box-shadow: none;
      margin: 0;
      flex-shrink: 0;
    }

    .msg-code-display {
      background: var(--green-light);
      border: 1.5px dashed var(--green);
      border-radius: 14px;
      padding: 14px;
      text-align: center;
      margin-bottom: 12px;
      cursor: pointer;
      transition: transform .15s ease, background .15s ease;
    }

    .msg-code-display:active {
      transform: scale(.99);
    }

    .msg-code-display:hover {
      background: #dcfce7;
    }

    .msg-code-label {
      font-size: 10px;
      color: var(--green);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 4px;
    }

    .msg-code-value {
      font-family: 'Nunito', monospace;
      font-size: 25px;
      font-weight: 900;
      color: var(--green-text);
      letter-spacing: 3px;
      overflow-wrap: anywhere;
    }

    .msg-code-hint {
      font-size: 11px;
      color: var(--text-faint);
      margin-top: 4px;
      font-weight: 600;
    }

    .msg-connect-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
    }

    .msg-connect-input {
      min-width: 0;
      width: 100%;
      height: 44px;
      padding: 0 14px;
      border: 1px solid var(--border);
      border-radius: 12px;
      font-size: 16px;
      color: var(--text);
      background: var(--white);
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 2px;
    }

    .msg-connect-input:focus {
      outline: none;
      border-color: var(--green);
      box-shadow: 0 0 0 3px var(--green-light);
    }

    .msg-connect-btn {
      height: 44px;
      padding: 0 16px;
      border: none;
      border-radius: 12px;
      background: var(--green);
      color: #fff;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
      touch-action: manipulation;
    }

    .msg-connect-btn:hover {
      background: var(--green-dark);
    }

    .msg-connect-btn:disabled {
      background: var(--border);
      cursor: not-allowed;
    }

    .msg-status {
      text-align: center;
      font-size: 11px;
      color: var(--text-faint);
      padding: 8px 0 0;
      background: transparent;
      font-weight: 700;
    }

    .msg-contacts-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 0;
    }

    .msg-list-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 2px 2px 0;
      color: var(--text);
      font-size: 15px;
      font-weight: 900;
    }

    .msg-list-count {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 800;
    }

    .msg-contact-row {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--white);
      padding: 12px;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      transition: transform .15s ease, border-color .15s ease, background .15s ease;
      touch-action: manipulation;
    }

    .msg-contact-row:hover,
    .msg-contact-row.active {
      background: var(--green-light);
      border-color: rgba(106, 176, 76, .35);
    }

    .msg-contact-row:active {
      transform: scale(.99);
    }

    .msg-contact-avatar {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: var(--green);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 900;
      position: relative;
      flex-shrink: 0;
    }

    .msg-contact-dot {
      position: absolute;
      right: -1px;
      bottom: -1px;
      width: 12px;
      height: 12px;
      border: 2px solid var(--white);
      border-radius: 50%;
      background: #cbd5e1;
    }

    .msg-contact-dot.online {
      background: var(--green);
    }

    .msg-contact-main {
      min-width: 0;
    }

    .msg-contact-name {
      color: var(--text);
      font-size: 14px;
      font-weight: 900;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .msg-contact-last {
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 650;
      margin-top: 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .msg-contact-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--text-faint);
    }

    .msg-contact-delete {
      width: 34px;
      height: 34px;
      border: none;
      border-radius: 10px;
      background: var(--red-light);
      color: var(--red);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .msg-contact-empty {
      border: 1px dashed var(--border);
      border-radius: 14px;
      padding: 18px 12px;
      text-align: center;
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 700;
      background: var(--bg);
    }

    .msg-chat-area {
      display: none;
      flex-direction: column;
      height: 100%;
      min-height: 0;
    }

    .msg-chat-hdr {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--white);
      flex-shrink: 0;
    }

    .msg-back-btn {
      display: none;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: var(--bg) !important;
      border: 1px solid var(--border) !important;
      cursor: pointer;
      padding: 0 !important;
      margin-right: 0 !important;
      color: var(--text-sub) !important;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .msg-chatbox {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: #f8fafc;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    .msg-bubble {
      padding: 10px 14px;
      border-radius: 18px;
      max-width: min(74%, 540px);
      font-size: 14px;
      line-height: 1.45;
      word-break: break-word;
      overflow-wrap: anywhere;
      font-weight: 650;
      animation: fadeUp .18s ease;
    }

    .msg-bubble.msg-me {
      background: var(--green);
      color: #fff;
      align-self: flex-end;
      border-bottom-right-radius: 5px;
      box-shadow: 0 2px 8px rgba(106, 176, 76, .22);
    }

    .msg-bubble.msg-them {
      background: var(--white);
      color: var(--text-sub);
      align-self: flex-start;
      border-bottom-left-radius: 5px;
      border: 1px solid var(--border);
    }

    .msg-input-row {
      display: flex;
      gap: 8px;
      padding: 10px 14px 14px;
      align-items: flex-end;
      border-top: 1px solid var(--border);
      background: var(--white);
      flex-shrink: 0;
    }

    .msg-input-box {
      flex: 1;
      min-width: 0;
      min-height: 42px;
      background: #f1f5f9;
      border: 1px solid transparent;
      border-radius: 22px;
      padding: 10px 15px;
      font-size: 16px;
      color: var(--text);
      font-weight: 650;
      font-family: 'Nunito', sans-serif;
      line-height: 1.4;
    }

    .msg-input-box:focus {
      outline: none;
      background: var(--white);
      border-color: var(--green);
      box-shadow: 0 0 0 3px var(--green-light);
    }

    .msg-send-btn,
    .msg-attach-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      touch-action: manipulation;
    }

    .msg-send-btn {
      background: var(--green);
      border: none;
      color: #fff;
      font-size: 17px;
      font-weight: 900;
      box-shadow: 0 2px 8px rgba(106, 176, 76, .28);
    }

    .msg-send-btn:disabled {
      background: var(--border);
      box-shadow: none;
      cursor: not-allowed;
    }

    .msg-empty {
      margin: auto;
      text-align: center;
      padding: 30px 18px;
      color: var(--text-faint);
      font-size: 13px;
      font-weight: 800;
    }

    body.dark .msg-list-pane,
    body.dark .msg-chat-area,
    body.dark .msg-connect-card,
    body.dark .msg-chat-hdr,
    body.dark .msg-input-row {
      background: #1a1d27;
      border-color: #2d3145;
    }

    body.dark #messages-body,
    body.dark .msg-chatbox,
    body.dark .msg-input-box,
    body.dark .msg-contact-empty {
      background: #0f1117;
    }

    body.dark .msg-contact-row {
      background: #1a1d27;
      border-color: #2d3145;
    }

    body.dark .msg-contact-row:hover,
    body.dark .msg-contact-row.active {
      background: #0d2818;
      border-color: #5a9e3e;
    }

    body.dark .msg-bubble.msg-them {
      background: #1a1d27;
      border-color: #2d3145;
      color: #c8cde0;
    }

    body.dark .msg-input-box {
      border-color: #2d3145;
      color: #f1f3f9;
    }

    body.dark .msg-code-display {
      background: #0d2818;
      border-color: #6ab04c;
    }

    body.dark .msg-code-value {
      color: #6ab04c;
    }

    @media(max-width:768px) {
      #s-messages>.content#messages-body {
        display: block;
        padding: 12px 12px calc(84px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
      }

      .msg-list-pane {
        min-height: auto;
        overflow: visible;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        gap: 12px;
      }

      .msg-connect-card {
        border-radius: 18px;
        padding: 14px;
      }

      .msg-contacts-container {
        gap: 9px;
      }

      .msg-contact-row {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        min-height: 68px;
        border-radius: 18px;
        padding: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .035);
      }

      .msg-contact-avatar {
        width: 44px;
        height: 44px;
        border-radius: 15px;
      }

      #s-messages #msg-chat-area.msg-chat-area {
        position: fixed;
        inset: 0;
        z-index: 650;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        min-height: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: var(--white);
      }

      .msg-back-btn {
        display: inline-flex !important;
      }

      .msg-chat-hdr {
        padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
        min-height: calc(58px + env(safe-area-inset-top, 0px));
      }

      .msg-chatbox {
        padding: 14px 12px;
        gap: 8px;
      }

      .msg-bubble {
        max-width: 84%;
        font-size: 14px;
      }

      .msg-input-row {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
      }

      .msg-attach-btn,
      .msg-send-btn {
        width: 44px;
        height: 44px;
      }

      .msg-input-box {
        min-height: 44px;
      }

      body.msg-chat-open {
        overflow: hidden;
      }

      body.msg-chat-open .bottom-nav {
        display: none !important;
      }
    }

    /* ══════════════ MEDIA MESSAGES ══════════════ */
    .msg-bubble img,
    .msg-bubble video {
      max-width: 100%;
      border-radius: 10px;
      cursor: pointer;
      display: block;
      margin-top: 4px;
    }

    .msg-bubble img {
      max-height: 260px;
      object-fit: cover;
    }

    .msg-bubble video {
      max-height: 260px;
    }

    .msg-bubble.msg-media {
      padding: 6px;
      background: transparent;
      border: none;
      box-shadow: none;
    }

    .msg-bubble.msg-media.msg-me {
      background: var(--green);
      padding: 6px;
    }

    .msg-bubble.msg-media.msg-them {
      background: var(--white);
      border: 0.5px solid var(--border);
      padding: 6px;
    }

    body.dark .msg-bubble.msg-media.msg-them {
      background: #1a1d27;
      border-color: #2d3145;
    }

    .msg-attach-btn {
      background: var(--bg);
      border: 1px solid var(--border);
      cursor: pointer;
      color: var(--text-muted);
      font-size: 18px;
      transition: background .15s, border-color .15s;
    }

    .msg-attach-btn:hover {
      background: var(--green-light);
      border-color: var(--green);
      color: var(--green);
    }

    .msg-attach-btn:disabled {
      opacity: .4;
      cursor: not-allowed;
    }

    body.dark .msg-attach-btn {
      background: #12151f;
      border-color: #2d3145;
      color: #9ca3af;
    }

    body.dark .msg-attach-btn:hover {
      background: #0d2818;
      border-color: #6ab04c;
      color: #6ab04c;
    }

    .msg-media-preview {
      position: relative;
      padding: 8px 16px;
      background: var(--white);
      border-top: 1px solid var(--border);
    }

    .msg-media-preview img,
    .msg-media-preview video {
      max-height: 120px;
      border-radius: 10px;
      object-fit: cover;
    }

    .msg-media-preview-close {
      position: absolute;
      top: 4px;
      right: 12px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(0, 0, 0, .6);
      color: #fff;
      border: none;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    body.dark .msg-media-preview {
      background: #1a1d27;
      border-top-color: #2d3145;
    }

    /* Lightbox overlay */
    .msg-lightbox {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0, 0, 0, .88);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: zoom-out;
      animation: fadeIn .2s ease;
    }

    .msg-lightbox img,
    .msg-lightbox video {
      max-width: 92vw;
      max-height: 90vh;
      border-radius: 10px;
      object-fit: contain;
    }

    .msg-lightbox-close {
      position: absolute;
      top: 16px;
      right: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .15);
      color: #fff;
      border: none;
      cursor: pointer;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .msg-lightbox-download {
      position: absolute;
      top: 16px;
      right: 68px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .15);
      color: #fff;
      border: none;
      cursor: pointer;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
    }

    .msg-lightbox-download:hover,
    .msg-lightbox-close:hover {
      background: rgba(255, 255, 255, .3);
    }

    .msg-download-btn {
      position: absolute;
      bottom: 6px;
      right: 6px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(0, 0, 0, .55);
      color: #fff;
      border: none;
      cursor: pointer;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity .2s;
    }

    .msg-bubble:hover .msg-download-btn {
      opacity: 1;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    /* ══════════════ CALENDAR ══════════════ */
    .cal-wrap {
      padding: 16px 0;
      background: rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.5);
    }

    .cal-hdr {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      padding: 10px 20px 24px;
    }

    .cal-btn {
      background: rgba(106, 176, 76, 0.1);
      border: 1px solid rgba(106, 176, 76, 0.15);
      width: 40px;
      height: 40px;
      border-radius: 12px;
      cursor: pointer;
      color: var(--green-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .cal-btn:hover {
      background: rgba(106, 176, 76, 0.2);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(106, 176, 76, 0.15);
    }

    .cal-title {
      font-size: 24px;
      font-weight: 800;
      color: var(--text);
      min-width: 170px;
      text-align: center;
      font-family: 'Nunito', sans-serif;
    }

    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      padding: 0 16px 16px;
      gap: 6px;
    }

    .cal-dh {
      text-align: center;
      font-size: 13px;
      font-weight: 800;
      color: var(--text-faint);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding-bottom: 14px;
    }

    .cal-day {
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 12px 2px;
      transition: all .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      background: transparent;
      border: 1px solid transparent;
      min-height: 60px;
    }

    .cal-day:hover {
      background: rgba(255, 255, 255, 0.9);
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
      border-color: rgba(230, 230, 230, 0.6);
    }

    .cal-day.empty {
      background: transparent;
      cursor: default;
    }

    .cal-day.empty:hover {
      transform: none;
      background: transparent;
      box-shadow: none;
      border-color: transparent;
    }

    .cal-date {
      font-size: 17px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
      line-height: 1;
    }

    .cal-net {
      font-size: 11.5px;
      font-weight: 800;
      padding: 3px 6px;
      border-radius: 6px;
      letter-spacing: -0.02em;
    }

    .cal-net.pos {
      color: var(--green-dark);
      background: rgba(106, 176, 76, 0.12);
    }

    .cal-net.neg {
      color: var(--red);
      background: rgba(239, 68, 68, 0.1);
    }

    .cal-net.neu {
      display: none;
    }

    body.dark .cal-wrap {
      background: rgba(26, 29, 39, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    body.dark .cal-hdr {
      color: #f1f3f9;
    }

    body.dark .cal-btn {
      background: rgba(106, 176, 76, 0.15);
      color: #6ab04c;
      border-color: rgba(106, 176, 76, 0.2);
    }

    body.dark .cal-btn:hover {
      background: rgba(106, 176, 76, 0.25);
      box-shadow: 0 4px 12px rgba(106, 176, 76, 0.2);
    }

    body.dark .cal-title {
      color: #f1f3f9;
    }

    body.dark .cal-dh {
      color: #5c6387;
    }

    body.dark .cal-day:hover {
      background: rgba(45, 49, 69, 0.6);
      border-color: rgba(255, 255, 255, 0.05);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }

    body.dark .cal-date {
      color: #f1f3f9;
    }

    body.dark .cal-net.pos {
      background: rgba(106, 176, 76, 0.15);
      color: #6ab04c;
    }

    body.dark .cal-net.neg {
      background: rgba(239, 68, 68, 0.15);
      color: #ef4444;
    }

    /* ══════════════ CALCULATOR ══════════════ */
    .calc-topbtn {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 8px 14px;
      border: 1.5px solid var(--green);
      border-radius: 10px;
      background: var(--green-light);
      color: var(--green);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      font-family: inherit;
      transition: all .2s;
    }

    .calc-topbtn:hover {
      background: #dcfce7;
      transform: translateY(-1px);
    }

    .calc-disp {
      background: #f8fafc;
      border-radius: 12px;
      padding: 16px;
      font-size: 32px;
      font-weight: 800;
      color: var(--text);
      text-align: right;
      margin-bottom: 16px;
      border: 1px solid var(--border);
      overflow-x: auto;
      white-space: nowrap;
    }

    .calc-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .calc-b {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 0;
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .1s;
      font-family: 'Nunito', sans-serif;
    }

    .calc-b:hover {
      background: #e2e8f0;
    }

    .calc-b.op {
      background: var(--green-light);
      color: var(--green-dark);
      border-color: rgba(106, 176, 76, 0.2);
    }

    .calc-b.op:hover {
      background: rgba(106, 176, 76, 0.2);
    }

    .calc-b.eq {
      background: var(--green);
      color: #fff;
      border-color: var(--green);
      grid-column: span 2;
    }

    .calc-b.eq:hover {
      background: var(--green-dark);
    }

    .calc-act {
      display: flex;
      gap: 8px;
      margin-top: 16px;
    }

    .calc-act-btn {
      flex: 1;
      padding: 12px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      border: none;
      color: #fff;
      transition: all .2s;
      font-family: 'Nunito', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .calc-act-inc {
      background: var(--green);
    }

    .calc-act-inc:hover {
      background: var(--green-dark);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(106, 176, 76, 0.2);
    }

    .calc-act-exp {
      background: var(--red);
    }

    .calc-act-exp:hover {
      background: #b91c1c;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
    }

    body.dark .calc-topbtn {
      background: rgba(106, 176, 76, 0.15);
      border-color: rgba(106, 176, 76, 0.3);
      color: #6ab04c;
    }

    body.dark .calc-topbtn:hover {
      background: rgba(106, 176, 76, 0.25);
    }

    body.dark .calc-disp {
      background: #0f1117;
      border-color: #2d3145;
      color: #f1f3f9;
    }

    body.dark .calc-b {
      background: #1a1d27;
      border-color: #2d3145;
      color: #f1f3f9;
    }

    body.dark .calc-b:hover {
      background: #12151f;
    }

    body.dark .calc-b.op {
      background: rgba(106, 176, 76, 0.15);
      color: #6ab04c;
      border-color: rgba(106, 176, 76, 0.2);
    }

    body.dark .calc-b.op:hover {
      background: rgba(106, 176, 76, 0.25);
    }

    /* ══════════════ MORE FEATURES ══════════════ */
    .more-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      padding: 20px;
    }

    .more-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: var(--white);
      border-radius: 16px;
      padding: 24px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border);
      transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      cursor: pointer;
      text-decoration: none;
      color: var(--text);
    }

    .more-card:hover {
      transform: translateY(-4px) scale(1.02);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
      border-color: var(--green);
    }

    .more-card svg {
      width: 48px;
      height: 48px;
      stroke: var(--green);
      stroke-width: 1.5;
    }

    .more-card span {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
    }

    .more-card p {
      font-size: 13px;
      color: var(--text-faint);
      margin: 0;
      text-align: center;
      font-weight: 500;
    }

    @media(max-width:768px) {
      .more-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
      }
    }

    body.dark .more-card {
      background: #1a1d27;
      border-color: #2d3145;
      color: #f1f3f9;
    }

    body.dark .more-card:hover {
      border-color: #6ab04c;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    }

    body.dark .more-card span {
      color: #f1f3f9;
    }

    body.dark .more-card p {
      color: #8b92b4;
    }

    /* Finvio Model Dropdown - Modern Glassy Style */
    .finvio-model-dropdown {
      position: relative;
      display: inline-block;
    }

    .finvio-model-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px 5px 10px;
      border: 1.5px solid rgba(107, 114, 128, 0.25);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      font-size: 12px;
      font-weight: 700;
      font-family: inherit;
      color: #374151;
      cursor: pointer;
      outline: none;
      box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      transition: all 0.18s ease;
      white-space: nowrap;
      user-select: none;
    }

    .finvio-model-btn:hover {
      border-color: rgba(107, 114, 128, 0.4);
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 2px 14px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 1);
    }

    .finvio-model-btn.pro-active {
      border-color: rgba(99, 102, 241, 0.45);
      background: linear-gradient(135deg, rgba(245, 243, 255, 0.97) 0%, rgba(237, 233, 254, 0.97) 100%);
      color: #5b21b6;
      box-shadow: 0 2px 14px rgba(99, 102, 241, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .finvio-model-btn-label {
      font-size: 12px;
      font-weight: 700;
    }

    .finvio-model-btn-chevron {
      width: 13px;
      height: 13px;
      opacity: 0.5;
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }

    .finvio-model-btn.open .finvio-model-btn-chevron {
      transform: rotate(180deg);
    }

    .finvio-model-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 210px;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(24px) saturate(1.8);
      -webkit-backdrop-filter: blur(24px) saturate(1.8);
      border: 1px solid rgba(229, 231, 235, 0.8);
      border-radius: 14px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13), 0 1.5px 4px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      padding: 6px;
      z-index: 9999;
      display: none;
      animation: dropdownFadeIn 0.15s ease;
    }

    .finvio-model-menu.open {
      display: block;
    }

    @keyframes dropdownFadeIn {
      from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
      }

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

    .finvio-model-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border-radius: 9px;
      cursor: pointer;
      transition: background 0.12s;
    }

    .finvio-model-option:hover {
      background: rgba(243, 244, 246, 0.85);
    }

    .finvio-model-option.selected {
      background: rgba(243, 240, 255, 0.9);
    }

    .finvio-model-option-icon {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
    }

    .finvio-model-option-icon.free {
      background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    }

    .finvio-model-option-icon.pro {
      background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    }

    .finvio-model-option-info {
      flex: 1;
    }

    .finvio-model-option-name {
      font-size: 13px;
      font-weight: 700;
      color: #111827;
      line-height: 1.3;
    }

    .finvio-model-option.selected .finvio-model-option-name {
      color: #5b21b6;
    }

    .finvio-model-option-desc {
      font-size: 10.5px;
      color: #9ca3af;
      font-weight: 500;
      margin-top: 1px;
    }

    .finvio-model-checkmark {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      color: #7c3aed;
      display: none;
    }

    .finvio-model-option.selected .finvio-model-checkmark {
      display: block;
    }

    .finvio-model-divider {
      height: 1px;
      background: rgba(229, 231, 235, 0.6);
      margin: 4px 2px;
    }

    body.dark .finvio-model-btn {
      background: rgba(31, 41, 55, 0.9);
      border-color: rgba(75, 85, 99, 0.4);
      color: #e5e7eb;
      box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
    }

    body.dark .finvio-model-btn.pro-active {
      background: linear-gradient(135deg, rgba(30, 27, 75, 0.95) 0%, rgba(49, 46, 129, 0.95) 100%);
      border-color: rgba(99, 102, 241, 0.5);
      color: #c4b5fd;
    }

    body.dark .finvio-model-menu {
      background: rgba(17, 24, 39, 0.95);
      border-color: rgba(55, 65, 81, 0.7);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    body.dark .finvio-model-option:hover {
      background: rgba(55, 65, 81, 0.6);
    }

    body.dark .finvio-model-option.selected {
      background: rgba(30, 27, 75, 0.7);
    }

    body.dark .finvio-model-option-name {
      color: #f3f4f6;
    }

    body.dark .finvio-model-option.selected .finvio-model-option-name {
      color: #c4b5fd;
    }

    body.dark .finvio-model-divider {
      background: rgba(55, 65, 81, 0.7);
    }

    /* ── Finvio Pro Payment Gate Styles ─────────────────────────────── */
    .fpro-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .fpro-overlay.show {
      display: flex;
    }

    .fpro-box {
      background: #fff;
      border-radius: 20px;
      padding: 28px 24px 24px;
      width: 100%;
      max-width: 400px;
      box-shadow: 0 16px 60px rgba(0, 0, 0, 0.2);
      text-align: center;
      animation: fadeUp .25s ease;
    }

    body.dark .fpro-box {
      background: #1a1d27;
      color: #f1f3f9;
    }

    .fpro-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      color: #fff;
      border-radius: 20px;
      padding: 5px 14px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .04em;
      margin-bottom: 14px;
    }

    .fpro-title {
      font-size: 20px;
      font-weight: 900;
      color: #111827;
      margin-bottom: 6px;
    }

    body.dark .fpro-title {
      color: #f1f3f9;
    }

    .fpro-desc {
      font-size: 13px;
      color: #6b7280;
      margin-bottom: 18px;
      line-height: 1.55;
    }

    body.dark .fpro-desc {
      color: #8b92b4;
    }

    .fpro-qr-wrap {
      background: #f9fafb;
      border-radius: 14px;
      padding: 18px;
      margin-bottom: 16px;
      border: 1px solid #e5e7eb;
    }

    body.dark .fpro-qr-wrap {
      background: #12151f;
      border-color: #2d3145;
    }

    .fpro-qr-wrap img {
      width: 180px;
      height: 180px;
      border-radius: 8px;
      object-fit: cover;
    }

    .fpro-price {
      font-size: 28px;
      font-weight: 900;
      color: #111827;
      margin-bottom: 4px;
    }

    body.dark .fpro-price {
      color: #f1f3f9;
    }

    .fpro-price-sub {
      font-size: 12px;
      color: #9ca3af;
      margin-bottom: 14px;
      font-weight: 500;
    }

    .fpro-email-note {
      font-size: 12px;
      color: #374151;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 10px;
      padding: 10px 14px;
      margin-bottom: 16px;
      line-height: 1.5;
      text-align: left;
    }

    body.dark .fpro-email-note {
      background: #0d2818;
      border-color: #14532d;
      color: #bbf7d0;
    }

    .fpro-have-code-btn {
      width: 100%;
      padding: 11px;
      border-radius: 11px;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      border: none;
      cursor: pointer;
      font-family: inherit;
      margin-bottom: 8px;
      transition: opacity .2s;
    }

    .fpro-have-code-btn:hover {
      opacity: .9;
    }

    .fpro-cancel-btn {
      width: 100%;
      padding: 10px;
      border-radius: 11px;
      background: none;
      color: #9ca3af;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e5e7eb;
      cursor: pointer;
      font-family: inherit;
      transition: all .15s;
    }

    body.dark .fpro-cancel-btn {
      border-color: #2d3145;
      color: #5c6387;
    }

    .fpro-cancel-btn:hover {
      background: #f9fafb;
      color: #374151;
    }

    body.dark .fpro-cancel-btn:hover {
      background: #12151f;
      color: #c8cde0;
    }

    /* Code entry panel */
    .fpro-code-box {
      background: #fff;
      border-radius: 20px;
      padding: 28px 24px 24px;
      width: 100%;
      max-width: 380px;
      box-shadow: 0 16px 60px rgba(0, 0, 0, 0.2);
      text-align: center;
      animation: fadeUp .25s ease;
    }

    body.dark .fpro-code-box {
      background: #1a1d27;
    }

    .fpro-code-inputs {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin: 20px 0 16px;
    }

    .fpro-digit {
      width: 44px;
      height: 54px;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      font-size: 22px;
      font-weight: 800;
      text-align: center;
      color: #111827;
      background: #f9fafb;
      font-family: 'Nunito', monospace;
      transition: border-color .15s;
      outline: none;
    }

    body.dark .fpro-digit {
      background: #12151f;
      border-color: #2d3145;
      color: #f1f3f9;
    }

    .fpro-digit:focus {
      border-color: #8b5cf6;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(139, 92, 246, .15);
    }

    body.dark .fpro-digit:focus {
      background: #0f1117;
    }

    .fpro-verify-btn {
      width: 100%;
      padding: 12px;
      border-radius: 11px;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      border: none;
      cursor: pointer;
      font-family: inherit;
      margin-bottom: 8px;
      transition: opacity .2s;
    }

    .fpro-verify-btn:hover {
      opacity: .9;
    }

    .fpro-verify-btn:disabled {
      opacity: .5;
      cursor: not-allowed;
    }

    .fpro-back-btn {
      width: 100%;
      padding: 10px;
      border-radius: 11px;
      background: none;
      color: #9ca3af;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e5e7eb;
      cursor: pointer;
      font-family: inherit;
      transition: all .15s;
    }

    body.dark .fpro-back-btn {
      border-color: #2d3145;
      color: #5c6387;
    }

    .fpro-back-btn:hover {
      background: #f9fafb;
      color: #374151;
    }

    body.dark .fpro-back-btn:hover {
      background: #12151f;
      color: #c8cde0;
    }

    .fpro-msg {
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 10px;
      padding: 9px 14px;
      border-radius: 9px;
      display: none;
    }

    .fpro-msg.error {
      background: #fef2f2;
      color: #dc2626;
      display: block;
    }

    .fpro-msg.success {
      background: #f0fdf4;
      color: #16a34a;
      display: block;
    }

    body.dark .fpro-msg.error {
      background: #450a0a;
      color: #fca5a5;
    }

    body.dark .fpro-msg.success {
      background: #052e16;
      color: #86efac;
    }

    /* Active Pro badge in dropdown */
    .finvio-pro-active-badge {
      display: inline-block;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      color: #fff;
      font-size: 9px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 6px;
      letter-spacing: .04em;
      margin-left: 4px;
      vertical-align: middle;
    }

    .fpro-status-banner {
      font-size: 11px;
      color: #7c3aed;
      font-weight: 700;
      padding: 4px 10px;
      background: #f5f3ff;
      border-radius: 8px;
      margin-top: 3px;
      display: none;
    }

    body.dark .fpro-status-banner {
      background: #1e1b4b;
      color: #c4b5fd;
    }

    /* Finvio Pro styles */

    .finvio-pro-card {
      background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
      border-radius: 12px;
      padding: 16px;
      color: #fff;
      margin-bottom: 10px;
    }

    .finvio-pro-card h4 {
      font-size: 14px;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .finvio-pro-meter {
      height: 8px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.15);
      overflow: hidden;
      margin: 6px 0;
    }

    .finvio-pro-meter-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 0.6s ease;
    }

    .finvio-pro-section {
      margin-bottom: 12px;
    }

    .finvio-pro-section-title {
      font-size: 12px;
      font-weight: 700;
      color: #6366f1;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }

    .finvio-pro-insight {
      background: #f5f3ff;
      border: 1px solid #ddd6fe;
      border-radius: 10px;
      padding: 12px;
      margin-bottom: 8px;
      font-size: 13px;
      color: #374151;
      line-height: 1.6;
    }

    .finvio-pro-action {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 8px 0;
      border-bottom: 1px solid #f3f4f6;
    }

    .finvio-pro-action:last-child {
      border-bottom: none;
    }

    .finvio-pro-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .finvio-pro-urgent {
      background: #fef2f2;
      color: #dc2626;
    }

    .finvio-pro-important {
      background: #fff7ed;
      color: #ea580c;
    }

    .finvio-pro-optimize {
      background: #f0fdf4;
      color: #16a34a;
    }

    .finvio-pro-info {
      background: #eff6ff;
      color: #2563eb;
    }

    body.dark .finvio-pro-insight {
      background: #1e1b4b;
      border-color: #312e81;
      color: #e0e7ff;
    }

    body.dark .finvio-pro-urgent {
      background: #450a0a;
      color: #fca5a5;
    }

    body.dark .finvio-pro-important {
      background: #431407;
      color: #fdba74;
    }

    body.dark .finvio-pro-optimize {
      background: #052e16;
      color: #86efac;
    }

    body.dark .finvio-pro-info {
      background: #172554;
      color: #93c5fd;
    }


    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .spinner {
      display: inline-block;
    }
    /* ── Finvio AI Max — Markdown + LaTeX answer rendering ── */
    .finvio-max-md { font-size: 13.5px; line-height: 1.65; color: var(--text-sub); font-weight: 500; word-wrap: break-word; }
    .finvio-max-md h1, .finvio-max-md h2, .finvio-max-md h3, .finvio-max-md h4 { color: var(--text); font-weight: 800; margin: 12px 0 6px; line-height: 1.3; }
    .finvio-max-md h1 { font-size: 18px; }
    .finvio-max-md h2 { font-size: 16px; }
    .finvio-max-md h3 { font-size: 14.5px; }
    .finvio-max-md h4 { font-size: 13.5px; }
    .finvio-max-md p { margin: 6px 0; }
    .finvio-max-md strong, .finvio-max-md b { color: var(--text); font-weight: 800; }
    .finvio-max-md em, .finvio-max-md i { font-style: italic; }
    .finvio-max-md ul, .finvio-max-md ol { margin: 6px 0 8px 20px; padding-left: 4px; }
    .finvio-max-md li { margin: 3px 0; }
    .finvio-max-md code { background: #f3f4f6; padding: 1.5px 6px; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: #b45309; }
    .finvio-max-md pre { background: #0f172a; color: #e2e8f0; padding: 10px 12px; border-radius: 10px; overflow-x: auto; margin: 8px 0; font-size: 12px; }
    .finvio-max-md pre code { background: transparent; color: inherit; padding: 0; }
    .finvio-max-md blockquote { border-left: 3px solid var(--green); background: var(--green-light); padding: 6px 10px; margin: 8px 0; border-radius: 6px; color: var(--green-text); }
    .finvio-max-md table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 12.5px; }
    .finvio-max-md th, .finvio-max-md td { border: 1px solid var(--border); padding: 6px 9px; text-align: left; }
    .finvio-max-md th { background: #f9fafb; font-weight: 700; color: var(--text); }
    .finvio-max-md a { color: var(--blue); text-decoration: underline; }
    .finvio-max-md hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
    .finvio-max-md .katex { font-size: 1.02em; }
    .finvio-max-md .katex-display { margin: 10px 0; overflow-x: auto; overflow-y: hidden; }
    body.dark .finvio-max-md { color: #d1d5db; }
    body.dark .finvio-max-md h1, body.dark .finvio-max-md h2, body.dark .finvio-max-md h3, body.dark .finvio-max-md h4, body.dark .finvio-max-md strong { color: #f9fafb; }
    body.dark .finvio-max-md code { background: #1f2937; color: #fbbf24; }
    body.dark .finvio-max-md th { background: #1f2937; color: #f9fafb; }
    body.dark .finvio-max-md th, body.dark .finvio-max-md td { border-color: #374151; }
  

/* ===== inline style ===== */
  :root {
    --vp-glass: rgba(255, 255, 255, 0.08);
    --vp-glass-strong: rgba(255, 255, 255, 0.14);
    --vp-stroke: rgba(255, 255, 255, 0.18);
    --vp-stroke-strong: rgba(255, 255, 255, 0.32);
    --vp-text: rgba(255, 255, 255, 0.96);
    --vp-text-dim: rgba(255, 255, 255, 0.62);
    --vp-accent: #7CC8FF;
    --vp-accent-2: #B68BFF;
    --vp-good: #6EE7B7;
    --vp-warn: #FFB86B;
    --vp-bad: #FF8A8A;
  }

  /* Entry Button — frosted pill */
  /* Aura Nav Item Special Styling */
  .nav-item#nav-aura .nav-label {
    background: linear-gradient(135deg, #7cc8ff, #b68bff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
  }
  
  .nav-item#nav-aura svg {
    stroke: #b68bff;
  }

  .bnav-item#bnav-aura .bnav-label {
    background: linear-gradient(135deg, #7cc8ff, #b68bff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
  }
  
  .bnav-item#bnav-aura svg {
    stroke: #b68bff;
  }

  /* Main AR Overlay */
  #finvio-ar-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    background: #05060a;
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    color: var(--vp-text);
    overflow: hidden;
  }

  #ar-video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
    filter: brightness(0.55) contrast(1.05) saturate(1.1);
  }

  /* Ambient gradient wash like Vision Pro environments */
  #finvio-ar-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(900px 600px at 15% 10%, rgba(124, 200, 255, 0.18), transparent 60%),
      radial-gradient(900px 700px at 85% 90%, rgba(182, 139, 255, 0.18), transparent 60%),
      radial-gradient(600px 400px at 50% 50%, rgba(0, 0, 0, 0.35), transparent 70%);
    z-index: 2;
    pointer-events: none;
  }

  #ar-canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scaleX(-1);
    z-index: 5;
  }

  /* HUD Layer */
  .ar-hud {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    padding: 28px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 18px;
  }

  /* Glass — Apple Vision Pro style */
  .glass-panel {
    background: var(--vp-glass);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid var(--vp-stroke);
    border-radius: 28px;
    padding: 18px 22px;
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
  }

  .glass-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 40%);
  }

  /* Top bar */
  .vp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .vp-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--vp-glass-strong);
    border: 1px solid var(--vp-stroke);
    border-radius: 999px;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
  }

  .vp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vp-good);
    box-shadow: 0 0 12px var(--vp-good);
    animation: vp-pulse 1.6s ease-in-out infinite;
  }

  @keyframes vp-pulse {

    0%,
    100% {
      opacity: .6;
      transform: scale(1);
    }

    50% {
      opacity: 1;
      transform: scale(1.3);
    }
  }

  .vp-brand-title {
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 800;
    color: var(--vp-text);
  }

  .vp-brand-sub {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--vp-text-dim);
    margin-top: 2px;
  }

  .vp-time {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--vp-text-dim);
    letter-spacing: 1.5px;
  }

  /* Center insight panel */
  .vp-center {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .vp-insight {
    max-width: 520px;
    min-width: 320px;
  }

  .vp-insight .vp-eyebrow {
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--vp-accent);
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .vp-insight .vp-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vp-accent);
    box-shadow: 0 0 10px var(--vp-accent);
  }

  #finvio-pro-text {
    font-size: 18px;
    margin-top: 10px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--vp-text);
    letter-spacing: 0.2px;
  }

  .vp-gesture-hint {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--vp-glass-strong);
    border: 1px solid var(--vp-stroke);
    border-radius: 999px;
    font-size: 11px;
    color: var(--vp-text-dim);
    letter-spacing: 1px;
  }

  /* Bottom metrics row */
  .bottom-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .metric-card {
    padding: 16px 18px;
  }

  .m-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--vp-text-dim);
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 700;
  }

  .m-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--vp-text);
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
  }

  .m-sub {
    font-size: 11px;
    color: var(--vp-text-dim);
    margin-top: 4px;
  }

  .m-accent-good {
    color: var(--vp-good);
  }

  .m-accent-warn {
    color: var(--vp-warn);
  }

  .m-accent-bad {
    color: var(--vp-bad);
  }

  /* Right rail — top categories */
  .vp-rail {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    pointer-events: none;
    z-index: 10;
  }

  .vp-rail .glass-panel {
    padding: 16px 18px;
  }

  .vp-rail h4 {
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--vp-text-dim);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 12px;
  }

  .vp-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .vp-cat-row:last-child {
    border-bottom: 0;
  }

  .vp-cat-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--vp-text);
  }

  .vp-cat-amt {
    font-size: 13px;
    font-weight: 800;
    color: var(--vp-accent);
    font-variant-numeric: tabular-nums;
  }

  .vp-cat-bar {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    margin-top: 6px;
    overflow: hidden;
  }

  .vp-cat-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--vp-accent), var(--vp-accent-2));
    border-radius: 999px;
  }

  /* Exit */
  .ar-exit {
    background: var(--vp-glass-strong);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid var(--vp-stroke);
    color: var(--vp-text);
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
    pointer-events: auto;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
    transition: background .2s ease, border-color .2s ease;
  }

  .ar-exit:hover {
    background: rgba(255, 138, 138, 0.18);
    border-color: rgba(255, 138, 138, 0.5);
    color: var(--vp-bad);
  }

  /* Mobile AR UI Redesign - Apple Style */
  @media (max-width: 720px) {
    .ar-hud {
      padding: 16px;
      padding-top: calc(16px + env(safe-area-inset-top));
      padding-bottom: calc(16px + env(safe-area-inset-bottom));
      grid-template-rows: auto 1fr auto;
      gap: 12px;
    }

    .vp-topbar {
      padding: 0 4px;
    }

    .vp-brand {
      padding: 6px 12px;
    }

    .vp-brand-title {
      font-size: 11px;
    }

    .vp-time {
      display: none; /* Hide on small mobile to save space */
    }

    .vp-rail {
      display: none;
    }

    .bottom-metrics {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .metric-card {
      padding: 12px 14px;
      border-radius: 20px;
    }

    .m-label {
      font-size: 8px;
      letter-spacing: 1px;
      margin-bottom: 4px;
    }

    .m-value {
      font-size: 18px;
    }

    .m-sub {
      font-size: 9px;
    }

    .vp-center {
      align-items: center;
      justify-content: center;
    }

    .vp-insight {
      min-width: 0;
      width: 100%;
      border-radius: 24px;
      padding: 16px 20px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(25px) saturate(180%);
      -webkit-backdrop-filter: blur(25px) saturate(180%);
    }

    #finvio-pro-text {
      font-size: 15px;
      font-weight: 500;
    }

    .ar-exit {
      padding: 10px 20px;
      font-size: 14px;
      border-radius: 999px;
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

/* ===== inline style ===== */
        .call-wrap {
          font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif;
          max-width: 520px;
          margin: 0 auto;
          padding: 8px 4px
        }

        .call-hero {
          background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
          border-radius: 28px;
          padding: 28px 22px;
          text-align: center;
          box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 20px 50px -20px rgba(15, 23, 42, .18);
          position: relative;
          overflow: hidden
        }

        .call-hero::before {
          content: "";
          position: absolute;
          inset: 0;
          background: radial-gradient(120% 60% at 50% -10%, rgba(52, 199, 89, .18), transparent 60%);
          pointer-events: none
        }

        .call-hero-vid {
          background: #0b0b0d;
          color: #fff
        }

        .call-hero-vid::before {
          background: radial-gradient(120% 60% at 50% -10%, rgba(0, 122, 255, .35), transparent 60%)
        }

        .call-avatar {
          width: 96px;
          height: 96px;
          border-radius: 50%;
          margin: 6px auto 14px;
          background: linear-gradient(135deg, #34c759, #30b350);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 42px;
          box-shadow: 0 12px 30px -10px rgba(52, 199, 89, .6);
          position: relative;
          z-index: 1
        }

        .call-avatar.vid {
          background: linear-gradient(135deg, #0a84ff, #0066d6);
          box-shadow: 0 12px 30px -10px rgba(10, 132, 255, .6)
        }

        .call-status-pill {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 6px 14px;
          border-radius: 999px;
          background: rgba(52, 199, 89, .12);
          color: #0f7a3a;
          font-size: 12px;
          font-weight: 600;
          margin-bottom: 8px;
          position: relative;
          z-index: 1
        }

        .call-status-pill .dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #34c759;
          box-shadow: 0 0 0 0 rgba(52, 199, 89, .6);
          animation: pulseDot 1.8s infinite
        }

        @keyframes pulseDot {
          0% {
            box-shadow: 0 0 0 0 rgba(52, 199, 89, .5)
          }

          70% {
            box-shadow: 0 0 0 8px rgba(52, 199, 89, 0)
          }

          100% {
            box-shadow: 0 0 0 0 rgba(52, 199, 89, 0)
          }
        }

        .call-title {
          font-size: 22px;
          font-weight: 700;
          letter-spacing: -.02em;
          color: #111827;
          position: relative;
          z-index: 1
        }

        .call-hero-vid .call-title {
          color: #fff
        }

        .call-sub {
          font-size: 13px;
          color: #6b7280;
          margin-top: 4px;
          position: relative;
          z-index: 1
        }

        .call-hero-vid .call-sub {
          color: #a1a1aa
        }

        .code-display {
          margin: 18px auto 4px;
          display: inline-flex;
          gap: 6px;
          padding: 14px 18px;
          border-radius: 18px;
          background: #fff;
          box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -12px rgba(15, 23, 42, .18);
          position: relative;
          z-index: 1
        }

        .code-cell {
          width: 30px;
          height: 42px;
          border-radius: 8px;
          background: #f3f4f6;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: "SF Mono", ui-monospace, Menlo, monospace;
          font-size: 22px;
          font-weight: 700;
          color: #111827
        }

        .code-cell.empty {
          color: #cbd5e1
        }

        .copy-chip {
          margin-top: 10px;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 7px 14px;
          border-radius: 999px;
          background: rgba(0, 0, 0, .05);
          border: none;
          font-size: 12px;
          font-weight: 600;
          color: #374151;
          cursor: pointer;
          position: relative;
          z-index: 1
        }

        .copy-chip:hover {
          background: rgba(0, 0, 0, .08)
        }

        .call-hero-vid .copy-chip {
          background: rgba(255, 255, 255, .12);
          color: #fff
        }

        .call-actions {
          display: flex;
          justify-content: center;
          gap: 18px;
          margin-top: 22px;
          flex-wrap: wrap
        }

        .ic-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 64px;
          height: 64px;
          border-radius: 50%;
          border: none;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26px;
          color: #fff;
          transition: transform .15s ease, box-shadow .15s ease;
          box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .3)
        }

        .ic-btn:active {
          transform: scale(.94)
        }

        .ic-btn.green {
          background: linear-gradient(135deg, #34c759, #28a745)
        }

        .ic-btn.blue {
          background: linear-gradient(135deg, #0a84ff, #0066d6)
        }

        .ic-btn.red {
          background: linear-gradient(135deg, #ff3b30, #d6261c)
        }

        .ic-btn.gray {
          background: rgba(120, 120, 128, .18);
          color: #1c1c1e;
          box-shadow: none
        }

        .call-hero-vid .ic-btn.gray {
          background: rgba(255, 255, 255, .18);
          color: #fff
        }

        .ic-label {
          display: block;
          text-align: center;
          font-size: 11px;
          color: #6b7280;
          margin-top: 6px;
          font-weight: 500
        }

        .call-hero-vid .ic-label {
          color: #a1a1aa
        }

        .ic-stack {
          display: flex;
          flex-direction: column;
          align-items: center
        }

        .join-card {
          margin-top: 18px;
          background: #fff;
          border-radius: 22px;
          padding: 20px;
          box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 10px 30px -18px rgba(15, 23, 42, .2)
        }

        .join-card h4 {
          margin: 0 0 4px;
          font-size: 15px;
          font-weight: 700;
          color: #111827;
          letter-spacing: -.01em
        }

        .join-card p {
          margin: 0 0 14px;
          font-size: 12px;
          color: #9ca3af
        }

        .otp-row {
          display: flex;
          gap: 8px;
          justify-content: center
        }

        .otp-input {
          width: 100%;
          max-width: 300px;
          height: 54px;
          text-align: center;
          font-family: "SF Mono", ui-monospace, Menlo, monospace;
          font-size: 24px;
          font-weight: 700;
          letter-spacing: 10px;
          border: 1.5px solid #e5e7eb;
          border-radius: 14px;
          background: #f9fafb;
          color: #111827;
          text-transform: uppercase;
          outline: none;
          transition: border-color .15s, background .15s
        }

        .otp-input:focus {
          border-color: #0a84ff;
          background: #fff;
          box-shadow: 0 0 0 4px rgba(10, 132, 255, .12)
        }

        .join-btn {
          margin-top: 12px;
          width: 100%;
          height: 48px;
          border: none;
          border-radius: 14px;
          background: linear-gradient(135deg, #0a84ff, #0066d6);
          color: #fff;
          font-size: 15px;
          font-weight: 600;
          cursor: pointer;
          box-shadow: 0 8px 20px -10px rgba(10, 132, 255, .6)
        }

        .join-btn:active {
          transform: scale(.98)
        }

        .vid-stage {
          position: relative;
          background: #000;
          border-radius: 24px;
          overflow: hidden;
          aspect-ratio: 9/14;
          max-height: 60vh;
          margin: 6px auto 0;
          box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .5)
        }

        .vid-stage video.remote {
          width: 100%;
          height: 100%;
          object-fit: cover;
          background: #0b0b0d
        }

        .vid-stage video.local {
          position: absolute;
          top: 14px;
          right: 14px;
          width: 90px;
          height: 130px;
          border-radius: 14px;
          object-fit: cover;
          background: #1c1c1e;
          border: 2px solid rgba(255, 255, 255, .2);
          box-shadow: 0 6px 18px rgba(0, 0, 0, .5)
        }

        .vid-overlay {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          padding: 18px 14px 16px;
          background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .55));
          display: flex;
          justify-content: center;
          gap: 14px;
          flex-wrap: wrap
        }

        .vid-overlay .ic-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 54px;
          height: 54px;
          font-size: 22px
        }

        .vid-overlay .ic-btn.gray {
          background: rgba(255, 255, 255, .18);
          color: #fff;
          backdrop-filter: blur(20px)
        }

        .vid-top-info {
          position: absolute;
          top: 14px;
          left: 14px;
          right: 120px;
          color: #fff;
          z-index: 2
        }

        .vid-top-info .t {
          font-size: 15px;
          font-weight: 600
        }

        .vid-top-info .s {
          font-size: 11px;
          color: rgba(255, 255, 255, .7);
          margin-top: 2px
        }

        /* Fullscreen mode */
        .vid-stage.fs,
        .call-hero.fs {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
          width: 100% !important;
          height: 100vh !important;
          height: 100dvh !important;
          max-width: none !important;
          max-height: none !important;
          aspect-ratio: auto !important;
          border-radius: 0 !important;
          margin: 0 !important;
          padding-top: env(safe-area-inset-top) !important;
          padding-bottom: env(safe-area-inset-bottom) !important;
          z-index: 9999;
          box-shadow: none !important
        }

        body.call-fs-lock {
          overflow: hidden !important;
          position: fixed !important;
          width: 100% !important;
          height: 100% !important
        }

        .vid-stage.fs video.local {
          width: 160px;
          height: 220px;
          top: 20px;
          right: 20px
        }

        /* Minimized mode (Picture-in-Picture style floating widget) */
        .vid-stage.mini,
        .call-hero.mini {
          position: fixed !important;
          bottom: 18px;
          right: 18px;
          width: 220px !important;
          height: 300px !important;
          max-height: none !important;
          aspect-ratio: auto !important;
          margin: 0 !important;
          z-index: 9998;
          border-radius: 18px !important;
          box-shadow: 0 10px 40px rgba(0, 0, 0, .4) !important;
          cursor: move
        }

        .call-hero.mini {
          height: 140px !important;
          padding: 14px !important
        }

        .vid-stage.mini video.local {
          width: 50px;
          height: 70px;
          top: 6px;
          right: 6px;
          border-radius: 8px
        }

        .vid-stage.mini .vid-top-info {
          display: none
        }

        .vid-stage.mini .vid-overlay {
          padding: 6px;
          gap: 4px
        }

        .vid-stage.mini .vid-overlay .ic-btn {
          width: 32px;
          height: 32px;
          font-size: 14px
        }

        .vid-stage.mini .vid-overlay .ic-btn svg {
          width: 14px;
          height: 14px
        }

        .vid-stage.mini .vid-overlay .ic-btn.hide-mini {
          display: none
        }

        .call-hero.mini .call-avatar,
        .call-hero.mini .call-sub,
        .call-hero.mini .call-status-pill,
        .call-hero.mini .copy-chip,
        .call-hero.mini .code-display,
        .call-hero.mini .ic-label {
          display: none !important
        }

        .call-hero.mini .call-title {
          font-size: 13px;
          margin-bottom: 6px
        }

        .call-hero.mini .call-actions {
          margin-top: 6px;
          gap: 8px
        }

        .call-hero.mini .call-actions .ic-stack:not(.keep-mini) {
          display: none
        }

        .call-hero.mini .ic-btn {
          width: 38px;
          height: 38px
        }
      

/* ===== inline style ===== */
    .filter-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding: 10px 16px;
      background: var(--white);
      border-bottom: 1px solid var(--border);
    }

    .filter-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--white);
      font: 600 12px/1 'Nunito', sans-serif;
      color: var(--text-sub);
      cursor: pointer;
      transition: .18s;
    }

    .filter-btn:hover {
      background: #f9fafb;
      border-color: #d1d5db;
    }

    .filter-btn.active {
      background: var(--green-light);
      border-color: var(--green);
      color: var(--green-text);
    }

    .filter-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 9px;
      background: var(--green);
      color: #fff;
      font: 700 10px/1 'Nunito', sans-serif;
    }

    .filter-chips {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      flex: 1;
    }

    .filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 6px 5px 10px;
      border-radius: 999px;
      background: var(--green-light);
      color: var(--green-text);
      font: 600 11px/1 'Nunito', sans-serif;
    }

    .filter-chip button {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: rgba(22, 101, 52, .15);
      border: none;
      color: var(--green-text);
      cursor: pointer;
      font: 700 11px/1 'Nunito', sans-serif;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .filter-chip button:hover {
      background: rgba(22, 101, 52, .3);
    }

    .filter-clear {
      padding: 6px 10px;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: var(--red);
      font: 700 11px/1 'Nunito', sans-serif;
      cursor: pointer;
    }

    .filter-clear:hover {
      background: var(--red-light);
    }

    .filter-panel {
      display: none;
      padding: 14px 16px;
      background: #fafbfc;
      border-bottom: 1px solid var(--border);
    }

    .filter-panel.open {
      display: block;
    }

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

    .filter-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .filter-field label {
      font: 700 10px/1 'Nunito', sans-serif;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .filter-field input,
    .filter-field select {
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font: 500 12px/1.2 'Nunito', sans-serif;
      color: var(--text);
      background: var(--white);
      outline: none;
      transition: .15s;
    }

    .filter-field input:focus,
    .filter-field select:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(106, 176, 76, .15);
    }

    .filter-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 12px;
    }

    .filter-reset,
    .filter-apply {
      padding: 8px 14px;
      border-radius: 8px;
      font: 700 12px/1 'Nunito', sans-serif;
      cursor: pointer;
      border: none;
    }

    .filter-reset {
      background: var(--white);
      border: 1px solid var(--border);
      color: var(--text-sub);
    }

    .filter-reset:hover {
      background: #f3f4f6;
    }

    .filter-apply {
      background: var(--green);
      color: #fff;
    }

    .filter-apply:hover {
      background: var(--green-dark);
    }

    .filter-empty {
      padding: 30px 16px;
      text-align: center;
      color: var(--text-muted);
      font: 600 13px/1.5 'Nunito', sans-serif;
    }

    .filter-empty .filter-empty-sub {
      display: block;
      font-weight: 500;
      font-size: 12px;
      margin-top: 6px;
      color: var(--text-faint);
    }

    /* Finvio filter result card */
    .finvio-filter-card {
      background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
      border: 1px solid #bbf7d0;
      border-radius: 12px;
      padding: 12px;
      margin-top: 4px;
    }

    .finvio-filter-card .ffc-head {
      font: 700 12px/1.3 'Nunito', sans-serif;
      color: var(--green-text);
      margin-bottom: 8px;
    }

    .finvio-filter-card .ffc-criteria {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-bottom: 10px;
    }

    .finvio-filter-card .ffc-criteria span {
      background: rgba(255, 255, 255, .7);
      padding: 3px 8px;
      border-radius: 999px;
      font: 600 10px/1.2 'Nunito', sans-serif;
      color: var(--green-text);
    }

    .finvio-filter-card .ffc-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 10px;
    }

    .finvio-filter-card .ffc-stat {
      background: #fff;
      border-radius: 8px;
      padding: 8px 10px;
    }

    .finvio-filter-card .ffc-stat-l {
      font: 700 9px/1 'Nunito', sans-serif;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: 4px;
    }

    .finvio-filter-card .ffc-stat-v {
      font: 800 14px/1 'Nunito', sans-serif;
      color: var(--text);
    }

    .finvio-filter-card .ffc-list {
      max-height: 180px;
      overflow-y: auto;
      background: #fff;
      border-radius: 8px;
      padding: 6px 8px;
      margin-bottom: 10px;
    }

    .finvio-filter-card .ffc-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 0;
      border-bottom: 1px solid #f3f4f6;
      font: 600 11px/1.3 'Nunito', sans-serif;
    }

    .finvio-filter-card .ffc-row:last-child {
      border-bottom: none;
    }

    .finvio-filter-card .ffc-row .ffc-row-l {
      color: var(--text-sub);
    }

    .finvio-filter-card .ffc-row .ffc-row-r {
      color: var(--text);
      font-weight: 800;
    }

    .finvio-filter-card .ffc-open {
      width: 100%;
      padding: 9px;
      border: none;
      border-radius: 8px;
      background: var(--green);
      color: #fff;
      cursor: pointer;
      font: 700 12px/1 'Nunito', sans-serif;
    }

    .finvio-filter-card .ffc-open:hover {
      background: var(--green-dark);
    }

    .finvio-filter-card .ffc-empty {
      background: #fff;
      border-radius: 8px;
      padding: 14px;
      text-align: center;
      font: 600 12px/1.4 'Nunito', sans-serif;
      color: var(--text-muted);
      margin-bottom: 10px;
    }

    /* Dark theme */
    body.dark .filter-bar {
      background: #1f2937;
      border-bottom-color: #374151;
    }

    body.dark .filter-btn {
      background: #1f2937;
      border-color: #374151;
      color: #d1d5db;
    }

    body.dark .filter-btn:hover {
      background: #374151;
    }

    body.dark .filter-btn.active {
      background: rgba(106, 176, 76, .18);
      border-color: var(--green);
      color: #bbf7d0;
    }

    body.dark .filter-chip {
      background: rgba(106, 176, 76, .18);
      color: #bbf7d0;
    }

    body.dark .filter-chip button {
      background: rgba(187, 247, 208, .15);
      color: #bbf7d0;
    }

    body.dark .filter-panel {
      background: #111827;
      border-bottom-color: #374151;
    }

    body.dark .filter-field input,
    body.dark .filter-field select {
      background: #1f2937;
      border-color: #374151;
      color: #f3f4f6;
    }

    body.dark .filter-field label {
      color: #9ca3af;
    }

    body.dark .filter-reset {
      background: #1f2937;
      border-color: #374151;
      color: #d1d5db;
    }

    body.dark .filter-reset:hover {
      background: #374151;
    }

    body.dark .filter-empty {
      color: #9ca3af;
    }

    body.dark .finvio-filter-card {
      background: linear-gradient(135deg, rgba(106, 176, 76, .12), rgba(106, 176, 76, .05));
      border-color: rgba(106, 176, 76, .3);
    }

    body.dark .finvio-filter-card .ffc-head {
      color: #bbf7d0;
    }

    body.dark .finvio-filter-card .ffc-criteria span {
      background: rgba(31, 41, 55, .8);
      color: #bbf7d0;
    }

    body.dark .finvio-filter-card .ffc-stat {
      background: #1f2937;
    }

    body.dark .finvio-filter-card .ffc-stat-v {
      color: #f3f4f6;
    }

    body.dark .finvio-filter-card .ffc-list {
      background: #1f2937;
    }

    body.dark .finvio-filter-card .ffc-row {
      border-bottom-color: #374151;
    }

    body.dark .finvio-filter-card .ffc-row .ffc-row-l {
      color: #d1d5db;
    }

    body.dark .finvio-filter-card .ffc-row .ffc-row-r {
      color: #f3f4f6;
    }

    body.dark .finvio-filter-card .ffc-empty {
      background: #1f2937;
      color: #9ca3af;
    }

    @media (max-width: 600px) {
      .filter-bar {
        padding: 8px 12px;
        gap: 6px;
      }

      .filter-grid {
        grid-template-columns: 1fr 1fr;
      }
    }
  

/* ===== inline style ===== */
    .export-pdf-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--white);
      font: 700 12px/1 'Nunito', sans-serif;
      color: var(--text-sub);
      cursor: pointer;
      transition: .18s;
    }

    .export-pdf-btn:hover {
      background: var(--green-light);
      border-color: var(--green);
      color: var(--green-text);
    }

    body.dark .export-pdf-btn {
      background: #1f2937;
      border-color: #374151;
      color: #d1d5db;
    }

    body.dark .export-pdf-btn:hover {
      background: rgba(106, 176, 76, .18);
      border-color: var(--green);
      color: #bbf7d0;
    }

    .epdf-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, .55);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .epdf-overlay.open {
      display: flex;
    }

    .epdf-modal {
      width: 100%;
      max-width: 460px;
      background: var(--white);
      border-radius: 16px;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
      overflow: hidden;
      animation: epdfIn .18s ease-out;
    }

    @keyframes epdfIn {
      from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    .epdf-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
    }

    .epdf-head h3 {
      font: 800 16px/1.2 'Nunito', sans-serif;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .epdf-close {
      background: transparent;
      border: none;
      cursor: pointer;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .epdf-close:hover {
      background: #f3f4f6;
      color: var(--text);
    }

    .epdf-body {
      padding: 18px 20px;
    }

    .epdf-section {
      margin-bottom: 16px;
    }

    .epdf-section:last-child {
      margin-bottom: 0;
    }

    .epdf-label {
      font: 700 10px/1 'Nunito', sans-serif;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: 8px;
    }

    .epdf-radios {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }

    .epdf-radio {
      position: relative;
      cursor: pointer;
      padding: 10px 8px;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      text-align: center;
      background: var(--white);
      font: 700 12px/1.2 'Nunito', sans-serif;
      color: var(--text-sub);
      transition: .15s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .epdf-radio input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .epdf-radio:hover {
      border-color: #d1d5db;
      background: #fafbfc;
    }

    .epdf-radio.checked {
      border-color: var(--green);
      background: var(--green-light);
      color: var(--green-text);
    }

    .epdf-radio .epdf-radio-icon {
      font-size: 18px;
      line-height: 1;
    }

    .epdf-checkbox-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      transition: .15s;
      background: var(--white);
    }

    .epdf-checkbox-row:hover {
      background: #fafbfc;
    }

    .epdf-checkbox-row input {
      margin-top: 2px;
      accent-color: var(--green);
    }

    .epdf-checkbox-row .epdf-cb-l {
      font: 700 12px/1.3 'Nunito', sans-serif;
      color: var(--text);
    }

    .epdf-checkbox-row .epdf-cb-s {
      font: 500 11px/1.3 'Nunito', sans-serif;
      color: var(--text-muted);
      margin-top: 2px;
      display: block;
    }

    .epdf-date-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .epdf-date-field label {
      display: block;
      font: 700 10px/1 'Nunito', sans-serif;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 4px;
    }

    .epdf-date-field input {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font: 500 12px/1.2 'Nunito', sans-serif;
      color: var(--text);
      background: var(--white);
      outline: none;
      transition: .15s;
    }

    .epdf-date-field input:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(106, 176, 76, .15);
    }

    .epdf-preview {
      background: #f9fafb;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
      font: 600 11px/1.5 'Nunito', sans-serif;
      color: var(--text-sub);
    }

    .epdf-preview strong {
      color: var(--text);
      font-weight: 800;
    }

    .epdf-foot {
      display: flex;
      gap: 8px;
      padding: 14px 20px;
      border-top: 1px solid var(--border);
      background: #fafbfc;
    }

    .epdf-foot button {
      flex: 1;
      padding: 10px 14px;
      border-radius: 10px;
      font: 700 13px/1 'Nunito', sans-serif;
      cursor: pointer;
      border: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .epdf-cancel {
      background: var(--white);
      border: 1px solid var(--border) !important;
      color: var(--text-sub);
    }

    .epdf-cancel:hover {
      background: #f3f4f6;
    }

    .epdf-go {
      background: var(--green);
      color: #fff;
    }

    .epdf-go:hover {
      background: var(--green-dark);
    }

    .epdf-go:disabled {
      opacity: .6;
      cursor: wait;
    }

    body.dark .epdf-modal {
      background: #1f2937;
    }

    body.dark .epdf-head {
      border-bottom-color: #374151;
    }

    body.dark .epdf-head h3 {
      color: #f3f4f6;
    }

    body.dark .epdf-close {
      color: #9ca3af;
    }

    body.dark .epdf-close:hover {
      background: #374151;
      color: #f3f4f6;
    }

    body.dark .epdf-radio {
      background: #1f2937;
      border-color: #374151;
      color: #d1d5db;
    }

    body.dark .epdf-radio:hover {
      background: #374151;
    }

    body.dark .epdf-radio.checked {
      background: rgba(106, 176, 76, .18);
      border-color: var(--green);
      color: #bbf7d0;
    }

    body.dark .epdf-checkbox-row {
      background: #1f2937;
      border-color: #374151;
    }

    body.dark .epdf-checkbox-row:hover {
      background: #374151;
    }

    body.dark .epdf-checkbox-row .epdf-cb-l {
      color: #f3f4f6;
    }

    body.dark .epdf-checkbox-row .epdf-cb-s {
      color: #9ca3af;
    }

    body.dark .epdf-date-field input {
      background: #1f2937;
      border-color: #374151;
      color: #f3f4f6;
    }

    body.dark .epdf-preview {
      background: #111827;
      border-color: #374151;
      color: #d1d5db;
    }

    body.dark .epdf-preview strong {
      color: #f3f4f6;
    }

    body.dark .epdf-foot {
      background: #111827;
      border-top-color: #374151;
    }

    body.dark .epdf-cancel {
      background: #1f2937;
      border-color: #374151 !important;
      color: #d1d5db;
    }

    body.dark .epdf-cancel:hover {
      background: #374151;
    }

    @media (max-width: 480px) {
      .epdf-radios {
        grid-template-columns: 1fr 1fr;
      }

      .epdf-radios .epdf-radio:nth-child(3) {
        grid-column: span 2;
      }
    }
  

/* ===== inline style id="finvio-claude-layout" ===== */
    /* Greeting node we inject via JS */
    #finvio-greet {
      display: none;
      text-align: center;
      font-family: 'Nunito', sans-serif;
      font-weight: 700;
      font-size: 34px;
      letter-spacing: -0.01em;
      color: var(--text);
      margin: 0 0 22px;
    }

    #finvio-greet .finvio-greet-spark {
      display: inline-block;
      width: 28px;
      height: 28px;
      vertical-align: -4px;
      margin-right: 10px;
      background: url('./finvioai.png') center/contain no-repeat;
    }

    body.dark #finvio-greet {
      color: #f3f4f6;
    }

    /* When the chat is empty, recompose the layout: header at top,
       greeting + input + chips centered vertically; hide msgs area.
       IMPORTANT: scope these rules to .active so the Finvio tab does NOT
       force itself visible (display:flex) when another tab is active. */
    #s-finvio.is-empty:not(.active) {
      display: none !important;
    }

    #s-finvio.is-empty.active {
      display: flex;
      flex-direction: column;
    }

    #s-finvio.is-empty.active .chat-hdr {
      flex: 0 0 auto;
    }

    #s-finvio.is-empty.active #chat-msgs {
      display: none !important;
    }

    #s-finvio.is-empty.active .img-preview-wrap {
      order: 5;
    }

    #s-finvio.is-empty.active #finvio-greet {
      display: block;
    }

    /* Center the empty-state stack */
    #s-finvio.is-empty.active {
      position: relative;
    }

    #s-finvio.is-empty.active::before {
      content: '';
      flex: 1 1 auto;
    }

    #s-finvio.is-empty.active::after {
      content: '';
      flex: 1.2 1 auto;
    }

    /* Order the empty-state pieces: greeting, input, chips */
    #s-finvio.is-empty.active #finvio-greet {
      order: 2;
    }

    #s-finvio.is-empty.active .inp-row {
      order: 3;
    }

    #s-finvio.is-empty.active .chips,
    #s-finvio.is-empty.active #chat-chips {
      order: 4;
    }

    /* Constrain width and center for empty-state */
    #s-finvio.is-empty.active .inp-row,
    #s-finvio.is-empty.active #chat-chips,
    #s-finvio.is-empty.active #finvio-greet,
    #s-finvio.is-empty.active .img-preview-wrap {
      width: 100%;
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Big rounded input box (only in empty state to avoid disturbing chat layout) */
    #s-finvio.is-empty.active .inp-row {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 22px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 12px 36px rgba(0, 0, 0, 0.08);
      padding: 12px 12px 12px 14px;
      gap: 8px;
      align-items: center;
    }

    body.dark #s-finvio.is-empty.active .inp-row {
      background: #1f2937;
      border-color: #374151;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 12px 36px rgba(0, 0, 0, 0.4);
    }

    #s-finvio.is-empty.active .inp-box {
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      font-size: 15px !important;
      padding: 8px 4px !important;
      min-height: 28px;
    }

    #s-finvio.is-empty.active .inp-box:focus {
      box-shadow: none !important;
      outline: none !important;
    }

    /* Pill-shaped suggestion chips (Claude-style) */
    #s-finvio.is-empty.active #chat-chips {
      display: flex !important;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-top: 16px;
      padding: 0 8px;
    }

    #s-finvio.is-empty.active #chat-chips>* {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      box-shadow: none;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease;
    }

    #s-finvio.is-empty.active #chat-chips>*:hover {
      background: var(--green-light);
      border-color: var(--green);
      color: var(--green-text);
    }

    body.dark #s-finvio.is-empty.active #chat-chips>* {
      background: transparent;
      border-color: #374151;
      color: #e5e7eb;
    }

    body.dark #s-finvio.is-empty.active #chat-chips>*:hover {
      background: rgba(106, 176, 76, 0.15);
      border-color: var(--green);
      color: #fff;
    }


    /* Pin header to top, center the rest */
    #s-finvio.is-empty.active {
      justify-content: flex-start;
    }

    #s-finvio.is-empty.active .chat-hdr {
      order: 0;
    }

    #s-finvio.is-empty.active::before {
      order: 1;
    }

    #s-finvio.is-empty.active #finvio-greet {
      order: 2;
    }

    #s-finvio.is-empty.active .inp-row {
      order: 3;
      margin-top: 8px;
    }

    #s-finvio.is-empty.active .img-preview-wrap {
      order: 4;
    }

    #s-finvio.is-empty.active #chat-chips {
      order: 5;
    }

    #s-finvio.is-empty.active::after {
      order: 6;
    }

    @media (max-width: 720px) {
      #finvio-greet {
        font-size: 24px;
      }

      #s-finvio.is-empty.active .inp-row,
      #s-finvio.is-empty.active #chat-chips,
      #s-finvio.is-empty.active #finvio-greet {
        padding-left: 14px;
        padding-right: 14px;
      }
    }

    /* ============================================================
       MOBILE-ONLY Finvio redesign — Claude-style clean layout
       ============================================================ */
    @media (max-width: 768px) {

      /* ---- Compact, single-row header ---- */
      #s-finvio .chat-hdr {
        padding: 10px 12px;
        gap: 8px;
        align-items: center;
        flex-wrap: nowrap;
        min-height: 56px;
      }

      #s-finvio .chat-hdr .back-btn {
        padding: 4px;
        flex-shrink: 0;
      }

      #s-finvio .chat-hdr .finvio-av {
        width: 32px;
        height: 32px;
        border-radius: 9px;
      }

      #s-finvio .chat-hdr .finvio-av img {
        width: 32px;
        height: 32px;
      }

      /* Brand block (name + subtitle) — keep on one line, ellipsize */
      #s-finvio .chat-hdr>div:nth-child(3) {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
      }

      #s-finvio .chat-hdr #finvio-header-name {
        font-size: 14px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      #s-finvio .chat-hdr>div:nth-child(3)>div:nth-child(2) {
        font-size: 10px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* Right-side controls cluster — compact, no wrapping, hide noisy bits */
      #s-finvio .chat-hdr>div[style*="margin-left:auto"] {
        gap: 4px !important;
        flex-shrink: 0;
        flex-wrap: nowrap;
      }

      #s-finvio #finvio-status-dot,
      #s-finvio #finvio-status-label {
        display: none !important;
      }

      #s-finvio .finvio-model-btn {
        padding: 5px 8px !important;
        font-size: 11px !important;
        white-space: nowrap;
      }

      #s-finvio #finvio-clear {
        margin-left: 2px !important;
        padding: 5px !important;
      }

      #s-finvio #finvio-clear svg {
        width: 18px;
        height: 18px;
      }

      /* ---- Empty-state: pin input to BOTTOM, greeting centered above ---- */
      #s-finvio.is-empty.active {
        justify-content: flex-start;
      }

      /* Kill the centering spacers — we want input at the bottom */
      #s-finvio.is-empty.active::before,
      #s-finvio.is-empty.active::after {
        display: none !important;
        content: none !important;
      }

      /* Stacking order on mobile: header, greeting (grows), chips, input */
      #s-finvio.is-empty.active .chat-hdr {
        order: 0;
      }

      #s-finvio.is-empty.active #finvio-greet {
        order: 1;
        flex: 1 1 auto;
        display: flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 26px;
        font-weight: 700;
        padding: 24px 24px;
        margin: 0;
        line-height: 1.25;
      }

      #s-finvio.is-empty.active #finvio-greet .finvio-greet-spark {
        width: 22px;
        height: 22px;
        vertical-align: -3px;
        margin-right: 8px;
      }

      #s-finvio.is-empty.active .img-preview-wrap {
        order: 2;
      }

      #s-finvio.is-empty.active #chat-chips {
        order: 3;
      }

      #s-finvio.is-empty.active .inp-row {
        order: 4;
        margin-top: 0;
      }

      /* Suggestion chips: horizontal scroll above the input, no wrap */
      #s-finvio.is-empty.active #chat-chips {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 8px 14px 4px !important;
        margin-top: 0 !important;
        max-width: 100% !important;
      }

      #s-finvio.is-empty.active #chat-chips::-webkit-scrollbar {
        display: none;
      }

      #s-finvio.is-empty.active #chat-chips>* {
        flex-shrink: 0;
        font-size: 12.5px;
        padding: 7px 13px;
      }

      /* Input bar — pinned at bottom, big and rounded like Claude */
      #s-finvio.is-empty.active .inp-row,
      #s-finvio .inp-row {
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 18px;
        padding: 10px 10px 10px 12px;
        gap: 6px;
        align-items: center;
        background: var(--white);
        border: 1px solid var(--border);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      }

      /* Wrap inp-row with safe-area padding via container */
      #s-finvio .inp-row {
        margin: 8px 12px calc(10px + env(safe-area-inset-bottom, 8px)) !important;
      }

      body.dark #s-finvio .inp-row {
        background: #1f2937;
        border-color: #374151;
      }

      #s-finvio .inp-box {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        font-size: 15px !important;
        padding: 8px 4px !important;
        min-height: 28px !important;
      }

      /* Buttons inside input bar: smaller, balanced */
      #s-finvio .inp-attach-btn,
      #s-finvio #finvio-mic,
      #s-finvio #finvio-stop {
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        box-shadow: none !important;
        background: #f1f5f9;
        color: #475569;
        flex-shrink: 0;
      }

      #s-finvio .snd-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        flex-shrink: 0;
      }

      body.dark #s-finvio .inp-attach-btn,
      body.dark #s-finvio #finvio-mic,
      body.dark #s-finvio #finvio-stop {
        background: #374151;
        color: #e5e7eb;
      }
    }
  

/* ===== inline style ===== */
    /* ── Live search bar (Income / Expense) ─────────────────────── */
    .ie-search-wrap {
      padding: 12px 16px 4px;
      background: var(--bg);
    }

    .ie-search {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
      transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
    }

    .ie-search:focus-within {
      border-color: var(--green);
      box-shadow: 0 0 0 4px rgba(106, 176, 76, .14), 0 1px 2px rgba(15, 23, 42, .05);
    }

    .ie-search svg {
      color: var(--text-faint);
      flex-shrink: 0
    }

    .ie-search input {
      flex: 1;
      border: 0;
      outline: 0;
      background: transparent;
      font: 600 14px/1.2 'Nunito', sans-serif;
      color: var(--text);
      letter-spacing: -.01em;
    }

    .ie-search input::placeholder {
      color: var(--text-faint);
      font-weight: 500
    }

    .ie-search input::-webkit-search-cancel-button {
      display: none
    }

    .ie-search-clear {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 0;
      cursor: pointer;
      background: #f3f4f6;
      color: var(--text-muted);
      font: 700 16px/1 'Nunito', sans-serif;
      display: none;
      align-items: center;
      justify-content: center;
      transition: background .15s;
    }

    .ie-search-clear:hover {
      background: #e5e7eb;
      color: var(--text)
    }

    .ie-search.has-text .ie-search-clear {
      display: inline-flex
    }

    body.dark .ie-search-wrap {
      background: #111827
    }

    body.dark .ie-search {
      background: #1f2937;
      border-color: #374151
    }

    body.dark .ie-search input {
      color: #f3f4f6
    }

    body.dark .ie-search input::placeholder {
      color: #6b7280
    }

    body.dark .ie-search-clear {
      background: #374151;
      color: #d1d5db
    }

    body.dark .ie-search-clear:hover {
      background: #4b5563;
      color: #fff
    }

    /* ── Apple-grade polish for Income / Expense lists ──────────── */
    #s-income .entry,
    #s-expense .entry {
      border-radius: 18px;
      border: 1px solid rgba(15, 23, 42, .06);
      background: var(--white);
      box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -18px rgba(15, 23, 42, .18);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    #s-income .entry:hover,
    #s-expense .entry:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 18px 40px -22px rgba(15, 23, 42, .28);
      border-color: rgba(106, 176, 76, .35);
    }

    body.dark #s-income .entry,
    body.dark #s-expense .entry {
      background: #1f2937;
      border-color: rgba(255, 255, 255, .06);
      box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -18px rgba(0, 0, 0, .6);
    }

    /* ── Apple-style Add / Edit modal polish ────────────────────── */
    #modal-income .modal-box,
    #modal-expense .modal-box {
      border-radius: 22px;
      padding: 22px 22px 18px;
      box-shadow: 0 30px 80px -20px rgba(15, 23, 42, .45), 0 2px 6px rgba(15, 23, 42, .08);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      animation: appleModalIn .28s cubic-bezier(.2, .9, .25, 1.1);
    }

    @keyframes appleModalIn {
      from {
        opacity: 0;
        transform: translateY(14px) scale(.97)
      }

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

    #modal-income.show,
    #modal-expense.show {
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      background: rgba(15, 23, 42, .32) !important;
    }

    #modal-income .modal-box h3,
    #modal-expense .modal-box h3 {
      font: 800 20px/1.2 'Nunito', sans-serif;
      letter-spacing: -.02em;
      margin: 2px 0 16px;
      color: var(--text);
    }

    #modal-income .field,
    #modal-expense .field {
      margin-bottom: 12px
    }

    #modal-income .field label,
    #modal-expense .field label {
      display: block;
      font: 700 11px/1 'Nunito', sans-serif;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 6px;
    }

    #modal-income .field input,
    #modal-income .field select,
    #modal-expense .field input,
    #modal-expense .field select {
      width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: #f9fafb;
      font: 600 14px/1.2 'Nunito', sans-serif;
      color: var(--text);
      outline: none;
      transition: border-color .18s, box-shadow .18s, background .18s;
      -webkit-appearance: none;
      appearance: none;
    }

    #modal-income .field select,
    #modal-expense .field select {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 36px;
    }

    #modal-income .field input:focus,
    #modal-income .field select:focus,
    #modal-expense .field input:focus,
    #modal-expense .field select:focus {
      border-color: var(--green);
      background: var(--white);
      box-shadow: 0 0 0 4px rgba(106, 176, 76, .16);
    }

    #modal-income .btn-row,
    #modal-expense .btn-row {
      display: flex;
      gap: 10px;
      margin-top: 18px;
    }

    #modal-income .btn-cancel,
    #modal-expense .btn-cancel,
    #modal-income .btn-save,
    #modal-expense .btn-save {
      flex: 1;
      padding: 13px 18px;
      border-radius: 14px;
      border: 0;
      cursor: pointer;
      font: 800 14px/1 'Nunito', sans-serif;
      letter-spacing: -.01em;
      transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
    }

    #modal-income .btn-cancel,
    #modal-expense .btn-cancel {
      background: #f3f4f6;
      color: var(--text-sub);
    }

    #modal-income .btn-cancel:hover,
    #modal-expense .btn-cancel:hover {
      background: #e5e7eb
    }

    #modal-income .btn-save,
    #modal-expense .btn-save {
      background: linear-gradient(180deg, #7bc15a, #5a9e3e);
      color: #fff;
      box-shadow: 0 8px 20px -8px rgba(106, 176, 76, .6);
    }

    #modal-income .btn-save:hover,
    #modal-expense .btn-save:hover {
      filter: brightness(1.04)
    }

    #modal-income .btn-save:active,
    #modal-expense .btn-save:active,
    #modal-income .btn-cancel:active,
    #modal-expense .btn-cancel:active {
      transform: scale(.98)
    }

    body.dark #modal-income .field input,
    body.dark #modal-income .field select,
    body.dark #modal-expense .field input,
    body.dark #modal-expense .field select {
      background: #111827;
      border-color: #374151;
      color: #f3f4f6;
    }

    body.dark #modal-income .field input:focus,
    body.dark #modal-income .field select:focus,
    body.dark #modal-expense .field input:focus,
    body.dark #modal-expense .field select:focus {
      background: #1f2937;
    }

    body.dark #modal-income .btn-cancel,
    body.dark #modal-expense .btn-cancel {
      background: #374151;
      color: #e5e7eb;
    }

    body.dark #modal-income .btn-cancel:hover,
    body.dark #modal-expense .btn-cancel:hover {
      background: #4b5563
    }

    /* ── Mobile: bottom-sheet style modal ───────────────────────── */
    @media (max-width: 640px) {
      .ie-search-wrap {
        padding: 10px 12px 2px
      }

      .ie-search {
        padding: 11px 12px;
        border-radius: 13px
      }

      .ie-search input {
        font-size: 15px
      }

      #modal-income.modal-overlay,
      #modal-expense.modal-overlay {
        align-items: flex-end !important;
      }

      #modal-income .modal-box,
      #modal-expense .modal-box {
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0;
        padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
        max-height: 92vh;
        animation: appleSheetIn .32s cubic-bezier(.2, .9, .25, 1.05);
      }

      #modal-income .modal-box::before,
      #modal-expense .modal-box::before {
        content: "";
        display: block;
        width: 38px;
        height: 5px;
        border-radius: 999px;
        background: #e5e7eb;
        margin: 0 auto 14px;
      }

      body.dark #modal-income .modal-box::before,
      body.dark #modal-expense .modal-box::before {
        background: #4b5563
      }

      @keyframes appleSheetIn {
        from {
          transform: translateY(100%)
        }

        to {
          transform: translateY(0)
        }
      }

      #modal-income .field input,
      #modal-income .field select,
      #modal-expense .field input,
      #modal-expense .field select {
        font-size: 16px;
        /* prevents iOS zoom on focus */
        padding: 13px 14px;
      }

      #modal-income .btn-row,
      #modal-expense .btn-row {
        position: sticky;
        bottom: 0;
        background: transparent;
        padding-top: 8px;
      }
    }

    /* ── Smoother tab content transition ────────────────────────── */
    #s-income.active,
    #s-expense.active {
      animation: ieFade .26s ease both
    }

    @keyframes ieFade {
      from {
        opacity: 0;
        transform: translateY(4px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }
  

/* ===== inline style ===== */
#finvio-voice-overlay{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at center,#04140a 0%,#000 85%);overflow:hidden;font-family:'Nunito',sans-serif;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#finvio-voice-overlay.active{display:flex;animation:fvoFade .45s cubic-bezier(.2,.8,.2,1)}
@keyframes fvoFade{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
#finvio-voice-overlay .fvo-bg{position:absolute;inset:-25%;background:radial-gradient(circle at 22% 30%,rgba(106,176,76,.5),transparent 55%),radial-gradient(circle at 78% 70%,rgba(90,158,62,.45),transparent 58%),radial-gradient(circle at 50% 50%,rgba(22,101,52,.35),transparent 62%);filter:blur(70px);animation:fvoBgSpin 22s linear infinite}
@keyframes fvoBgSpin{to{transform:rotate(360deg)}}
#finvio-voice-overlay .fvo-stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 70% 60%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 40% 80%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 90% 20%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 10% 70%,rgba(255,255,255,.4),transparent);opacity:.5;animation:fvoStars 6s ease-in-out infinite}
@keyframes fvoStars{0%,100%{opacity:.3}50%{opacity:.6}}
#finvio-voice-overlay .fvo-orb{position:relative;width:min(62vmin,440px);height:min(62vmin,440px);display:flex;align-items:center;justify-content:center}
#finvio-voice-overlay .fvo-blob{position:absolute;inset:0;border-radius:50%;filter:blur(42px);mix-blend-mode:screen;opacity:.95;will-change:transform}
#finvio-voice-overlay .fvo-b1{background:radial-gradient(circle at 30% 30%,#a4dc7f,transparent 62%);animation:fvoSpin 9s linear infinite}
#finvio-voice-overlay .fvo-b2{background:radial-gradient(circle at 70% 40%,#6ab04c,transparent 62%);animation:fvoSpin 12s linear infinite reverse}
#finvio-voice-overlay .fvo-b3{background:radial-gradient(circle at 40% 72%,#5a9e3e,transparent 62%);animation:fvoSpin 15s linear infinite}
#finvio-voice-overlay .fvo-b4{background:radial-gradient(circle at 65% 60%,#166534,transparent 62%);animation:fvoSpin 18s linear infinite reverse}
@keyframes fvoSpin{to{transform:rotate(360deg) scale(1.06)}}
#finvio-voice-overlay .fvo-core{position:absolute;width:40%;height:40%;border-radius:50%;background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.55) 32%,transparent 72%);filter:blur(10px);animation:fvoPulse 2.6s ease-in-out infinite}
@keyframes fvoPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}}
#finvio-voice-overlay .fvo-ring{position:absolute;width:100%;height:100%;border-radius:50%;border:1px solid rgba(255,255,255,.22);animation:fvoRing 3.2s ease-out infinite}
#finvio-voice-overlay .fvo-ring2{animation-delay:1.1s}
#finvio-voice-overlay .fvo-ring3{animation-delay:2.2s}
@keyframes fvoRing{0%{transform:scale(.55);opacity:.85}100%{transform:scale(1.5);opacity:0}}
#finvio-voice-overlay.speaking .fvo-core{animation-duration:.65s}
#finvio-voice-overlay.speaking .fvo-blob{animation-duration:4.5s;opacity:1}
#finvio-voice-overlay.thinking .fvo-core{animation-duration:1.4s}
#finvio-voice-overlay .fvo-status{position:relative;margin-top:54px;font-size:14px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.85);font-weight:700}
#finvio-voice-overlay .fvo-status::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#6ab04c;margin-left:10px;vertical-align:middle;box-shadow:0 0 12px #6ab04c;animation:fvoDot 1.2s ease-in-out infinite}
#finvio-voice-overlay.speaking .fvo-status::after{background:#a4dc7f;box-shadow:0 0 12px #a4dc7f}
#finvio-voice-overlay.thinking .fvo-status::after{background:#5a9e3e;box-shadow:0 0 12px #5a9e3e}
@keyframes fvoDot{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}
#finvio-voice-overlay .fvo-transcript{position:relative;margin-top:16px;max-width:84%;text-align:center;font-size:17px;line-height:1.4;color:rgba(255,255,255,.78);min-height:26px;font-weight:500}
#finvio-voice-overlay .fvo-close{position:absolute;top:24px;right:24px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#fff;font-size:22px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:.2s ease;display:flex;align-items:center;justify-content:center}
#finvio-voice-overlay .fvo-close:hover{background:rgba(255,255,255,.16);transform:scale(1.06)}
#finvio-voice-overlay .fvo-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)}