:root {
  --sidebar-width: 268px;
  --topbar-height: 88px;

  --navy: #0b1736;
  --navy-dark: #081630;

  --purple: #7447f5;
  --purple2: #9b45e8;
  --blue: #3b91f7;
  --cyan: #2fc5eb;
  --green: #29b98d;
  --red: #ff6b6b;
  --orange: #ff9c45;

  --bg: #f7f8fc;
  --card: #ffffff;

  --text: #19233b;
  --muted: #748099;
  --line: #e6eaf2;

  --shadow: 0 8px 30px rgba(27, 39, 78, .08);
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;

  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
}


/* =========================================================
   APP SHELL
========================================================= */

.app-shell {
  display: flex;
  min-height: 100vh;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
  width: var(--sidebar-width);
  height: 100vh;

  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;

  z-index: 20;

  display: flex;
  flex-direction: column;

  color: white;

  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(58, 92, 255, .12),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      var(--navy),
      #091c40
    );
}


/* =========================================================
   BRAND
========================================================= */

.brand {
  height: var(--topbar-height);

  padding: 18px 17px;

  display: flex;
  align-items: center;

  border-bottom:
    1px solid rgba(255,255,255,.05);

  flex: 0 0 auto;
}


.brand-link {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 13px;
}


/* VETRI V LOGO */

.brand-logo {
  width: 54px;
  height: 48px;

  position: relative;

  flex: 0 0 54px;
}


.brand-logo-left,
.brand-logo-right {
  width: 17px;
  height: 43px;

  position: absolute;
  top: 2px;

  border-radius: 7px;
}


.brand-logo-left {
  left: 10px;

  transform: rotate(-26deg);

  background:
    linear-gradient(
      180deg,
      #2bc7ff 0%,
      #2797ff 50%,
      #3561ff 100%
    );

  box-shadow:
    0 8px 20px
    rgba(44, 152, 255, .28);
}


.brand-logo-right {
  left: 28px;

  transform: rotate(26deg);

  background:
    linear-gradient(
      180deg,
      #a252ff 0%,
      #7b4cff 46%,
      #3b5cff 100%
    );

  box-shadow:
    0 8px 20px
    rgba(106, 72, 255, .28);
}


.brand-copy strong {
  display: block;

  color: #ffffff;

  font-size: 23px;
  line-height: 1;

  font-weight: 750;

  letter-spacing: -.02em;
}


.brand-copy span {
  display: block;

  margin-top: 5px;

  color: #d8e0f2;

  font-size: 11px;
  font-weight: 450;
}


/* =========================================================
   SIDEBAR SCROLL
========================================================= */

.sidebar-scroll {
  flex: 1;
  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  padding:
    15px
    14px
    22px;

  scrollbar-width: thin;
  scrollbar-color:
    rgba(101,121,164,.55)
    transparent;
}


.sidebar-scroll::-webkit-scrollbar {
  width: 5px;
}


.sidebar-scroll::-webkit-scrollbar-thumb {
  background:
    rgba(103,124,166,.48);

  border-radius: 30px;
}


/* =========================================================
   NAV
========================================================= */

.nav {
  display: flex;
  flex-direction: column;

  gap: 4px;
}


.nav a {
  min-height: 47px;

  padding:
    0
    14px;

  display: flex;
  align-items: center;

  gap: 13px;

  border-radius: 10px;

  color: #dfe5f3;

  font-size: 14px;
  font-weight: 500;

  transition:
    .18s ease;
}


.nav a:hover {
  color: white;

  background:
    rgba(255,255,255,.065);
}


.nav a.active {
  color: #ffffff;

  background:
    linear-gradient(
      90deg,
      #3659ff 0%,
      #744cff 55%,
      #9c44ea 100%
    );

  box-shadow:
    0 9px 24px
    rgba(72, 74, 255, .25);
}


/* =========================================================
   SECTION LABEL
========================================================= */

