/* п. 117: единый стиль «стекло» для всего сайта — полупрозрачные скруглённые кнопки, шапки, карточки, поля.
   п. 115: карточки сводки, столбики, кольцо, «Цель». Всё удобно с телефона. */
:root {
  --g-bg: rgba(255, 255, 255, .62);
  --g-bg2: rgba(255, 255, 255, .78);
  --g-brd: rgba(255, 255, 255, .75);
  --g-edge: rgba(28, 43, 75, .12);
  --g-sh: 0 6px 18px rgba(20, 30, 60, .12), inset 0 1px 0 rgba(255, 255, 255, .85);
  --g-sh-s: 0 3px 10px rgba(20, 30, 60, .10), inset 0 1px 0 rgba(255, 255, 255, .8);
  --g-blur: saturate(1.4) blur(14px);
  --g-acc: #7C8CF8;
}
body.dark, body.th-dark, body.master {
  --g-bg: rgba(255, 255, 255, .07);
  --g-bg2: rgba(255, 255, 255, .11);
  --g-brd: rgba(255, 255, 255, .16);
  --g-edge: rgba(255, 255, 255, .10);
  --g-sh: 0 8px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .10);
  --g-sh-s: 0 4px 12px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .09);
}

/* ---------- кнопки ---------- */
.btn {
  border-radius: 14px !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 60%) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .45) !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); box-shadow: 0 2px 8px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .35) !important; }
.btn.ghost {
  background-color: var(--g-bg) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-brd) !important;
  box-shadow: var(--g-sh-s), 0 0 0 1px var(--g-edge) !important;
  color: var(--ink) !important;
}
.chip, .vis-act, .seg > button, .kpi-more, .rx-pill, .view-back, .view-x, .sheet-x, .fh-close, .lb-reset {
  border-radius: 999px !important;
  background-color: var(--g-bg) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-brd) !important;
  box-shadow: var(--g-sh-s), 0 0 0 1px var(--g-edge) !important;
  color: var(--ink);
  transition: transform .08s ease, background-color .15s ease;
}
.chip:active, .vis-act:active, .seg > button:active { transform: scale(.97); }
.seg { gap: 6px !important; background: transparent !important; box-shadow: none !important; border: 0 !important; flex-wrap: wrap; }
.seg > button[aria-pressed="true"], .vis-act.on {
  background-color: var(--tab) !important; color: var(--tab-ink, #1D1600) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%) !important;
  border-color: rgba(255, 255, 255, .6) !important; font-weight: 700;
}
.fh-close, .sheet-x, .view-x { width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0 !important; font-size: 17px; }

/* ---------- поля ---------- */
.input, select.input, textarea.input, .composer textarea, .composer input[type="text"] {
  border-radius: 14px !important;
  background-color: var(--g-bg2) !important;
  border: 1px solid var(--g-brd) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 1px var(--g-edge) !important;
}

/* ---------- шапки чатов и панели ---------- */
.chat-head {
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .20);
}
.chat-head button:not(.btn) {
  border-radius: 14px !important; min-width: 40px; min-height: 40px;
  background: rgba(255, 255, 255, .10) !important; border: 1px solid rgba(255, 255, 255, .20) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 3px 10px rgba(0, 0, 0, .18);
}
.chat-head .code, .chat-head [class*="code"] { border-radius: 12px !important; }
.chips, .composer {
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border-top: 1px solid var(--g-edge);
}
.composer .send, .composer button.btn, .composer .icon-btn, .composer button[type="submit"] { border-radius: 50% !important; }

