/* Glimra – synk med konto (raden på Projekt, inloggning) */
.sy-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 12px 14px; margin: -4px 0 12px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, #fff 0%, #f6fbf9 100%); }
.sy-t { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 260px; }
.sy-t > .icowrap, .sy-ic { width: 40px; height: 40px; border-radius: 11px; background: #def4ec; color: #157a5c; display: flex; align-items: center; justify-content: center; flex: none; }
.sy-ic.bad { background: #fde8e8; color: var(--danger); }
.sy-ic.spin svg { animation: sy-spin 1.6s linear infinite; }
@keyframes sy-spin { to { transform: rotate(360deg); } }
.sy-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy-t .grow { min-width: 0; }
.sy-prog { margin-top: 6px; height: 5px; }
.sy-side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sy-meter { width: 150px; }
.sy-track { height: 6px; border-radius: 6px; background: #ece5e8; overflow: hidden; margin-bottom: 4px; }
.sy-fill { height: 100%; background: var(--ok); border-radius: 6px; transition: width .3s; }
.sy-fill.warn { background: #e08a00; }
.sy-tabs { display: flex; gap: 4px; padding: 4px; background: var(--panel2); border: 1px solid var(--line); border-radius: 11px; }
.sy-tab { flex: 1; height: 34px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.sy-tab.active { background: #fff; color: var(--accent-d); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.sy-intro { margin: 10px 0 2px; }
.sy-f { display: flex; flex-direction: column; }
.sy-f .input { width: 100%; height: 40px; }
.sy-f .small { margin-top: 4px; }
.sy-err { color: var(--danger); min-height: 1.2em; margin: 10px 0 0; }
.sy-err:empty { display: none; }
/* Projekt som bara finns på den här enheten */
.card .thumb .sy-local { position: absolute; left: 8px; bottom: 8px; width: 24px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, .92); color: var(--muted); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
@media (max-width: 900px) {
  .sy-bar { margin-top: 0; }
  .sy-side { width: 100%; justify-content: space-between; }
  .sy-meter { flex: 1; width: auto; min-width: 0; }
  .sy-bar > .row { width: 100%; }
  .sy-bar > .row .btn { flex: 1; }
  .sy-f .input { height: 44px; font-size: 16px; }   /* 16 px: iPhone zoomar inte in */
}