.nav-section {
  margin:
    22px
    10px
    8px;

  color: #91a0c2;

  font-size: 10px;
  font-weight: 600;

  letter-spacing: .13em;
}


/* =========================================================
   ICON BASE
========================================================= */

.nav-icon {
  width: 21px;
  height: 21px;

  flex: 0 0 21px;

  position: relative;

  display: inline-block;

  color: currentColor;
}


/* =========================================================
   HOME ICON
========================================================= */

.icon-home::before {
  content: "";

  width: 11px;
  height: 9px;

  position: absolute;

  left: 5px;
  top: 9px;

  border:
    1.8px solid currentColor;

  border-top: 0;

  border-radius:
    1px;
}


.icon-home::after {
  content: "";

  width: 10px;
  height: 10px;

  position: absolute;

  left: 5px;
  top: 3px;

  border-left:
    1.8px solid currentColor;

  border-top:
    1.8px solid currentColor;

  transform:
    rotate(45deg);

  border-radius:
    1px;
}


/* =========================================================
   INCOME ICON
========================================================= */

.icon-income {
  border:
    1.8px solid currentColor;

  border-radius:
    4px;
}


.icon-income::before {
  content: "";

  width: 9px;
  height: 1.8px;

  position: absolute;

  left: 4px;
  top: 9px;

  background:
    currentColor;
}


.icon-income::after {
  content: "";

  width: 1.8px;
  height: 9px;

  position: absolute;

  left: 8px;
  top: 5px;

  background:
    currentColor;
}


/* =========================================================
   EXPENSE ICON
========================================================= */

.icon-expense {
  border:
    1.8px solid currentColor;

  border-radius:
    4px;
}


.icon-expense::after {
  content: "";

  width: 9px;
  height: 1.8px;

  position: absolute;

  left: 4px;
  top: 9px;

  background:
    currentColor;
}


/* =========================================================
   TRANSACTIONS ICON
========================================================= */

.icon-transactions {
  border:
    1.8px solid currentColor;

  border-radius:
    4px;
}


.icon-transactions::before {
  content: "";

  width: 10px;
  height: 1.5px;

  position: absolute;

  left: 4px;
  top: 5px;

  background:
    currentColor;

  box-shadow:
    0 5px 0 currentColor,
    0 10px 0 currentColor;
}


/* =========================================================
   TAX ICON
========================================================= */

.icon-tax {
  display: grid;

  place-items: center;

  font-size: 17px;
  font-weight: 650;
}


/* =========================================================
   REPORTS ICON
========================================================= */

.icon-reports {
  border:
    1.8px solid currentColor;

  border-radius:
    3px;
}


.icon-reports::before {
  content: "";

  width: 2px;
  height: 7px;

  position: absolute;

  left: 4px;
  bottom: 3px;

  background:
    currentColor;

  box-shadow:
    5px -4px 0 currentColor,
    10px -1px 0 currentColor;
}


/* =========================================================
   CATEGORIES ICON
========================================================= */

.icon-categories::before {
  content: "";

  width: 6px;
  height: 6px;

  position: absolute;

  left: 1px;
  top: 1px;

  border:
    1.7px solid currentColor;

  border-radius: 2px;

  box-shadow:
    11px 0 0 -1px transparent,
    0 11px 0 -1px transparent,
    11px 11px 0 -1px transparent;
}


.icon-categories::after {
  content: "";

  width: 6px;
  height: 6px;

  position: absolute;

  right: 1px;
  bottom: 1px;

  border:
    1.7px solid currentColor;

  border-radius:
    2px;

  box-shadow:
    -11px 0 0 -1px transparent,
    0 -11px 0 -1px transparent;
}


/* =========================================================
   BRANCH ICON
========================================================= */

.icon-branches {
  border-left:
    1.8px solid currentColor;

  border-right:
    1.8px solid currentColor;

  border-bottom:
    1.8px solid currentColor;

  border-radius:
    1px;
}


