/* Fictional Sasha demonstration. No production or personal data. */
.safe-sasha-ui {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-columns: 18% 82%;
  overflow: hidden;
  background: #12162b;
  color: #17213b;
  font-family: Inter, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(7px, .72vw, 13px);
}
.safe-sasha-ui * { box-sizing: border-box; }
.safe-sasha-ui aside {
  min-width: 0;
  padding: 2em 1.2em 1.3em;
  display: flex;
  flex-direction: column;
  gap: .55em;
  background: #0c142b;
  color: rgba(255,255,255,.7);
}
.safe-sasha-ui aside > strong { margin: 0 0 1.7em; color: #fff; font-size: 1.25em; text-align: center; }
.safe-sasha-ui aside > span { padding: .7em .85em; border-radius: .7em; font-weight: 650; }
.safe-sasha-ui aside > span.is-active { color: #fff; background: linear-gradient(110deg, rgba(83,65,214,.55), rgba(143,49,197,.52)); box-shadow: inset 0 0 0 1px rgba(168,136,255,.38); }
.safe-sasha-ui aside > b { margin-top: auto; padding-top: 1em; display: grid; gap: .25em; border-top: 1px solid rgba(255,255,255,.1); color: #fff; }
.safe-sasha-ui aside > b small { color: rgba(255,255,255,.5); font-weight: 500; }
.safe-sasha-ui__main { min-width: 0; padding: 2em; display: flex; flex-direction: column; gap: 1.25em; background: radial-gradient(circle at 70% 0, rgba(113,61,224,.22), transparent 42%), #1b1a39; }
.safe-sasha-ui__main > header { padding: 1.3em 1.5em; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(196,183,255,.3); border-radius: 1.1em; background: linear-gradient(120deg, rgba(93,57,179,.66), rgba(52,43,121,.72)); color: #fff; }
.safe-sasha-ui__main > header small { color: #c9b7ff; font-size: .73em; font-weight: 850; letter-spacing: .13em; }
.safe-sasha-ui__main > header h3 { margin: .25em 0 .1em; color: #fff; font-size: 1.45em; }
.safe-sasha-ui__main > header p { margin: 0; color: rgba(255,255,255,.7); }
.safe-sasha-ui__main > header > span { padding: .55em .8em; border-radius: 999px; background: rgba(255,255,255,.1); color: #d7cdfd; font-size: .78em; font-weight: 700; }
.safe-sasha-ui__main > section { min-height: 0; display: grid; gap: .7em; }
.safe-sasha-ui article { padding: .9em 1em; display: grid; grid-template-columns: 2.5em 1fr auto; gap: .9em; align-items: center; border: 1px solid rgba(210,205,240,.17); border-radius: .9em; background: rgba(255,255,255,.96); box-shadow: 0 .6em 1.8em rgba(3,5,20,.13); }
.safe-sasha-ui article > i { width: 2.5em; height: 2.5em; display: grid; place-items: center; border-radius: .8em; background: #ffe2e8; color: #ef3159; font-style: normal; font-weight: 900; }
.safe-sasha-ui article.is-watch > i { background: #fff0d7; color: #d98912; }
.safe-sasha-ui article.is-opportunity > i { background: #e9e2ff; color: #7045dc; }
.safe-sasha-ui article.is-suggestion > i { background: #e0f1ff; color: #2781df; }
.safe-sasha-ui article div { min-width: 0; display: grid; gap: .16em; }
.safe-sasha-ui article small { color: #ef3159; font-size: .68em; font-weight: 850; letter-spacing: .07em; }
.safe-sasha-ui article.is-watch small { color: #c17b12; }
.safe-sasha-ui article.is-opportunity small { color: #7045dc; }
.safe-sasha-ui article.is-suggestion small { color: #2776c9; }
.safe-sasha-ui article strong { overflow: hidden; font-size: 1em; white-space: nowrap; text-overflow: ellipsis; }
.safe-sasha-ui article p { margin: 0; overflow: hidden; color: #748096; font-size: .82em; white-space: nowrap; text-overflow: ellipsis; }
.safe-sasha-ui article button { padding: .65em .85em; border: 1px solid #dfdbea; border-radius: .65em; background: #fff; color: #6240d0; font-weight: 750; }
.safe-sasha-ui__main > footer { margin-top: auto; padding: .75em .85em; display: flex; align-items: center; gap: .7em; border: 1px solid rgba(196,183,255,.22); border-radius: .8em; background: rgba(8,10,28,.55); }
.safe-sasha-ui__main > footer span { flex: 1; color: #969bb1; }
.safe-sasha-ui__main > footer button { width: 2.5em; height: 2.5em; border: 0; border-radius: .7em; background: linear-gradient(135deg, #6c42e6, #b531dc); color: #fff; }

@media (max-width: 700px) {
  .safe-sasha-ui { min-width: 760px; font-size: 8px; }
}