/* ---------- карточки ---------- */
.card, .folder-box, .mcard, .flcard, .folder-card, .dcard, .kpi, .vbox, .sheet-card {
  border-radius: 20px !important;
  border: 1px solid var(--g-brd) !important;
  box-shadow: var(--g-sh), 0 0 0 1px var(--g-edge) !important;
}
.msg { border-radius: 18px; box-shadow: 0 3px 12px rgba(0, 0, 0, .10); }
.nav .nav-i[aria-current="page"] { background: rgba(255, 255, 255, .14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 14px rgba(0, 0, 0, .25); border-radius: 14px; }
.more-i { border-radius: 18px !important; background: var(--g-bg) !important; border: 1px solid var(--g-brd) !important; box-shadow: var(--g-sh-s) !important; }

/* ---------- таблицы (п. 115) ---------- */
.tablewrap { border-radius: 18px; overflow: auto; border: 1px solid var(--g-brd); box-shadow: var(--g-sh), 0 0 0 1px var(--g-edge); background: var(--paper); -webkit-overflow-scrolling: touch; }
.tablewrap table { border-collapse: separate; border-spacing: 0; width: 100%; }
.tablewrap th { position: sticky; top: 0; z-index: 1; background: var(--paper); font-size: 12.5px; text-transform: none; color: var(--ink-soft); font-weight: 600; }
.tablewrap th, .tablewrap td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tablewrap tr:last-child td { border-bottom: 0; }
.tablewrap tbody tr:hover td { background: rgba(124, 140, 248, .07); }
@media (max-width: 760px) {
  .tablewrap td:first-child, .tablewrap th:first-child { position: sticky; left: 0; background: var(--paper); z-index: 1; box-shadow: 1px 0 0 var(--line); }
  .tablewrap th, .tablewrap td { padding: 9px 10px; font-size: 14px; }
}

/* ---------- сводка ---------- */
.dash h2 { margin: 0; font-size: 26px; letter-spacing: -.01em; }
.dash-hello { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.dash-hello p { margin: 2px 0 0; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.kpi { background: var(--paper); padding: 14px 14px 0; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.kpi-t { font-size: 13.5px; color: var(--ink-soft); }
.kpi-v { font-size: 25px; font-weight: 800; letter-spacing: -.01em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-c { font-size: 12.5px; margin-bottom: 10px; }
.chg { font-weight: 700; } .chg.up { color: #1F9D57; } .chg.down { color: #D9473B; }
body.dark .chg.up { color: #45D48A; } body.dark .chg.down { color: #FF7A6E; }
.kpi-more { margin: auto -14px 0; border-radius: 0 !important; border: 0 !important; border-top: 1px solid var(--g-edge) !important; box-shadow: none !important;
  text-align: left; padding: 10px 14px; font-size: 13.5px; background-color: rgba(127, 127, 127, .07) !important; }
.dash-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; margin-bottom: 12px; }
.dcard { background: var(--paper); padding: 14px; min-width: 0; margin-bottom: 12px; }
.dash-grid .dcard { margin-bottom: 0; }
.dcard-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.legend { font-size: 12.5px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.lg.inc, .b.inc { background: #7C8CF8; } .lg.cost, .b.cost { background: #C9D2FF; }
body.dark .lg.cost, body.dark .b.cost { background: #DDE3FF; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding: 6px 0 0; overflow-x: auto;
  background-image: repeating-linear-gradient(0deg, transparent 0 37px, var(--g-edge) 37px 38px); }
.bcol { flex: 1 0 44px; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; background: transparent; border: 0; padding: 0; }
.bpair { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.b { width: 12px; border-radius: 6px 6px 3px 3px; min-height: 2px; transition: filter .15s; }
.bcol.on .b, .bcol:hover .b { filter: brightness(1.12) saturate(1.2); }
.bcol.on .blab { color: var(--ink); font-weight: 700; }
.blab { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; }
.bar-tip { font-size: 13px; margin-top: 6px; min-height: 1.4em; }
.donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.donut { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; flex: none; box-shadow: var(--g-sh-s); }
.donut-in { width: 96px; height: 96px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font-weight: 800; font-size: 13.5px; text-align: center; padding: 6px; }
.donut-legend { display: grid; gap: 6px; min-width: 150px; }
.lg-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; font-size: 14px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.acts { display: grid; gap: 2px; }
.act { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--g-edge); }
.act:last-child { border-bottom: 0; }
.ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #7C8CF8, #4C5BD4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.act-t { display: grid; min-width: 0; } .act-t b, .act-t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .act-t span { font-size: 12.5px; }
.pill { font-size: 12px; padding: 3px 9px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.pill.order { background: rgba(57, 194, 139, .16); color: #1F9D57; } .pill.pay { background: rgba(242, 194, 48, .22); color: #9A6B00; }
body.dark .pill.order { color: #6BE3A8; } body.dark .pill.pay { color: #FFD66B; }
.act-s { font-variant-numeric: tabular-nums; white-space: nowrap; } .act-s.neg { color: #D9473B; }
/* цель */
.goal-box { display: grid; gap: 12px; }
.goal-top { font-weight: 700; font-size: 16px; }
.gbar { position: relative; height: 22px; border-radius: 999px; background: var(--g-bg2); border: 1px solid var(--g-brd); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .12); margin: 6px 0 4px; }
.gfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #7C8CF8, #39C28B); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); transition: width .6s ease; }
.gknob { position: absolute; top: 50%; transform: translateY(-50%); min-width: 44px; height: 32px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 800; background: var(--paper); color: var(--ink); border: 1px solid var(--g-brd); box-shadow: var(--g-sh-s); }
.goal-rows { display: grid; gap: 6px; }
.grow-line { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(127, 127, 127, .07); }
.grow-line b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.grow-line.ok b { color: #1F9D57; } .grow-line.bad b { color: #D9473B; }
body.dark .grow-line.ok b { color: #45D48A; } body.dark .grow-line.bad b { color: #FF7A6E; }
.mline { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 14.5px; }
.mbar { height: 10px; border-radius: 999px; background: var(--g-bg2); overflow: hidden; } .mbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7C8CF8, #39C28B); }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px 12px 0; } .kpi-v { font-size: 20px; } .kpi-more { margin: auto -12px 0; padding: 9px 12px; }
  .dash h2 { font-size: 22px; }
  .act { grid-template-columns: 32px 1fr auto; } .act .pill { display: none; } .ava { width: 32px; height: 32px; }
  .bars { height: 160px; }
}
body.th-photo .dash-hello h2, body.th-photo .dash-hello p { color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 14px rgba(0, 0, 0, .55); }