.icon-branches::before {
  content: "";

  width: 15px;
  height: 9px;

  position: absolute;

  left: 1px;
  top: 1px;

  border-left:
    1.8px solid currentColor;

  border-top:
    1.8px solid currentColor;

  transform:
    rotate(45deg)
    scale(.72);
}


.icon-branches::after {
  content: "";

  width: 2px;
  height: 2px;

  position: absolute;

  left: 5px;
  top: 9px;

  background:
    currentColor;

  box-shadow:
    7px 0 0 currentColor,
    0 5px 0 currentColor,
    7px 5px 0 currentColor;
}


/* =========================================================
   FIELD SETUP ICON
========================================================= */

.icon-fields::before {
  content: "";

  width: 17px;
  height: 1.6px;

  position: absolute;

  left: 2px;
  top: 5px;

  background:
    currentColor;

  box-shadow:
    0 6px 0 currentColor,
    0 12px 0 currentColor;
}


.icon-fields::after {
  content: "";

  width: 5px;
  height: 5px;

  position: absolute;

  left: 6px;
  top: 3px;

  border:
    1.6px solid currentColor;

  border-radius:
    50%;

  background:
    var(--navy);

  box-shadow:
    7px 6px 0 -1px var(--navy),
    -1px 12px 0 -1px var(--navy);
}


.nav a.active .icon-fields::after {
  background:
    #744cff;

  box-shadow:
    7px 6px 0 -1px #744cff,
    -1px 12px 0 -1px #744cff;
}


/* =========================================================
   USERS ICON
========================================================= */

.icon-users::before {
  content: "";

  width: 7px;
  height: 7px;

  position: absolute;

  left: 3px;
  top: 2px;

  border:
    1.7px solid currentColor;

  border-radius:
    50%;
}


.icon-users::after {
  content: "";

  width: 12px;
  height: 7px;

  position: absolute;

  left: 1px;
  bottom: 1px;

  border:
    1.7px solid currentColor;

  border-top:
    1.7px solid currentColor;

  border-radius:
    8px 8px 2px 2px;
}


/* =========================================================
   SETTINGS ICON
========================================================= */

.icon-settings {
  border:
    1.8px solid currentColor;

  border-radius:
    50%;
}


.icon-settings::before {
  content: "";

  width: 6px;
  height: 6px;

  position: absolute;

  left: 5px;
  top: 5px;

  border:
    1.7px solid currentColor;

  border-radius:
    50%;
}


.icon-settings::after {
  content: "";

  width: 3px;
  height: 3px;

  position: absolute;

  left: 8px;
  top: -3px;

  background:
    currentColor;

  box-shadow:
    0 21px 0 currentColor,
    -11px 11px 0 currentColor,
    11px 11px 0 currentColor;
}


/* =========================================================
   BACKUP ICON
========================================================= */

.icon-backup {
  border:
    1.7px solid currentColor;

  border-radius:
    50%;
}


.icon-backup::before {
  content: "";

  width: 8px;
  height: 8px;

  position: absolute;

  left: 5px;
  top: 5px;

  border-left:
    1.7px solid currentColor;

  border-bottom:
    1.7px solid currentColor;
}


.icon-backup::after {
  content: "";

  width: 0;
  height: 0;

  position: absolute;

  left: 1px;
  top: 1px;

  border-top:
    4px solid transparent;

  border-bottom:
    4px solid transparent;

  border-right:
    6px solid currentColor;

  transform:
    rotate(35deg);
}


/* =========================================================
   SAFE CARD
========================================================= */

.safe-card {
  margin-top:
    28px;

  padding:
    22px
    18px
    18px;

  text-align:
    center;

  border-radius:
    15px;

  position:
    relative;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(88,193,255,.32),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #3e5dff,
      #7251ff 55%,
      #9447ea
    );

  box-shadow:
    0 14px 35px
    rgba(69, 67, 235, .24);
}


.safe-card strong {
  display:
    block;

  margin-bottom:
    7px;

  font-size:
    15px;
}


.safe-card small {
  display:
    block;

  color:
    #e9ebff;

  font-size:
    10px;

  line-height:
    1.5;
}


.safe-icon {
  width:
    58px;

  height:
    58px;

  margin:
    0 auto
    13px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    15px;

  background:
    rgba(255,255,255,.13);

  border:
    1px solid rgba(255,255,255,.12);
}


.safe-lock-shape {
  width:
    27px;

  height:
    22px;

  border:
    2px solid white;

  border-radius:
    5px;

  position:
    relative;

  margin-top:
    7px;
}


.safe-lock-shape::before {
  content: "";

  width:
    14px;

  height:
    12px;

  position:
    absolute;

  left:
    4px;

  top:
    -12px;

  border:
    2px solid white;

  border-bottom:
    0;

  border-radius:
    9px 9px 0 0;
}


.safe-lock-shape::after {
  content: "";

  width:
    3px;

  height:
    7px;

  position:
    absolute;

  left:
    10px;

  top:
    7px;

  background:
    white;

  border-radius:
    3px;
}


.safe-card a {
  width:
    100%;

  min-height:
    39px;

  margin-top:
    14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    9px;

  background:
    rgba(255,255,255,.14);

  border:
    1px solid rgba(255,255,255,.10);

  color:
    white;

  font-size:
    11px;

  font-weight:
    650;
}


/* =========================================================
   SIDEBAR FOOTER
========================================================= */

.sidebar-footer {
  margin-top:
    24px;

  padding:
    0
    9px;

  color:
    #a6b1cb;

  font-size:
    10px;
}


.sidebar-footer span,
.sidebar-footer small {
  display:
    block;
}


.sidebar-footer small {
  margin-top:
    4px;

  color:
    #7483a5;
}


/* =========================================================
   MAIN AREA
========================================================= */

.main-area {
  margin-left:
    var(--sidebar-width);

  width:
    calc(100% - var(--sidebar-width));

  min-height:
    100vh;
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar {
  height:
    var(--topbar-height);

  position:
    sticky;

  top:
    0;

  z-index:
    15;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    0
    30px;

  background:
    linear-gradient(
      90deg,
      #ffffff,
      #faf7ff 58%,
      #f8f0ff
    );

  border-bottom:
    1px solid var(--line);
}


.topbar-left {
  display:
    flex;

  align-items:
    center;

  gap:
    19px;
}


/* =========================================================
   HAMBURGER
========================================================= */

.menu-button {
  width:
    39px;

  height:
    39px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  border-radius:
    9px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  cursor:
    pointer;
}


.menu-button span {
  width:
    18px;

  height:
    1.8px;

  border-radius:
    2px;

  background:
    #27314a;
}


.menu-button:hover {
  background:
    #f0f2f7;
}


/* =========================================================
   PAGE HEADING
========================================================= */

.page-heading h1 {
  margin:
    0;

  font-size:
    20px;

  line-height:
    1.2;

  font-weight:
    720;

  letter-spacing:
    -.02em;

  color:
    #161f36;
}


.page-heading p {
  margin:
    4px
    0
    0;

  color:
    var(--muted);

  font-size:
    11px;
}


/* =========================================================
   TOP ACTIONS
========================================================= */

.topbar-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    13px;
}


/* =========================================================
   BELL ICON
========================================================= */

.notification-button {
  width:
    42px;

  height:
    42px;

  padding:
    0;

  position:
    relative;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--line);

  border-radius:
    11px;

  background:
    white;

  cursor:
    pointer;
}


.bell-icon {
  width:
    15px;

  height:
    15px;

  position:
    relative;

  border:
    1.8px solid #35405a;

  border-radius:
    9px 9px 6px 6px;
}


.bell-icon::before {
  content:
    "";

  width:
    5px;

  height:
    2px;

  position:
    absolute;

  left:
    3px;

  bottom:
    -5px;

  border-bottom:
    1.8px solid #35405a;

  border-radius:
    0 0 6px 6px;
}


.bell-icon::after {
  content:
    "";

  width:
    3px;

  height:
    3px;

  position:
    absolute;

  left:
    5px;

  top:
    -4px;

  background:
    #35405a;

  border-radius:
    50%;
}


.notification-dot {
  width:
    7px;

  height:
    7px;

  position:
    absolute;

  right:
    8px;

  top:
    8px;

  border-radius:
    50%;

  background:
    #ff4667;

  border:
    2px solid white;
}


/* =========================================================
   USER CARD
========================================================= */

.user-card {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.avatar {
  width:
    42px;

  height:
    42px;

  border-radius:
    50%;

  display:
    grid;

  place-items:
    center;

  color:
    white;

  font-size:
    15px;

  font-weight:
    750;

  background:
    linear-gradient(
      145deg,
      #5d56ff,
      #7b50f7 50%,
      #a13fe3
    );

  box-shadow:
    0 8px 20px
    rgba(100,72,237,.22);
}


.user-details strong,
.user-details small {
  display:
    block;
}


.user-details strong {
  font-size:
    13px;

  color:
    #151e34;
}


.user-details small {
  margin-top:
    3px;

  font-size:
    9px;

  color:
    var(--muted);
}


/* =========================================================
   LOGOUT ICON
========================================================= */

.logout-button {
  width:
    42px;

  height:
    42px;

  padding:
    0;

  border:
    1px solid var(--line);

  border-radius:
    11px;

  background:
    white;

  position:
    relative;

  cursor:
    pointer;
}


.logout-arrow {
  width:
    13px;

  height:
    13px;

  position:
    absolute;

  left:
    11px;

  top:
    13px;

  border-top:
    1.8px solid #35405a;

  border-right:
    1.8px solid #35405a;

  transform:
    rotate(45deg);
}


.logout-arrow::before {
  content:
    "";

  width:
    12px;

  height:
    1.8px;

  position:
    absolute;

  right:
    2px;

  top:
    9px;

  background:
    #35405a;

  transform:
    rotate(-45deg);
}


/* =========================================================
   CONTENT
========================================================= */

.content {
  width:
    100%;

  max-width:
    1650px;

  margin:
    auto;

  padding:
    24px
    28px
    42px;
}


/* =========================================================
   FORM CONTROL
========================================================= */

.form-control {
  width:
    100%;

  min-height:
    42px;

  padding:
    9px
    11px;

  border:
    1px solid #dfe4ee;

  border-radius:
    9px;

  background:
    white;

  color:
    var(--text);

  outline:
    none;
}


.form-control:focus {
  border-color:
    #7666f3;

  box-shadow:
    0 0 0 3px
    rgba(118,102,243,.10);
}


textarea.form-control {
  resize:
    vertical;
}


.form-check {
  width:
    17px;

  height:
    17px;

  accent-color:
    #7354ed;
}


/* =========================================================
   LABELS
========================================================= */

.field label {
  display:
    block;

  margin-bottom:
    7px;

  color:
    #56617a;

  font-size:
    11px;

  font-weight:
    700;
}


.field label em {
  color:
    var(--red);

  font-style:
    normal;
}


/* =========================================================
   ERROR LIST
========================================================= */

.errorlist {
  list-style:
    none;

  padding:
    0;

  margin:
    5px
    0
    0;

  color:
    #d94848;

  font-size:
    11px;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {
  min-height:
    40px;

  padding:
    9px
    15px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    0;

  border-radius:
    9px;

  font-weight:
    700;

  font-size:
    12px;

  cursor:
    pointer;
}


.btn-primary {
  color:
    white;

  background:
    linear-gradient(
      90deg,
      #405eff,
      #8352ef
    );
}


.btn-light {
  color:
    #46516b;

  background:
    #f1f4f9;

  border:
    1px solid #e2e7ef;
}


.btn-income {
  color:
    white;

  background:
    linear-gradient(
      90deg,
      #29b98d,
      #3ac7a2
    );
}


.btn-expense,
.btn-danger {
  color:
    white;

  background:
    linear-gradient(
      90deg,
      #ff666b,
      #ff8668
    );
}


.btn-export {
  color:
    #12836c;

  background:
    #e9f8f6;
}


.btn-block {
  width:
    100%;
}


/* =========================================================
   FLASH MESSAGE
========================================================= */

.flash {
  padding:
    12px
    14px;

  margin-bottom:
    14px;

  border-radius:
    10px;

  font-size:
    12px;

  color:
    #126e55;

  background:
    #e9f9f3;

  border:
    1px solid #caefe1;
}


.flash.error {
  color:
    #ad3f3f;

  background:
    #fff0f0;

  border-color:
    #ffd5d5;
}


.flash.warning {
  color:
    #875e04;

  background:
    #fff8e8;

  border-color:
    #ffe7ae;
}


/* =========================================================
   STATUS
========================================================= */

.income-text {
  color:
    #10a378 !important;
}


.expense-text {
  color:
    #eb5858 !important;
}


.status-chip {
  display:
    inline-flex;

  align-items:
    center;

  padding:
    5px
    9px;

  border-radius:
    999px;

  font-size:
    10px;

  font-weight:
    800;
}


.status-chip.income {
  color:
    #119a72;

  background:
    #e9fbf5;
}


.status-chip.expense {
  color:
    #df5a56;

  background:
    #fff0ef;
}


.state {
  display:
    inline-flex;

  padding:
    5px
    9px;

  border-radius:
    999px;

  font-size:
    10px;

  font-weight:
    800;
}


.state.active {
  color:
    #10956f;

  background:
    #e9fbf5;
}


.state.inactive {
  color:
    #7c8496;

  background:
    #f0f2f6;
}


/* =========================================================
   TABLES
========================================================= */

table {
  width:
    100%;

  border-collapse:
    collapse;
}


th,
td {
  padding:
    12px
    11px;

  text-align:
    left;

  vertical-align:
    middle;

  border-bottom:
    1px solid var(--line);

  font-size:
    12px;
}


th {
  color:
    #667189;

  background:
    #fafbfe;

  font-size:
    10px;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;
}


/* =========================================================
   ACTION LINKS
========================================================= */

.action-cell {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.action-cell form {
  display:
    inline;
}


.edit-link {
  color:
    #4a5bdd;

  font-weight:
    700;

  font-size:
    11px;
}


.delete-link,
.link-button {
  border:
    0;

  background:
    transparent;

  padding:
    0;

  color:
    #e25353;

  cursor:
    pointer;

  font-weight:
    700;

  font-size:
    11px;
}


/* =========================================================
   COMMON
========================================================= */

.empty-state {
  padding:
    28px;

  text-align:
    center;

  color:
    var(--muted);
}


.form-footer {
  display:
    flex;

  justify-content:
    flex-end;

  gap:
    10px;

  margin-top:
    18px;
}


.full-span {
  grid-column:
    1 / -1;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  :root {
    --sidebar-width:
      220px;
  }


  .brand-copy strong {
    font-size:
      18px;
  }


  .brand-copy span {
    font-size:
      10px;
  }


  .nav a {
    font-size:
      12px;
  }


  .content {
    padding:
      20px;
  }

}
/* =========================================================
   CLOUD SYNC STATUS
========================================================= */
.sync-topbar-form{margin:0}
.sync-status-button{height:42px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--text)}
.sync-status-button:hover{background:#f8f9fd}
.sync-cloud-icon{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#eef1ff;color:#6655e9;font-size:14px}
.sync-status-copy{text-align:left;line-height:1.05}
.sync-status-copy strong,.sync-status-copy small{display:block}
.sync-status-copy strong{font-size:9px}.sync-status-copy small{margin-top:3px;color:var(--muted);font-size:7px}
.sync-status-button.sync-error{border-color:#ffd4d4;background:#fff8f8}.sync-status-button.sync-error .sync-cloud-icon{background:#fff0f0;color:#e25353}