/* =============================================
   FINANCE PRO ELITE — CLEAN (UI/UX SAFE)
   РЕФАКТОРИНГ БЕЗ ИЗМЕНЕНИЙ UI/UX
   Итоговый каскад сохранён, дубли удалены
   ============================================= */

/* ===== 1) VARIABLES / THEMES ===== */
:root{
  --font:'Montserrat',sans-serif;
  --fs:1;

  --r:18px;
  --r2:22px;

  /* fallback */
  --bg:#14171c;
  --bg-glow: rgba(255,255,255,0.06);
  --card:#1b1f26;
  --text:#f2f5f7;
  --muted:rgba(242,245,247,0.55);
  --accent:#9fb3c8;
  --accent2:#00d2ff;

  --good:#22c55e;
  --bad:#ef4444;
  --warn:#f59e0b;

  --stroke:rgba(242,245,247,0.10);
  --shadow:18px 18px 34px rgba(0,0,0,0.55);
  --shadow2:-18px -18px 34px rgba(255,255,255,0.03);

  /* elevation tokens (единая иерархия во всех темах) */
  --e-card:0 18px 38px rgba(0,0,0,0.60);
  --e-btn:0 22px 46px rgba(0,0,0,0.72);
  --e-btn-press:inset 0 14px 28px rgba(0,0,0,0.62);
  --e-hi:inset 0 1px 0 rgba(255,255,255,0.14);
  --e-hi-soft:inset 0 1px 0 rgba(255,255,255,0.10);

  /* premium matte defaults (ЭТАЛОН) */
  --p-bg:rgba(255,255,255,0.12);
  --p-brd:rgba(255,255,255,0.18);
  --p-in:rgba(255,255,255,0.10);
  --p-sh:0 18px 38px rgba(0,0,0,0.60);

/* ===== TRUE 3D LAYERS (НЕ ТРОГАЕМ ЦВЕТА ТЕМ) =====
   3 уровня: фон / карточки / кнопки.
   Цвета остаются прежние — отличаем поверхности градиентом и тенью. */
--card-bg:var(--p-bg);
--card-brd:var(--p-brd);
--card-in:var(--p-in);
--card-sh:var(--e-card);

--btn-bg:var(--p-bg);
--btn-brd:var(--p-brd);
--btn-sh:var(--e-btn);
--btn-press:var(--e-btn-press);
--btn-hi:var(--e-hi);
--btn-hi-soft:var(--e-hi-soft);
/* ================================================ */

  /* ring/aura (ЭТАЛОН) */
  --ring:rgba(255,255,255,0.18);
  --aura:rgba(255,255,255,0.08);

  /* nav (ЭТАЛОН) */
  --nav-bg:rgba(20,23,28,0.94);
  --nav-sh:0 28px 62px rgba(0,0,0,0.70);

  /* PREMIUM GLOW (цвет берём из темы через --accent / --accent2) */
  --glow-ring: rgba(255,255,255,0.20);  /* кромка заметнее */
  --glow-aura: rgba(255,211,106,0.18);  /* мягкий ореол (по умолчанию) */
  --glow-aura2: rgba(255,211,106,0.08); /* дальний ореол */
  --glow-fill: rgba(255,255,255,0.04);  /* лёгкая внутренняя подсветка */

}

/* 2) Серо-дымная — ЭТАЛОН */
/* =========================
   THEME 2 — SMOKE PREMIUM
   ========================= */
body[data-theme="2"]{
  /* START PATCH: THEME2 FULL */

  /* базовая глубина */
  --bg:#14171c;
  --card:rgba(20,23,28,0.92);

  --text:#f2f5f7;
  --muted:rgba(242,245,247,0.55);

  /* холодный премиум-акцент */
  --accent:#9fb3c8;
  --accent2:#00d2ff;

  --good:#22c55e;
  --bad:#ef4444;
  --warn:#f59e0b;

  /* контуры */
  --stroke:rgba(242,245,247,0.14);

  /* тени — объём */
  --shadow:18px 18px 36px rgba(0,0,0,0.70);
  --shadow2:-18px -18px 36px rgba(255,255,255,0.03);

  /* премиум-мат */
  --p-bg:rgba(20,23,28,0.94);
  --p-brd:rgba(255,255,255,0.18);
  --p-in:rgba(255,255,255,0.08);
  --p-sh:0 20px 46px rgba(0,0,0,0.72);

  /* подсветка */
  --ring:rgba(159,179,200,0.20);
  --aura:rgba(159,179,200,0.07);

  /* навигация */
  --nav-bg:rgba(20,23,28,0.96);
  --nav-sh:0 30px 70px rgba(0,0,0,0.80);

  position: relative;

  /* END PATCH: THEME2 FULL */

  --glow-aura: rgba(0,210,255,0.20);
  --glow-aura2: rgba(0,210,255,0.09);
  --glow-ring: rgba(255,255,255,0.22);
  --glow-fill: rgba(255,255,255,0.04);
}

/* START PATCH: THEME2 BACKDROP */
body[data-theme="2"]::before{
  content:"";
  position: fixed; /* ❗ БЫЛ fixed — ЛОМАЛ НИЗ */
  inset:0;
  z-index:-1;         /* ❗ УВОДИМ ПОД BODY */
  pointer-events:none;

  background:
    radial-gradient(1100px 650px at 20% 12%, rgba(159,179,200,0.16), transparent 60%),
    radial-gradient(900px 560px at 80% 18%, rgba(0,210,255,0.14), transparent 62%),
    radial-gradient(800px 520px at 50% 90%, rgba(159,179,200,0.10), transparent 60%),
    linear-gradient(180deg,#14171c 0%,#0d0f14 100%);
}
/* END PATCH: THEME2 BACKDROP */

/* =========================
   THEME 4 — OBSIDIAN GOLD (MASTER MATERIAL)
   ========================= */
body[data-theme="4"]{

  /* БАЗА — плотный обсидиан */
  --bg:#050607;
  --bg-deep:#030405;

  /* ПОВЕРХНОСТЬ — графит */
  --card:#0F1115;

  --text:#F4F6F8;
  --muted:rgba(244,246,248,0.58);

  /* Золото — благородное */
  --accent:#E7B95A;
  --accent-soft:rgba(231,185,90,0.18);

  --stroke:rgba(231,185,90,0.14);

  --shadow-lg:0 28px 70px rgba(0,0,0,0.88);
  --shadow-md:0 14px 38px rgba(0,0,0,0.75);

  --nav-bg:#050607;

  position:relative;
}

/* ГЛУБИНА СЦЕНЫ */
body[data-theme="4"]::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;

  background:
    radial-gradient(900px 600px at 20% 8%, rgba(231,185,90,0.08), transparent 60%),
    radial-gradient(700px 500px at 80% 18%, rgba(231,185,90,0.05), transparent 65%),
    linear-gradient(180deg, #050607 0%, #020303 100%);
}

/* 5) Deep Ocean (плотный премиум как эталон) */
body[data-theme="5"]{
  /* START PATCH: THEME5 FULL (SAFE) */

  --bg:#0A0F1D;
  --bg-glow: rgba(0,210,255,0.16);
  --card:rgba(10,15,29,0.92);
  --text:#eaf6ff;
  --muted:rgba(234,246,255,0.55);
  --accent:#00D2FF;
  --accent2:#2EE59D;

  --good:#22c55e;
  --bad:#ff4d4d;
  --warn:#f59e0b;

  --stroke:rgba(0,210,255,0.22);
  --shadow:18px 18px 34px rgba(0,0,0,0.66);
  --shadow2:-18px -18px 34px rgba(0,210,255,0.03);

  --p-bg:rgba(10,15,29,0.92);
  --p-brd:rgba(0,210,255,0.22);
  --p-in:rgba(255,255,255,0.08);
  --p-sh:0 20px 44px rgba(0,0,0,0.70);

  --ring:rgba(0,210,255,0.22);
  --aura:rgba(0,210,255,0.08);

  --nav-bg:rgba(10,15,29,0.96);
  --nav-sh:0 28px 62px rgba(0,0,0,0.74);

  /* важно для слоёв */
  position: relative;

  /* END PATCH: THEME5 FULL (SAFE) */

  --glow-aura: rgba(0,210,255,0.20);
  --glow-aura2: rgba(0,210,255,0.09);
  --glow-ring: rgba(255,255,255,0.22);
  --glow-fill: rgba(255,255,255,0.04);
}

/* START PATCH: THEME5 BACKDROP (SAFE) */
body[data-theme="5"]::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;           /* <-- КЛЮЧ: фон уходит под весь интерфейс и не мешает fixed-низу */
  pointer-events: none;

  background:
    radial-gradient(1100px 650px at 18% 12%, rgba(0,210,255,0.16), rgba(0,0,0,0) 60%),
    radial-gradient(900px 560px at 82% 18%, rgba(46,229,157,0.10), rgba(0,0,0,0) 62%),
    radial-gradient(850px 560px at 50% 92%, rgba(0,210,255,0.10), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #0A0F1D 0%, #050A14 100%);
}
/* END PATCH: THEME5 BACKDROP (SAFE) */
/* START PATCH: TOTAL DASHBOARD OVERRIDE */
.total{
  /* START PATCH: TOTAL FIT (FLEX NO CLIP) */

  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 14px;

  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
  flex-wrap: nowrap;

  text-align: center;
  font-weight: 900;

  /* КРУПНЕЕ */
  font-size: clamp(34px, 8.8vw, 70px);

  letter-spacing: 0;
  line-height: 1.05;

  margin: 10px 0 14px;
  user-select: none;

  overflow: visible;

  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;

  text-shadow:
    0 14px 28px rgba(0,0,0,0.62),
    0 3px 0 rgba(255,255,255,0.06),
    0 0 18px rgba(0,0,0,0.28);

  transform: translateZ(0);

  /* END PATCH: TOTAL FIT (FLEX NO CLIP) */
}
/* END PATCH: TOTAL DASHBOARD OVERRIDE */

/* ВАЖНО: если внутри .total есть span с числом — разрешаем ему сжиматься */
/* START PATCH: TOTAL NUMBER SIZE */
.total > *{
  min-width: 0;

  /* КРУПНЫЕ ЦИФРЫ */
  font-size: clamp(36px, 9vw, 72px);
  font-weight: 900;
  line-height: 1.05;
}
/* END PATCH: TOTAL NUMBER SIZE */

/* ===== 2) RESET / BASE ===== */
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html, body{ overscroll-behavior-x:none; overflow-x:hidden; }

body{
  font-family:var(--font);
  font-size:calc(16px * var(--fs));
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  padding-bottom:140px;
}

.c{ max-width:520px; margin:0 auto; padding:16px; }
.h{ display:none !important; }
/* // НАЧАЛО ПАТЧА: ADVANCE STRIP — ONE LINE PREMIUM (OBSIDIAN) */
#biz-advance-strip{
  /* форма */
  width: fit-content;
  max-width: 92%;
  margin: 10px auto 14px;
  padding: 8px 14px;
  border-radius: 12px;

  /* тонкий ободок под обсидиан */
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--card) 86%, transparent);

  /* типографика как в твоих комментариях */
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .2px;

  /* одна строка */
  white-space: nowrap;
}

#biz-advance-strip .as-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
}

#biz-advance-strip .as-l{
  opacity: .92;
  color: var(--text);
}

#biz-advance-strip .as-v{
  font-weight: 900;
  color: var(--accent);
}
/* // КОНЕЦ ПАТЧА: ADVANCE STRIP — ONE LINE PREMIUM (OBSIDIAN) */
.top{ margin-bottom:10px; }
.greeting{ font-weight:800; font-size:12px; color:var(--muted); margin:6px 0 10px; }

/* ===== 3) TOGGLES ===== */
.tgl{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}

.mb{
  padding:12px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:var(--card);
  color:var(--text);
  font-weight:900;
  box-shadow:var(--shadow), var(--shadow2);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.mb.a{
  border-color:transparent;
  background:var(--accent);
  color:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,0.25);
  transform:translateY(-2px);
}

/* аккуратные отличия для тем */
body[data-theme="2"] .mb.a{
  background:rgba(159,179,200,0.22);
  border-color:rgba(255,255,255,0.16);
  color:var(--text);
}
body[data-theme="3"] .mb.a{
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  border-color:rgba(255,255,255,0.16);
  color:#fff;
}

/* ===== 4) DASHBOARD ===== */
/* START PATCH: REMOVE TOTAL DUPLICATE (KEEP FLEX/CLAMP VERSION ABOVE) */
/* .total duplicate removed to prevent overriding the "TOTAL FIT (FLEX NO CLIP)" block */
/* END PATCH: REMOVE TOTAL DUPLICATE */
body[data-theme="3"] .total{ text-shadow:0 0 24px rgba(179,0,255,0.45); }

.sr{ display:flex; gap:10px; margin-bottom:10px; }
.sb{ flex:1; border-radius:var(--r); padding:14px; text-align:center; }
.sb small{ display:block; font-weight:900; font-size:10px; color:var(--muted); letter-spacing:0.8px; }
.sb b{ display:block; font-weight:900; font-size:16px; margin-top:8px; }

/* Goal */
.goal-mini{ border-radius:var(--r2); padding:14px; margin:8px 0 12px; }
.goal-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.goal-name{ font-weight:900; font-size:12px; color:var(--muted); }
.goal-perc{ font-weight:900; font-size:12px; color:var(--accent); }

.goal-bar{
  height:8px;
  border-radius:999px;
  background:rgba(0,0,0,0.08);
  margin:10px 0;
  overflow:hidden;
}
body[data-theme="2"] .goal-bar,
body[data-theme="3"] .goal-bar{ background:rgba(255,255,255,0.10); }

.goal-fill{ height:100%; border-radius:999px; background:var(--accent); }
body[data-theme="3"] .goal-fill{
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow:0 0 16px rgba(179,0,255,0.35);
}

.goal-side{
  display:grid;
  grid-template-columns:1fr 2.4fr 1fr;
  gap:10px;
  align-items:center;
}
.goal-center{ min-width:0; }
.goal-btn{ white-space:nowrap; padding:10px 12px; }

/* ===== 5) MINI / SEARCH / LISTS ===== */
.mini{
  padding:10px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:var(--card);
  color:var(--text);
  font-weight:900;
  font-size:11px;
  box-shadow:var(--shadow), var(--shadow2);
}

.search-box{
  border-radius:var(--r2);
  padding:12px;
  margin:10px 0 12px;
}
.search-box input{
  width:100%;
  border:none;
  background:transparent;
  color:var(--text);
  font-weight:800;
  font-size:14px;
  outline:none;
}

.it{
  border-radius:var(--r2);
  padding:14px;
  margin-bottom:10px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  cursor:pointer;
}

.ii{
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}
body[data-theme="2"] .ii,
body[data-theme="3"] .ii{ background:rgba(255,255,255,0.08); }

.pl{ color:var(--good); }
.mn{ color:var(--bad); }

/* Debts */
.debts-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 10px; }
.debts-title{ font-weight:900; font-size:16px; }
.cd{ border-radius:var(--r2); padding:14px; margin-bottom:10px; }
.closed-deal{ opacity:0.7; }

/* ===== 6) INPUTS / BUTTONS ===== */
input, select, textarea{
  width:100%;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background:var(--card);
  color:var(--text);
  font-weight:800;
  box-shadow:var(--shadow), var(--shadow2);
  margin-bottom:10px;
  outline:none;
}

.br{
  width:100%;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background:var(--card);
  color:var(--text);
  font-weight:900;
  box-shadow:var(--shadow), var(--shadow2);
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.br.primary{
  border-color:transparent;
  background:var(--accent);
  color:#fff;
}

/* НЕОН primary */
body[data-theme="3"] .br.primary{
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  border-color:rgba(255,255,255,0.16);
  color:#fff;
}
body[data-theme="2"] .br.primary{
  background:rgba(159,179,200,0.22);
  border-color:rgba(255,255,255,0.16);
  color:var(--text);
}

.br.ghost{ opacity:0.85; background:transparent; }

/* ===== 7) CATEGORIES ===== */
.cg{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
  margin:10px 0 12px;
}

.ci{
  aspect-ratio:1/1;
  border-radius:18px;
  border:1px solid var(--stroke);
  background:var(--card);
  box-shadow:var(--shadow), var(--shadow2);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  padding:8px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.ci b{
  font-size:30px !important;
  line-height:1 !important;
}

.ci span{
  font-size:9px;
  font-weight:900;
  color:var(--muted);
  text-transform:uppercase;
  width:100%;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* ===== FIX: custom categories (✕) не ломает плитку ===== */

/* делаем плитку контейнером для абсолютного ✕ */
.ci{
  position: relative;
}

/* кнопка удаления для кастомных категорий */
.ci .cix{
  position: absolute;
  top: 6px;
  right: 6px;

  width: 26px;
  height: 26px;
  border-radius: 13px;

  display: grid;
  place-items: center;

  background: color-mix(in srgb, var(--card) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--stroke) 65%, transparent);
  color: var(--text);

  line-height: 1;
  font-size: 16px;
  font-weight: 900;

  opacity: .72;
  transform: translateZ(0);
}

/* чтобы “кликалось” и выглядело живее */
.ci .cix:active{
  transform: scale(.95);
  opacity: 1;
}

/* чтобы ✕ не перетягивал клики по всей плитке */
.ci .cix{
  cursor: pointer;
}

/* ===== END FIX ===== */
/* selected (категория): кромка + ореол по цвету темы (ЯРЧЕ) */
.ci.s{
  border-color: color-mix(in srgb, var(--glow-ring) 85%, #fff 15%);
  border-width: 2px;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.28),
    0 0 0 2px color-mix(in srgb, var(--glow-ring) 70%, transparent),
    0 0 26px color-mix(in srgb, var(--glow-aura) 90%, transparent),
    0 0 64px color-mix(in srgb, var(--glow-aura2) 85%, transparent);
  transform: translateY(-1px);
}

/* плотность категорий по темам (как у тебя) */
body[data-theme="2"] .ci{
  background:rgba(20,23,28,0.92) !important;
  border-color:rgba(255,255,255,0.18) !important;
}
body[data-theme="3"] .ci{
  background:rgba(10,6,19,0.92) !important;
  border-color:rgba(255,255,255,0.20) !important;
}
body[data-theme="4"] .ci{ background:rgba(15,17,20,0.92) !important; }
body[data-theme="5"] .ci{ background:rgba(10,15,29,0.92) !important; }

body[data-theme="2"] .ci.s{
  border-color: rgba(255,255,255,0.44);
  border-width: 2px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.22),
    0 0 18px rgba(255,255,255,0.12),
    var(--shadow), var(--shadow2);
  transform: translateY(-2px);
}

/* категории в модалке "Новая запись" (плотно) */
#m-add .ci{
  background:rgba(20,23,28,0.92) !important;
  border-color:rgba(255,255,255,0.18) !important;
}
body[data-theme="3"] #m-add .ci{
  background:rgba(10,6,19,0.92) !important;
  border-color:rgba(255,255,255,0.20) !important;
}
body[data-theme="5"] #m-add .ci{
  background:rgba(10,15,29,0.92) !important;
  border-color:rgba(0,210,255,0.22) !important;
}

/* ===== 8) MODALS (FIXED) ===== */
.md{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,0.78);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:.2s;

  display:flex;
  align-items:flex-end;

  z-index:2000;

  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#m-add.md{
  background:rgba(0,0,0,0.85);
}

.md.o{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.mc{
  width:100%;
  max-height:98dvh;
  max-height:98svh;
  overflow-y:auto;
  overflow-x:hidden;

  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;

  background:var(--card);
  border-top-left-radius:28px;
  border-top-right-radius:28px;
  border:1px solid var(--stroke);
  box-shadow:var(--shadow), var(--shadow2);
  padding:16px;

  transform:translateY(18px);
  transition:.2s;
  
}
/* START PATCH: DATA ANALYTICS CARDS */
.analytics{
  display: grid;
  gap: 12px;

  margin: 4px 0 18px;
  padding: 12px;

  border-radius: 20px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );

  border: 1px solid rgba(255,255,255,0.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 18px 40px rgba(0,0,0,0.55);
}

.an-card:active{
  transform: translateY(1px) scale(0.99);
  filter: brightness(1.08);
}

.an-title{
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.2px;
  color: var(--text, #fff);
}
/* END PATCH: DATA ANALYTICS CARDS */
.md.o .mc{ transform:none; }
/* ===== DATA ANALYTICS BLOCK ===== */
.data-block{
  margin: 10px 0 14px;
  padding: 12px;

  border-radius: 18px;
  background: var(--p-bg);
  border: 1px solid var(--p-brd);

  box-shadow: var(--p-sh), inset 0 1px 0 var(--p-in);
}
#m-data .mc{
  position: relative;
}

#m-data .data-block{
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

#m-data .data-block .br{
  position: relative;
  z-index: 6;
  pointer-events: auto;
  touch-action: manipulation;
}
.data-block-title{
  font-weight: 900;
  font-size: 12px;
  opacity: .75;
  margin-bottom: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;

  display:flex;
  align-items:center;
  gap:10px;
}

/* внутри блока кнопки должны быть обычными */
.data-block .br{
  width: 100%;
  margin: 10px 0 0;
}
/* ===== END DATA ANALYTICS BLOCK ===== */

/* FIX: если modal-open "залип" — не убиваем скролл в разделах */
body.modal-open{
  overflow:auto;
  height:auto;
  touch-action:auto;
}

/* Блокируем фон ТОЛЬКО когда реально открыта модалка */
body.modal-open:has(.md.o),
body.modal-open:has(.m.o){
  overflow:hidden;
  height:100dvh;
  height:100svh;
  touch-action:pan-y;
}

.mc-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.mc-title{ font-weight:900; font-size:14px; }

/* унификация полей в модалках + приглушённые подсказки */
.md .mc input,
.md .mc select,
.md .mc textarea{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10) !important;
  color:rgba(242,245,247,.82) !important;
}
.md .mc input::placeholder,
.md .mc textarea::placeholder{
  color:rgba(242,245,247,.45) !important;
  opacity:1 !important;
}

/* жёсткая сетка отступов в add/extra */
#m-add .mc input,
#m-add .mc select,
#m-add .mc textarea,
#m-add .mc .br,
#m-add .mc .mini,
#m-extra .mc input,
#m-extra .mc select,
#m-extra .mc textarea,
#m-extra .mc .br,
#m-extra .mc .mini{
  margin:10px 0 !important;
}
#m-add .mc .br:last-of-type,
#m-extra .mc .br:last-of-type{ margin-bottom:0 !important; }

#m-add .mc .br.primary{
  margin-bottom:6px !important;
  border-width:1px !important;
  border-style:solid !important;
  border-color:var(--p-brd) !important;
}
#m-add .mc .br.primary + .br{ margin-top:6px !important; }

/* ===== 9) PREMIUM MAT LAYER — TRUE 3D ===== */
/* КАРТОЧКИ: средний слой (тише, глубже) */
.sb, .cd, .it, .goal-mini, .search-box,
.mini, .ci, input, select{
  background:var(--card-bg);
  border:1px solid var(--card-brd);
  box-shadow:var(--card-sh), inset 0 1px 0 var(--card-in);
  background-image:linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
  background-blend-mode:overlay;
}

/* КНОПКИ: верхний слой (ближе к пользователю) */
.br, .mb, .rb, .nb b{
  background:var(--btn-bg);
  border:1px solid var(--btn-brd);
  box-shadow:var(--btn-sh), var(--btn-hi);
  background-image:linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0.00));
  background-blend-mode:overlay;
}

/* фокус */

input:focus, select:focus{
  outline:none;
  border-color:var(--ring);
  box-shadow:
    var(--p-sh),
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 0 0 1px var(--ring),
    0 0 12px var(--aura);
  background-image:linear-gradient(90deg, rgba(0,0,0,0), var(--ring), rgba(0,0,0,0));
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:100% 2px;
}

/* тап-ощущение (нажатие вниз — чтобы 3D не «всплывал») */
.mb:active, .rb:active, .ci:active, .br:active, .mini:active, .nb:active b{
  transform:translateY(1px) scale(0.99);
  box-shadow:var(--btn-press), var(--btn-hi-soft);
  filter:brightness(0.99);
}

/* glow на выбранных (premium halo: кромка + мягкий ореол) */
.mb.a, .rb.a, .ci.s, .nb.a b{
  /* НЕ красим плитку — только подсветка */
  background: rgba(20,24,30,0.55);
  border: 1px solid var(--glow-ring);
  color: #fff;

  /* Edge Glow + Soft Halo + дальний ореол (в 2 слоя) */
  box-shadow:
    0 10px 22px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 0 0 1px var(--glow-ring),
    0 0 26px var(--glow-aura),
    0 0 62px var(--glow-aura2);
}

/* START PATCH: PRESS FEEL (ALL BUTTONS) */
.mb:active, .rb:active, .nb:active b, .br:active, .mini:active{
  transform:translateY(1px) scale(.99);
  box-shadow:var(--btn-press), var(--btn-hi-soft);
  filter:brightness(.99);
}
/* END PATCH: PRESS FEEL (ALL BUTTONS) */

.nb.a b, .mb.a, .rb.a, .ci.s{ animation:none !important; }

/* ===== 10) PRIMARY BUTTON: PREMIUM + NO LIFT ===== */
.br.primary{
  transform:none !important;
  border:1px solid var(--p-brd) !important;
  box-shadow:
    var(--p-sh),
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 10px 22px rgba(0,0,0,0.28) !important;
  background-image:linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(255,255,255,0.00)) !important;
  background-blend-mode:overlay;
}
/* // НАЧАЛО ПАТЧА: CONFIRM BUTTONS */
.br.danger{
  background: rgba(255, 70, 70, 0.18);
  border: 1px solid rgba(255, 70, 70, 0.35);
}
.br.danger:active{
  transform: translateY(1px);
}
/* // КОНЕЦ ПАТЧА: CONFIRM BUTTONS */
.br.primary:active{
  transform:translateY(1px) scale(0.99) !important;
  filter:brightness(1.03);
}

/* ===== 11) DOC (INVOICE) ===== */
.doc{
  border-radius:22px;
  padding:14px;
  border:1px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.92);
  color:#111;
  box-shadow:0 10px 26px rgba(0,0,0,0.08);
  overflow:hidden;
}
/*  НАЧАЛО ПАТЧА: DOC COLUMN DIVIDERS */

.doc table{
  border-collapse: collapse;
  width: 100%;
}

.doc th,
.doc td{
  border-right: 1px solid rgba(0,0,0,0.15);
  padding: 6px 4px;
}

.doc th:last-child,
.doc td:last-child{
  border-right: none;
}

/*  КОНЕЦ ПАТЧА: DOC COLUMN DIVIDERS */
body[data-theme="2"] .doc,
body[data-theme="3"] .doc{
  background:rgba(240,240,240,0.92);
  border:1px solid rgba(0,0,0,0.14);
}

.doc table{
  width:100% !important;
  border-collapse:collapse;
  table-layout:fixed !important;
  font-size:12px;
}

.doc th{
  text-align:left;
  opacity:0.70;
  padding:10px 8px;
  border-bottom:1px solid rgba(0,0,0,0.12);
  white-space:normal !important;
  line-height:1.15 !important;
  font-size:9px !important;
  font-weight:900 !important;
}

.doc td{
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,0.08);
  vertical-align:middle;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  line-height:1.25;
  font-size:11px !important;
  font-weight:900 !important;
}

.doc td b{ font-weight:900 !important; }

/* widths */
.doc th:nth-child(1), .doc td:nth-child(1){ width:22% !important; padding-left:4px !important; }
.doc th:nth-child(2), .doc td:nth-child(2){ width:14% !important; text-align:center; }
.doc th:nth-child(3), .doc td:nth-child(3){ width:10% !important; text-align:center; }
.doc th:nth-child(4), .doc td:nth-child(4){ width:16% !important; text-align:center; }
.doc th:nth-child(5), .doc td:nth-child(5){ width:16% !important; text-align:center; }
.doc th:nth-child(6), .doc td:nth-child(6){
  width:22% !important;
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

@media (max-width:420px){
  .doc{ padding:12px !important; }
  .doc table{ font-size:10px !important; }
  .doc th{ padding:8px 5px !important; }
  .doc td{ padding:10px 5px !important; }
  .doc td:nth-child(6){ word-break:break-all !important; white-space:normal !important; }
}

/* gap doc */
#ship-doc-preview{ margin-bottom:36px; }
#extra-doc-preview{ margin-bottom:14px; }
#ship-date-hint{ display:none !important; }

/* ===== 12) VIEW CARD BUTTONS / DANGER ===== */
.btn-row{
  display:flex;
  gap:10px;
  align-items:stretch;
}
.btn-row > button{ flex:1; min-height:46px; }

.btn-danger{
  width:100%;
  margin-top:12px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(220,38,38,0.35);
  background:rgba(220,38,38,0.08);
  color:#dc2626;
  font-weight:900;
}
.btn-danger:active{
  transform:translateY(1px) scale(0.99);
  opacity:0.93;
}

/* hide inner X in view-data */
#m-view #view-data button.mini{ display:none !important; }

/* card actions beauty */
#m-view .mc-top .mini{
  width:44px;
  height:44px;
  border-radius:16px;
  font-size:18px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--p-brd) !important;
  background:var(--p-bg) !important;
  box-shadow:var(--p-sh), inset 0 1px 0 var(--p-in), 0 0 0 1px var(--ring) !important;
}
#m-view .mc-top .mini:active{
  transform:translateY(1px) scale(0.99);
  filter:brightness(1.06);
}
#m-view .btn-row{ gap:10px !important; }
#m-view .btn-row > button{
  min-height:52px;
  border-radius:18px;
  font-weight:900;
  letter-spacing:0.2px;
  box-shadow:var(--p-sh), inset 0 1px 0 var(--p-in);
}
#m-view .btn-row > button.br.primary{
  box-shadow:var(--p-sh), inset 0 1px 0 rgba(255,255,255,0.18), 0 0 14px var(--aura) !important;
}
#m-view .btn-row > button.br:not(.primary){
  border:1px solid var(--p-brd) !important;
  background:var(--p-bg) !important;
}

/* history delete X */
.hist-del{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:14px;
  border:1px solid var(--p-brd);
  background:var(--p-bg);
  color:var(--text);
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--p-sh), inset 0 1px 0 var(--p-in), 0 0 0 1px var(--ring);
  opacity:0.85;
}
.hist-del:active{
  transform:translateY(1px) scale(0.99);
  opacity:1;
}

/* ===== 13) EXTRA MODAL (DOBOR) ===== */
#m-extra.md.o .mc{
  border-color:var(--ring) !important;
  box-shadow:var(--p-sh), inset 0 1px 0 var(--p-in), 0 0 0 1px var(--ring), 0 0 18px var(--aura) !important;
}
#m-extra #extra-doc-preview.doc{
  border:1px solid var(--ring) !important;
  box-shadow:0 10px 26px rgba(0,0,0,0.10), 0 0 0 1px rgba(255,255,255,0.35) inset !important;
}

/* unify extra font */
#m-extra .mc{ font-size:12px; }
#m-extra input,
#m-extra select,
#m-extra .br,
#m-extra .mini{ font-size:12px !important; }

#extra-fish-logic .f-cnt::placeholder{
  font-size:12px;
  opacity:0.55;
}

/* ===== 14) FISH LOGIC (RINGS + LAYOUT) ===== */
#fish-logic, #extra-fish-logic{
  border:1px solid var(--ring) !important;
  border-radius:22px;
  padding:12px;
  box-shadow:0 0 0 1px var(--ring), 0 0 14px var(--aura) !important;
  margin-bottom:12px;
}
#fish-logic .fish-box,
#extra-fish-logic .fish-box{ margin-bottom:10px; }

#fish-logic .br,
#extra-fish-logic .br{ margin-top:10px; }

.fish-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 10px; }
.fish-total{ color:var(--accent); }
.fish-box{ display:grid; gap:10px; margin-bottom:10px; }

/* PRICE LEFT final layout */
.fish-row{
  display:flex;
  gap:6px;
  align-items:flex-start;
}

.fish-left{
  width:72px !important;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.fish-left .del-fish{
  width:48px;
  height:48px;
  align-self:flex-start;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--p-sh), inset 0 1px 0 rgba(255,255,255,0.14) !important;
  border:1px solid rgba(239,68,68,0.35) !important;
  background:rgba(239,68,68,0.10) !important;
  color:var(--bad) !important;
}
.fish-left .f-prc{
  width:100%;
  padding:12px;
  border-radius:18px;
  font-size:15px;
  font-weight:900;
}
.fish-left .f-prc::placeholder{ font-size:12px; opacity:0.55; }

.fish-right{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.fish-topline{
  display:flex;
  gap:5px;
}

.fish-topline .f-type{
  flex:2.9 !important;
  padding:12px;
  min-width:0;
  font-size:15px;
  font-weight:900;
}

.fish-topline .f-w{
  flex:2.3 !important;
  padding:12px;
  min-width:0;
  font-size:15px;
  font-weight:900;
  text-align:center;
}

.fish-topline .f-cnt{
  flex:1.2 !important;
  padding:12px;
  min-width:0;
  font-size:15px;
  font-weight:900;
  text-align:center;
}

.fish-bottomline{
  display:flex;
  justify-content:flex-end;
}

.fish-bottomline .f-summ{
  min-width:104px !important;
  text-align:right;
  opacity:0.95;
  font-weight:900;
  color:var(--accent);
  font-size:13px;
  white-space:nowrap;
}

/* ===== 15) DATA MODAL BUTTONS ===== */
#m-data .mc{ padding-bottom:18px; }
#m-data .mc > .br{
  width:100%;
  margin:10px 0;
  border-radius:18px;
  padding:16px;
  font-weight:800;
  letter-spacing:.2px;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
#m-data .mc > .br:active{
  transform:translateY(1px) scale(.99);
  filter:brightness(.98);
  box-shadow:
    var(--e-btn-press),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 6px 16px rgba(0,0,0,.18);
}

/* ===== 16) NAV ===== */
.nv{
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  width:95%;
  max-width:520px;
  border-radius:30px;
  padding:10px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  z-index:1500;

  background:var(--nav-bg);
  border:1px solid var(--p-brd);
  box-shadow:var(--nav-sh), inset 0 1px 0 var(--p-in);
}

.nb{
  background:transparent;
  border:none;
  cursor:pointer;
  color:var(--muted);
  font-weight:900;
  font-size:10px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  line-height:1.15;
}

.nb b{
  width:56px;
  height:56px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 6px 0;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.35);
  font-size:26px;
  line-height:1;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

body[data-theme="2"] .nb b,
body[data-theme="3"] .nb b{ background:rgba(255,255,255,0.08); }

.nb.a{ color:var(--text); }
.nb.a b{
  /* НЕ красим плитку — только подсветка */
  background: rgba(20,24,30,0.55);
  border: 1px solid var(--glow-ring);
  color: #fff;

  /* Ambient Underlight (еле заметно) */
  box-shadow:
    0 10px 22px rgba(0,0,0,0.30),
    0 0 0 1px rgba(0,0,0,0.35) inset,
    0 0 0 1px var(--glow-ring),
    0 0 20px var(--glow-aura);
}

.nb:active b{ transform:translateY(-1px) scale(0.98); }

/* ===== 17) RANGE BUTTONS ===== */
/* START PATCH: RANGE BUTTONS THEME-ACCENT */
.range-row{
  display:flex;
  gap:10px;
  margin:14px 0 10px;
  align-items:center;
  width:100%;
  overflow-x:hidden;
  overflow-y:visible;
  padding-top:8px;
  padding-bottom:2px;
}

.rb{
  flex:1 1 0;
  width:auto;
  min-width:0;

  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.88);

  padding:10px 0;
  border-radius:999px;

  font-weight:900;
  font-size:13px;

  display:flex;
  align-items:center;
  justify-content:center;

  line-height:1;
  white-space:nowrap;

  overflow:hidden;
  text-overflow:ellipsis;

  text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,0.25);
}

/* АКТИВНАЯ: всегда акцент темы (без “случайного фиолета”) */
.rb.a{
  /* НЕ красим кнопку в цвет темы — только подсветка */
  background: rgba(20,24,30,0.55);
  border: 1px solid var(--glow-ring);
  color: #fff;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 0 0 1px var(--glow-ring),
    0 0 26px var(--glow-aura),
    0 0 62px var(--glow-aura2);
}

/* Неон и Deep Ocean — градиент (там где он реально нужен) */

/* Серо-дымная — текст не белым, чтобы не “мылить” */
body[data-theme="2"] .rb.a{
  /* НЕ красим кнопку в цвет темы — только подсветка */
  background: rgba(20,24,30,0.55);
  border: 1px solid var(--glow-ring);
  color: #fff;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 0 0 1px var(--glow-ring),
    0 0 26px var(--glow-aura),
    0 0 62px var(--glow-aura2);
}

/* Дата-инпут (скрыт как было) */
.rb-date-input{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}

/* START PATCH: REMOVE SEP-LINE DUPLICATE (KEEP THEME-ACCENT VERSION ABOVE) */
/* .sep-line duplicate removed to prevent accidental purple center overriding */
/* END PATCH: REMOVE SEP-LINE DUPLICATE */
/* END PATCH */

.sep-line{
  height:1px;
  width:100%;
  margin:6px 0 14px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0.00),
    rgba(255,255,255,0.16),
    rgba(160,120,255,0.28),
    rgba(255,255,255,0.16),
    rgba(255,255,255,0.00)
  );
  border-radius:999px;
}

/* ===== 18) WA / TG / PDF ===== */
.btn-wa, .btn-tg, .btn-pdf{
  border:none !important;
  color:#fff !important;
  font-weight:900;
  border-radius:14px;
  padding:12px;
}
.btn-wa{ background:#25D366 !important; }
.btn-tg{ background:#229ED9 !important; }
.btn-pdf{ background:#EF4444 !important; }
.btn-wa:active, .btn-tg:active, .btn-pdf:active{
  transform:translateY(1px);
  opacity:0.92;
}

/* ===== 19) MISC ===== */
.field-hint{
  font-size:11px;
  opacity:.65;
  font-weight:800;
  margin:6px 0 6px;
}

/* main numbers */
#s-in{ color:var(--good) !important; }
#s-out{ color:var(--bad) !important; }
#d-mine{ color:var(--accent) !important; }
#d-user{ color:var(--warn) !important; }

/* matte background under grids for themes 3 & 5 */
body[data-theme="3"] #box-cats.cg,
body[data-theme="3"] #list,
body[data-theme="3"] #d-list{
  background:rgba(10,6,19,0.96) !important;
  border-radius:22px;
  padding:10px;
}
body[data-theme="5"] #box-cats.cg,
body[data-theme="5"] #list,
body[data-theme="5"] #d-list{
  background:rgba(10,15,29,0.96) !important;
  border-radius:22px;
  padding:10px;
}
body[data-theme="3"] #list .it,
body[data-theme="5"] #list .it,
body[data-theme="3"] #d-list .cd,
body[data-theme="5"] #d-list .cd{ margin-bottom:10px; }
body[data-theme="3"] #list .it:last-child,
body[data-theme="5"] #list .it:last-child,
body[data-theme="3"] #d-list .cd:last-child,
body[data-theme="5"] #d-list .cd:last-child{ margin-bottom:0; }

/* blink */
@keyframes blinkBad{
  0%{ opacity:1; }
  50%{ opacity:0.25; }
  100%{ opacity:1; }
}
/* START PATCH: THEME BACKGROUND GLOW */
html, body{
  background:
    radial-gradient(1100px 620px at 20% 0%, var(--bg-glow), transparent 62%),
    radial-gradient(900px 520px at 85% 25%, var(--aura), transparent 60%),
    var(--bg) !important;
  color: var(--text);
}
/* END PATCH */
/* НАЧАЛО ПАТЧА: FIX MODAL DATA SCROLL + CLOSE BUTTON */

#-m-data .mc,
#m-data .mc{
  max-height: 98dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Закрепляем верх с крестиком */
#m-data .mc-top{
  position: sticky;
  top: 0;
  z-index: 50;
  background: inherit;
  backdrop-filter: blur(12px);
}

/* Немного воздуха снизу */
#m-data .mc{
  padding-bottom: 20px;
}

/* Кнопка закрытия всегда поверх */
#m-data .mc-top .mini{
  z-index: 60;
  position: relative;
}

/* КОНЕЦ ПАТЧА: FIX MODAL DATA SCROLL + CLOSE BUTTON */

/* PREMIUM: не анимируем тени (чтобы не было подёргиваний) */
/* НАЧАЛО ПАТЧА: ANDROID PERF LUX THEME 4 (NO LAG) */

@media (pointer: coarse){

  /* 1) Самый большой убийца плавности: fixed-фон на весь экран */
  body[data-theme="4"]::before{
    position: absolute !important;
  }

  /* 2) Убираем «звёздные» слои на мобиле (дорого в перерисовке) */
  body[data-theme="4"] .cd::before,
  body[data-theme="4"] .mb::before{
    content: none !important;
  }

  /* 3) Массовый will-change часто ухудшает на Android */
  body[data-theme="4"] .mb,
  body[data-theme="4"] .ci,
  body[data-theme="4"] .rb{
    will-change: auto !important;
  }

  /* 4) filter на active даёт микролаги */
  .an-card:active{
    filter: none !important;
  }

  /* 5) ВАЖНО: стекло/блюр — это лаги. На мобиле вырубаем backdrop-filter
        и даём «дорогой лак» вместо стекла (премиум, но дешево в рендере). */
  body[data-theme="4"] .cd,
  body[data-theme="4"] .mb,
  body[data-theme="4"] .ci,
  body[data-theme="4"] .search-box,
  body[data-theme="4"] .ii{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(14, 14, 16, 0.94) !important; /* плотный лак вместо стекла */
  }

  /* 6) Срезаем многослойные тени → оставляем 2 слоя */
  body[data-theme="4"] .cd,
  body[data-theme="4"] .mb,
  body[data-theme="4"] .ci,
  body[data-theme="4"] .search-box,
  body[data-theme="4"] .ii{
    box-shadow:
      0 18px 44px rgba(0,0,0,0.88),
      0 0 0 1px rgba(255,211,106,0.16) !important;
  }

  body[data-theme="4"] .rb,
  body[data-theme="4"] .br,
  body[data-theme="4"] .mini{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(18, 18, 20, 0.96) !important;
    box-shadow:
      0 12px 28px rgba(0,0,0,0.75),
      inset 0 1px 0 rgba(255,255,255,0.06) !important;
  }

  /* 7) :has() тяжёлый селектор — на мобиле нейтрализуем */
  body.modal-open:has(.md.o),
  body.modal-open:has(.m.o){
    overflow: auto !important;
    height: auto !important;
    touch-action: auto !important;
  }
}

@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* КОНЕЦ ПАТЧА: ANDROID PERF LUX THEME 4 (NO LAG) */

// КОНЕЦ ПАТЧА: ANDROID PERF LUX THEME 4 (NO LAG)
.rb, .nb b{
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

/* ================================
   НАЧАЛО ПАТЧА: THEME 3 (NEON) — GLOW ONLY, NO FILL COLOR
   Цель: в неоне убрать цвет заливки активных кнопок, оставить только подсветку
================================ */
body[data-theme="3"] .rb.a,
body[data-theme="3"] .nb.a b,
body[data-theme="3"] .cat-btn.active,
body[data-theme="3"] .cat-item.active{
  background: rgba(20,24,30,0.55) !important;
  color: #fff !important;
}
/* Если где-то остался градиент заливки — гасим */
body[data-theme="3"] .rb.a,
body[data-theme="3"] .nb.a b{
  background-image: none !important;
}
/* ================================
   КОНЕЦ ПАТЧА
================================ */

/* ================================
   НАЧАЛО ПАТЧА: THEME 3 (NEON) — MODE BUTTONS GLOW ONLY
   Цель: убрать цвет заливки у верхних кнопок "Личное/Бизнес" в теме 3
================================ */
body[data-theme="3"] .mb.a{
  background: rgba(20,24,30,0.55) !important;
  background-image: none !important;
  border-color: var(--glow-ring) !important;
  color: #fff !important;
  filter: none !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 0 0 1px var(--glow-ring),
    0 0 26px var(--glow-aura),
    0 0 62px var(--glow-aura2) !important;
  transform: translateY(-1px) !important;
}
/* ================================
   КОНЕЦ ПАТЧА
================================ */
/* =========================================
   PATCH: CATEGORY REPORT AMOUNTS — THEME COLOR
   Только визуал, без JS
   ========================================= */

/* суммы в списке операций */
.catRitem .catRexp{
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* расход */
.catR[data-type="expense"] .catRitem .catRexp,
.catR[data-type="expense"] .catRsum .catRexp{
  color: var(--bad);
}

/* приход */
.catR[data-type="income"] .catRitem .catRexp,
.catR[data-type="income"] .catRsum .catRexp{
  color: var(--good);
}

/* мягкое свечение под тему (дорого, не кричаще) */
body[data-theme] .catRitem .catRexp{
  text-shadow: 0 0 14px rgba(0,0,0,0.25);
}

/* итоговая сумма — чуть мощнее */
.catRsum .catRexp{
  font-size: 18px;
}
/* =========================================
   PATCH: ACTIVE PERIOD BUTTONS (CATEGORY REPORT)
   Поведение как на главной
   ========================================= */

/* контейнер кнопок */
.catRcontrols .br{
  transition: 
    background-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .08s ease;
}

/* активная кнопка */
.catRcontrols .br.on{
  background: var(--accent);
  color: var(--accent-contrast, #000);
  font-weight: 900;
  box-shadow:
    0 6px 18px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* эффект нажатия */
.catRcontrols .br:active{
  transform: scale(.96);
}

/* hover (если не тач) */
@media (hover:hover){
  .catRcontrols .br:not(.on):hover{
    background: rgba(255,255,255,.06);
  }
}
/* ===== PATCH: MODALS THEME + COMPACT + SCROLL FIX (CSS ONLY) ===== */

/* 1) Модалка наследует тему (а не фиксированный темный rgba) */
.md{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.md .mc{
  background: var(--p-bg);
  border: 1px solid var(--p-brd);
  box-shadow: var(--p-sh), inset 0 1px 0 var(--p-in);
}

/* шапка модалки тоже “в тему” */
.md .mc-top{
  background: color-mix(in srgb, var(--p-bg) 78%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--p-brd) 65%, transparent);
}

// НАЧАЛО ПАТЧА: PREMIUM NO-EMPTY SPACE (ADAPTIVE PREVIEW + FISH BOX)

/* Превью накладной: НЕ держим min-height (он и создаёт пустоту).
   Вместо этого: компактно по контенту + ограничение по высоте + скролл внутри. */
#m-add #ship-doc-preview.doc,
#m-extra #extra-doc-preview.doc{
  min-height: 0 !important;     /* ключ: убрали “пустой рост” */
  height: auto !important;
  max-height: 46vh;             /* премиум-лимит: не съедает экран */
  overflow: auto;               /* если накладная большая — скролл внутри */
}

/* Контейнер строк рыбы: тоже без min-height, иначе будет “яма” при 1 строке */
#m-add #add-fish-box.fish-box,
#m-extra #extra-fish-box.fish-box{
  min-height: 0 !important;
  height: auto !important;
  max-height: 34vh;             /* чтобы низ модалки не уезжал */
  overflow: auto;
}

/* Чуть уменьшаем вертикальные разрывы между крупными секциями (если есть) */
#m-add .doc,
#m-extra .doc{
  margin-bottom: 12px !important;
}

// КОНЕЦ ПАТЧА: PREMIUM NO-EMPTY SPACE (ADAPTIVE PREVIEW + FISH BOX)
/* // НАЧАЛО ПАТЧА: THEME4 — MODAL BODY (MC) DENSITY + LUX BORDER */
body[data-theme="4"] #m-add .mc,
body[data-theme="4"] #m-extra .mc,
body[data-theme="4"] #m-debt .mc{
  background: rgba(7,8,10,0.92) !important;           /* плотный обсидиан */
  border: 1px solid rgba(255,211,106,0.18) !important; /* тонкое золото */
  box-shadow:
    0 26px 70px rgba(0,0,0,0.86),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

body[data-theme="4"] #m-add .modal-content,
body[data-theme="4"] #m-extra .modal-content,
body[data-theme="4"] #m-debt .modal-content{
  background: transparent !important; /* чтоб не было второй “серой пленки” */
}
/* // КОНЕЦ ПАТЧА: THEME4 — MODAL BODY (MC) DENSITY + LUX BORDER */
/* чтобы шапка была на месте, а контент катался */
#m-add .mc-top{
  position: sticky;
  top: 0;
  z-index: 20;
}
/* НАЧАЛО ПАТЧА: THEME4 — MODAL HEADER (MC-TOP) + CLOSE LUX */
body[data-theme="4"] #m-add .mc-top,
body[data-theme="4"] #m-extra .mc-top,
body[data-theme="4"] #m-debt .mc-top{
  background: rgba(7,8,10,0.92) !important;
  border-bottom: 1px solid rgba(255,211,106,0.16) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55) !important;
}

body[data-theme="4"] #m-add .mc-top h2,
body[data-theme="4"] #m-extra .mc-top h2,
body[data-theme="4"] #m-debt .mc-top h2{
  color: rgba(243,245,247,0.92) !important;
  text-shadow: 0 10px 26px rgba(0,0,0,0.60) !important;
}

/* Крестик: компактный и “дорогой” */
body[data-theme="4"] #m-add .mc-x,
body[data-theme="4"] #m-extra .mc-x,
body[data-theme="4"] #m-debt .mc-x{
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(255,211,106,0.18) !important;
  background: rgba(12,13,16,0.78) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.70) !important;
}

body[data-theme="4"] #m-add .mc-x:hover,
body[data-theme="4"] #m-extra .mc-x:hover,
body[data-theme="4"] #m-debt .mc-x:hover{
  border-color: rgba(255,211,106,0.28) !important;
}
/* КОНЕЦ ПАТЧА: THEME4 — MODAL HEADER (MC-TOP) + CLOSE LUX */
/* 3) “Данные” — ОКНО ПО ЦЕНТРУ (не bottom-sheet) + компактнее */
#m-data.md{
  /* если базовый стиль делал снизу — перебиваем */
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important; /* чтобы карточка не прилипала к краям */
}

/* сама карточка “Данные” */
#m-data .mc{
  width: min(520px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  max-height: calc(100svh - 28px);

  border-radius: 28px;   /* ← ВОТ ЭТО */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/* FIX: шапка в "Данные" — лёгкое скругление как у кнопок */
#m-data .mc-top{
  border-radius: 24px;              
  /* чуть-чуть, как у кнопок */
  margin: 10px 0px 0;              /* чтобы не прилипала к краям */
  padding: 14px 16px;               /* компактнее, но удобно */
  background: color-mix(in srgb, var(--p-bg) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--p-brd) 55%, transparent);
}
/* если внутри есть прокручиваемый контейнер — пусть крутится он */
#m-data .mc{
  display: flex;
  flex-direction: column;
}
#m-data .mc .mc-top{
  flex: 0 0 auto;
}
#m-data .mc .mc-body,
#m-data .mc .mc-content,
#m-data .mc .mc-main,
#m-data .mc .data-block{
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* чуть плотнее вертикальные отступы в “Данные” */
#m-data .data-block-title{
  margin-bottom: 8px;
}
#m-data .data-block .br{
  margin-top: 8px;
}

/* Кнопки “Данные” — компактнее, но во всю ширину */
#m-data .br,
#m-data button.br{
  min-height: 46px;        /* было крупнее — делаем ниже */
  padding: 12px 14px;      /* поуже */
  border-radius: 18px;     /* чуть компактнее, но всё ещё “премиум” */
  font-size: 14px;
  font-weight: 900;
}

/* 4) Видимый “клик” по кнопкам в модалках под тему */
.md .br,
.md button.br{
  transition: transform .08s ease, filter .08s ease, background .12s ease, border-color .12s ease;
}

.md .br:active,
.md button.br:active{
  transform: scale(.97);
  filter: brightness(1.08);
}

/* если есть активные/выбранные состояния (как на главной) — подсветка под тему */
.md .br.on,
.md .br.a,
.md .br.sel,
.md .rb.a{
  border-color: var(--p-brd);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--p-brd) 55%, transparent), var(--btn-sh);
}

/* ===== END PATCH ===== */
/* ===== PATCH: NO COPY/SHARE BUBBLE (disable text selection on UI) ===== */

/* Запрещаем выделение текста на всем UI */
body, .app, #app, .page, .wrap, .content, .list, .card, .br, .rb, .md, .mc {
  -webkit-user-select: none;
  user-select: none;

  /* убирает iOS/Android “callout” меню на длинном тапе */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Но в полях ввода всё должно выделяться (иначе неудобно) */
input, textarea, [contenteditable="true"]{
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* ===== END PATCH ===== */
/* ===== PATCH: custom category X (cix) small + on border ===== */

/* плитка категории — опора для абсолютного крестика */
#box-cats .ci{ position: relative; }

/* крестик кастомной категории */
#box-cats .ci .cix{
  position: absolute !important;

  /* на ободке */
  top: -8px !important;
  right: -8px !important;

  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;
  line-height: 1 !important;
  font-size: 12px !important;
  font-weight: 900 !important;

  border-radius: 999px !important;

  /* под тему */
  background: color-mix(in srgb, var(--p-bg) 82%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--p-brd) 70%, transparent) !important;
  box-shadow: var(--p-sh) !important;

  opacity: .85;
}

/* чтобы крестик был “аккуратный”, без огромных стилей браузера */
#box-cats .ci .cix{
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* лёгкая реакция */
#box-cats .ci .cix:active{
  transform: scale(.92);
  opacity: 1;
}

/* ===== END PATCH ===== */
/* ===== PATCH: CATEGORY TILES THEME BORDER (NO GLOW) ===== */

/* базовый ободок у всех плиток */
#box-cats .ci{
  border: 2px solid color-mix(in srgb, var(--p-brd) 92%, transparent) !important;
  box-shadow: none !important;   /* без подсветки */
}

/* выбранная категория — толстый ободок цветом темы */
#box-cats .ci.s{
  border-width: 3px !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ✅ Океан — чуть "плотнее" и аккуратная вторая линия */
body[data-theme="5"] #box-cats .ci.s{
  border-color: color-mix(in srgb, var(--accent) 72%, #ffffff 28%) !important;
  outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent) !important;
  outline-offset: 0 !important;
}

/* ✅ Неон — СИЛЬНЫЙ контраст (чтобы было видно “вообще всегда”) */
body[data-theme="6"] #box-cats .ci.s{
  /* делаем сам бордер ярче (акцент + белый) */
  border-width: 4px !important;
  border-color: color-mix(in srgb, var(--accent) 60%, #ffffff 40%) !important;

  /* внешняя линия темнее (акцент + чёрный) — даёт читаемость на неоне */
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, #000000 35%) !important;
  outline-offset: 0 !important;
}

/* лёгкий “тап” как на главной */
#box-cats .ci:active{
  transform: scale(.985);
  filter: brightness(1.06);
}

/* ===== END PATCH ===== */
/* мини-кнопка в шапке модалки (рядом с X) */
.md .mc-top .br.mini{
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

/* чтобы в шапке красиво встала справа */
.md .mc-top{
  display: flex;
  align-items: center;
  gap: 10px;
}
.md .mc-top .t{
  flex: 1 1 auto;
}
/* ================================
    START PATCH: IN-FIELD LABEL INSIDE
   ================================ */
.in-field{
  position: relative;
  width: 100%;
}

.in-field input{
  width: 100%;
  padding-top: 22px; /* место под внутренний заголовок */
}

.in-field-label{
  position: absolute;
  left: 16px;
  top: 8px;
  font-size: 13px;
  opacity: .75;
  pointer-events: none; /* чтобы не мешал клику по инпуту */
}

/* когда блок скрыт через .h — скрываем полностью */
.in-field.h{ display:none !important; }
/* ================================
    END PATCH: IN-FIELD LABEL INSIDE
   ================================ */
   /* НАЧАЛО ПАТЧА: IN-FIELD AS CARD (LABEL INSIDE BLOCK) */
/* Делаем обёртку .in-field самой "карточкой", чтобы лейбл не вылезал наружу */
.in-field{
  display: flex;
  flex-direction: column;
  gap: 8px;

  /* карточка как у остальных полей */
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  padding: 14px 16px;
}

/* лейбл внутри карточки */
.in-field .in-field-label{
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1.2;
  opacity: .75;
  pointer-events: none;
}

/* сам input делаем "внутренним", без собственного фона/бордера */
.in-field input[type="date"],
.in-field input[type="datetime-local"]{
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  color: inherit;
}

/* чтобы нативная стрелка не слипалась и выглядело ровно */
.in-field input[type="date"],
.in-field input[type="datetime-local"]{
  min-height: 32px;
}
/* КОНЕЦ ПАТЧА: IN-FIELD AS CARD (LABEL INSIDE BLOCK) */
/* НАЧАЛО ПАТЧА: GAP + COMPACT DATE FIELDS (DEBT MODAL) */

/* 1) Одинаковые отступы между блоками внутри debt-options */
#debt-options{
  display:flex;
  flex-direction:column;
  gap:14px;              /* ← одинаковое расстояние между всеми блоками */
}

/* 2) Убираем случайные внешние отступы у вложенных инпутов/селектов */
#debt-options select,
#debt-options input{
  margin:0 !important;
}
/* // START PATCH: HIDE DEBT-OPTIONS WHEN .h (КАТЕГОРИИ: ТОЛЬКО СУММА+КОММЕНТ) */
/* ВАЖНО: JS прячет #debt-options, добавляя класс .h.
   Но CSS с display:flex ломал это (контейнер оставался видимым).
   Этот патч возвращает правильное поведение: .h = скрыто. */

#m-add #debt-options.h{
  display:none !important;
}

/* На всякий случай: если не скрыто — показываем как задумано */
#m-add #debt-options:not(.h){
  display:flex;
}
/* // END PATCH: HIDE DEBT-OPTIONS WHEN .h (КАТЕГОРИИ: ТОЛЬКО СУММА+КОММЕНТ) */
/* 3 Даты: делаем компактно и красиво (лейбл внутри, как floating) */
#debt-options .in-field{
  position:relative;
  margin:0 !important;   /* gap уже управляет расстоянием */
}

#debt-options .in-field-label{
  position:absolute;
  left:16px;
  top:10px;
  font-size:13px;        /* ← лейбл меньше, не давит */
  opacity:.70;
  pointer-events:none;
  line-height:1;
}

#debt-options .in-field input{
  width:100%;
  padding:26px 16px 12px; /* ↑ место под лейбл, ↓ компактная высота */
  font-size:16px;
  line-height:1.2;
  box-sizing:border-box;
}

/* НА КОНЕЦ ПАТЧА: GAP + COMPACT DATE FIELDS (DEBT MODAL) */
/* НАЧАЛО ПАТЧА: FIX DATE LAYOUT + UNIFY CONTROLS (MODAL ADD) */

    /* 0) Ровные отступы между ВСЕМИ полями модалки */
#m-add #debt-options{
  display:flex;
  flex-direction:column;
  gap:14px;
}
#m-add #debt-options select,
#m-add #debt-options input{
  margin:0 !important;
  width:100%;
  box-sizing:border-box;
}

/* 1) Унифицируем ВНЕШНИЙ ВИД всех контролов (select + input) */
#m-add #debt-options select,
#m-add #debt-options input{
  font-size:16px;
  line-height:1.2;
  border-radius:22px;              /* как остальные поля */
}

/* 2) Датовые блоки: убираем конфликт стилей "как у селекта" + делаем ПОУЖЕ */
#m-add #debt-options .in-field{
  position:relative;
  margin:0 !important;
}

/* Лейбл внутри — фиксируем, чтобы НИКОГДА не уезжал */
#m-add #debt-options .in-field-label{
  position:absolute;
  left:16px;
  top:10px;
  font-size:13px;
  line-height:1;
  opacity:.70;
  pointer-events:none;
  transform:none !important;
}

/* Сам инпут даты делаем НИЖЕ по высоте и без "внутреннего блока" */
#m-add #debt-options .in-field input{
  height:58px;                     /* ПОУЖЕ */
  padding:26px 16px 10px;          /* место под лейбл + компактно */
  background-clip:padding-box;
}

/* Важно: отменяем возможные фон-стрелки/картинки, если они навешаны общими правилами */
#m-add #debt-options input[type="date"],
#m-add #debt-options input[type="datetime-local"]{
  background-image:none !important;
  -webkit-appearance:auto;         /* пусть браузер рисует нативный пикер корректно */
  appearance:auto;
}

/* 3) Чтобы "стрелка селекта" была стабильно на месте (и не влияла на высоту) */
#m-add #debt-options select{
  height:58px;                     /* одинаково с датами */
}

/* 4) Кнопки в модалке: одинаковый цвет/фон/шрифт */
#m-add .br{
  font-size:16px;
  font-weight:700;
}
#m-add .br.primary,
#m-add .br.ghost{
  background:var(--accent) !important;
  color:#071018 !important;
  border:0 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
#m-add .br.ghost{
  opacity:.92; /* чуть спокойнее, но тот же цвет */
}

/* НА КОНЕЦ ПАТЧА: FIX DATE LAYOUT + UNIFY CONTROLS (MODAL ADD) */
/* НАЧАЛО ПАТЧА: FISH/DEBT FIELDS — UNIFY STYLE + SMALL FONT (NO CATEGORIES) */

/* ТОЛЬКО блок с контрагентом/оплатой/датами внутри debt-options */
#debt-options select,
#debt-options input,
#debt-options .in-field-label,
#i-desc{
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px;
}

/* Сделать одинаковый “вид” у select и input внутри debt-options */
#debt-options select,
#debt-options input{
  width: 100%;
  box-sizing: border-box;
}

/* Даты: чтобы “не слипались” и были поуже/ровнее */
#debt-options .in-field{
  margin-top: 12px; /* одинаковый отступ между блоками */
}

#debt-options .in-field input{
  width: 100%;
  box-sizing: border-box;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Лейбл в датах — единый стиль */
#debt-options .in-field-label{
  font-size: 12px !important;
  font-weight: 600 !important;
  opacity: 0.75;
}

/* НА КОНЕЦ ПАТЧА: FISH/DEBT FIELDS — UNIFY STYLE + SMALL FONT (NO CATEGORIES) */
/* НАЧАЛО ПАТЧА: FISH/DEBT MODAL — COMPACT + SAME SIZE AS COMMENT (NO CATEGORIES) */

/* Единые размеры/отступы для “формы отгрузки/предоплаты” */
:root{
  --fpeFieldH: 66px;     /* высота всех полей (как “Комментарий”) */
  --fpeFieldGap: 12px;   /* одинаковый отступ между блоками */
  --fpeFieldRadius: 28px;
  --fpeFieldPadX: 18px;
  --fpeLabelTop: 12px;   /* положение label внутри */
  --fpeValueTop: 30px;   /* отступ текста/значения вниз, чтобы не налезало на label */
  --fpeBtnW: 86%;        /* кнопки уже */
  --fpeBtnMaxW: 520px;
}

/* Контейнер формы — чтобы всё было одинаковой ширины и “сжато” */
#debt-options,
#ship-date-wrap,
#due-date-wrap,
#i-amt,
#i-desc{
  width: 100%;
  box-sizing: border-box;
}

/* Одинаковый отступ между ВСЕМИ блоками формы */
#debt-options > select,
#debt-options > input,
#debt-options > .in-field,
#ship-date-wrap,
#due-date-wrap,
#i-amt,
#i-desc{
  margin-top: var(--fpeFieldGap) !important;
}

/* Одинаковая высота, радиусы, внутренние отступы у всех input/select в этом блоке */
#debt-options select,
#debt-options input,
#i-amt,
#i-desc{
  height: var(--fpeFieldH) !important;
  border-radius: var(--fpeFieldRadius) !important;
  padding: 0 var(--fpeFieldPadX) !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}

/* =============================================================
   НАЧАЛО ПАТЧА: FPE MODAL THEME (SCOPED ONLY TO #m-add)
   ЦЕЛЬ: 1) ничего не ломаем в категориях/экранах,
         2) модалка "Новая запись" выглядит как тема главного,
         3) размеры компактные, одной цифрой регулируются.
   ============================================================= */
:root{
  /* === ОДНА РУЧКА РАЗМЕРА (меняешь её — всё ужимается/растёт) === */
  --fpeK: .90; /* 0.80 = мельче, 1.00 = крупнее */

  --fpeModalMaxW: 560px;
  --fpeModalPadX: calc(18px * var(--fpeK));

  --fpeGap: calc(12px * var(--fpeK));
  --fpeCtlH: calc(60px * var(--fpeK));
  --fpeCtlRad: calc(20px * var(--fpeK));
  --fpeCtlPadX: calc(16px * var(--fpeK));
  --fpeFont: calc(15px * var(--fpeK));

  --fpeBtnW: 88%;
  --fpeBtnH: calc(58px * var(--fpeK));

  /* Даты внутри контейнера */
  --fpeDateLabelTop: calc(12px * var(--fpeK));
  --fpeDateLabelSize: calc(13px * var(--fpeK));
  --fpeDateInputH: calc(34px * var(--fpeK));
  --fpeDateInputBottom: calc(10px * var(--fpeK));
}

/* === 1) ВАЖНО: ВСЕ ПОЛЯ ТОЛЬКО ВНУТРИ #m-add (категории не трогаем!) === */
#m-add select,
#m-add input,
#m-add textarea{
  background: var(--card-bg) !important;       /* берём из темы */
  border: 1px solid var(--card-brd) !important;
  box-shadow: var(--card-sh) !important;
  color: inherit !important;

  height: var(--fpeCtlH) !important;
  border-radius: var(--fpeCtlRad) !important;  /* закруглённый прямоугольник */
  padding: 0 var(--fpeCtlPadX) !important;

  font-size: var(--fpeFont) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;

  margin: 0 !important;
  box-sizing: border-box !important;
  outline: none !important;
}

/* === 2) РАССТОЯНИЯ: единый gap в блоке debt-options === */
#m-add #debt-options{
  display: grid !important;
  gap: var(--fpeGap) !important;
}

/* Всё, что ниже debt-options (сумма/коммент/даты) — тоже ровный шаг */
#m-add #i-amt,
#m-add #i-desc,
#m-add #ship-date-wrap,
#m-add #due-date-wrap{
  margin-top: var(--fpeGap) !important;
}

/* === 3) ДАТЫ в обёртках .in-field: контейнер как у остальных, инпут внутри === */
/* === 3) ДАТЫ — ULTRA PREMIUM FIX === */
#m-add .in-field#ship-date-wrap,
#m-add .in-field#due-date-wrap{
  position: relative !important;
  height: 72px !important;
  border-radius: var(--fpeCtlRad) !important;

  background: linear-gradient(
    180deg,
    rgba(20,22,26,0.96) 0%,
    rgba(12,14,18,0.96) 100%
  ) !important;

  border: 1px solid rgba(255,211,106,0.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 14px 30px rgba(0,0,0,0.65) !important;

  overflow: hidden !important;
}

/* Заголовок "Дата..." */
#m-add .in-field#ship-date-wrap .in-field-label,
#m-add .in-field#due-date-wrap .in-field-label{
  position: absolute !important;
  top: 12px !important;
  left: 18px !important;

  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(243,245,247,0.55) !important;
  letter-spacing: .3px !important;
}

/* Само значение даты */
#m-add .in-field#ship-date-wrap input,
#m-add .in-field#due-date-wrap input{
  position: absolute !important;
  left: 18px !important;
  right: 38px !important;
  bottom: 14px !important;

  height: auto !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  color: rgba(243,245,247,0.92) !important;
  letter-spacing: .2px !important;
}

/* Тонкая стрелка */
#m-add .in-field#ship-date-wrap::after,
#m-add .in-field#due-date-wrap::after{
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-35%);
  font-size: 14px;
  color: rgba(243,245,247,0.45);
  pointer-events: none;
}

/* Надпись “Дата …” */
#m-add .in-field#ship-date-wrap .in-field-label,
#m-add .in-field#due-date-wrap .in-field-label{
  position: absolute !important;
  left: var(--fpeCtlPadX) !important;
  top: var(--fpeDateLabelTop) !important;
  right: 56px !important;
  font-size: var(--fpeDateLabelSize) !important;
  opacity: .78 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Инпут даты внутри */
#m-add .in-field#ship-date-wrap > input,
#m-add .in-field#due-date-wrap > input{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--fpeDateInputBottom) !important;
  height: var(--fpeDateInputH) !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  padding: 0 56px 0 var(--fpeCtlPadX) !important;
  font-size: var(--fpeFont) !important;
  font-weight: 800 !important;
  line-height: var(--fpeDateInputH) !important;
  color: inherit !important;
}

/* Индикатор календаря — не прячем */
#m-add .in-field#ship-date-wrap input::-webkit-calendar-picker-indicator,
#m-add .in-field#due-date-wrap input::-webkit-calendar-picker-indicator{
  opacity: .9 !important;
}

/* === 4) КНОПКИ: компактнее и ровно === */
#m-add .br.primary,
#m-add .br.ghost{
  width: var(--fpeBtnW) !important;
  height: var(--fpeBtnH) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  border-radius: calc(20px * var(--fpeK)) !important;
}

/* =============================================================
   КОНЕЦ ПАТЧА: FPE MODAL THEME (SCOPED ONLY TO #m-add)
   ============================================================= */
/* // END PATCH: DUE DATE VALUE LOWER (ONLY #due-date-wrap) */
/* // START PATCH: DATE FIELD UNIFY (DUE/SHIP) */

/* ЕДИНЫЕ ПАРАМЕТРЫ ДЛЯ ОБЕИХ ДАТ */
:root{
  --dateWrapH: 64px;         /* высота всего блока */
  --dateRadius: 26px;

  --dateLabelTop: 10px;      /* положение заголовка */
  --dateLabelSize: 12px;     /* размер заголовка */

  --dateInputH: 36px;        /* высота кликабельной зоны даты */
  --dateInputBottom: 6px;    /* ниже = ближе к низу (опускает дату) */

  --datePadL: 18px;
  --datePadR: 52px;          /* место под иконку справа */

  --dateValueSize: 16px;     /* размер выбранной даты */
  --dateValueWeight: 600;
}

/* КОНТЕЙНЕРЫ */
#ship-date-wrap,
#due-date-wrap{
  position: relative !important;
  width: 100% !important;
  height: var(--dateWrapH) !important;
  border-radius: var(--dateRadius) !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.04) !important;
}

/* ЛЕЙБЛЫ (ОДИНАКОВЫЕ) */
#ship-date-wrap .in-field-label,
#due-date-wrap .in-field-label{
  position: absolute !important;
  top: var(--dateLabelTop) !important;
  left: var(--datePadL) !important;
  right: var(--datePadR) !important;
  z-index: 2 !important;

  font-size: var(--dateLabelSize) !important;
  font-weight: 600 !important;
  line-height: 1 !important;

  color: rgba(255,255,255,0.72) !important;
  pointer-events: none !important;
}

/* БАЗОВЫЙ INPUT (ОДИНАКОВЫЙ ШРИФТ/РАЗМЕР) */
#ship-date-wrap > input,
#due-date-wrap > input{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--dateInputBottom) !important;
  height: var(--dateInputH) !important;
  width: 100% !important;

  border: none !important;
  outline: none !important;
  background: transparent !important;

  padding: 0 var(--datePadR) 0 var(--datePadL) !important;
  font-size: var(--dateValueSize) !important;
  font-weight: var(--dateValueWeight) !important;
  color: rgba(255,255,255,0.92) !important;

  -webkit-appearance: none !important;
  appearance: none !important;
}

/* ВАЖНО: input[type="date"] на Андроиде часто “сидит выше”.
   Чуть добавляем верхний внутренний отступ ТОЛЬКО для даты оплаты,
   чтобы значение визуально опустилось как у datetime-local. */
#due-date-wrap > input{
  padding-top: 6px !important;
  padding-bottom: 0 !important;
}

/* ИКОНКА КАЛЕНДАРЯ */
#ship-date-wrap input::-webkit-calendar-picker-indicator,
#due-date-wrap input::-webkit-calendar-picker-indicator{
  opacity: 0.85 !important;
}

/* // END PATCH: DATE FIELD UNIFY (DUE/SHIP) */

/* =========================================================
   PREMIUM POLISH PACK v2 (VISIBLE) — appended override
   Inserted at end of file to be максимально заметно.
   ========================================================= */

/* 1) Сразу видно: стекло на фоне модалок */
.md{
  background: rgba(0,0,0,0.62) !important;
  backdrop-filter: blur(12px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
}

/* 2) Карточка модалки чуть «дороже» */
.mc{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

/* 3) Единая «премиум» механика клика + фокуса */
.br, .mb, .rb, .nb, .mini{
  transition: transform 220ms cubic-bezier(.2,.8,.2,1),
              filter 220ms cubic-bezier(.2,.8,.2,1),
              box-shadow 220ms cubic-bezier(.2,.8,.2,1),
              background 220ms cubic-bezier(.2,.8,.2,1),
              border-color 220ms cubic-bezier(.2,.8,.2,1) !important;
  will-change: transform;
}

.br:active, .mb:active, .rb:active, .nb:active, .mini:active{
  transform: translateY(1px) scale(0.985) !important;
  filter: brightness(1.04) saturate(1.05) !important;
}

.br:focus-visible, .mb:focus-visible, .rb:focus-visible, .nb:focus-visible, .mini:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.18),
    0 0 0 4px rgba(0,210,255,0.28),
    0 18px 46px rgba(0,0,0,0.65) !important;
}

/* 4) Поля ввода: премиум-материал (чтобы сразу видно) */
input, select, textarea{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 18px 40px rgba(0,0,0,0.55) !important;
}

input::placeholder, textarea::placeholder{
  color: rgba(242,245,247,0.55) !important;
}

/* 5) Блоки summary (ПРИХОД/РАСХОД и ДОЛГИ) — сделать «дороже» */
.sr{
  gap: 12px !important;
}

.sb{
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* НАЧАЛО ПАТЧА: NAV NV SOLID (THEME 4 SAFE) */
body[data-theme="4"] .nv{
  background: #0B0D11 !important;            /* плотный обсидиан */
  opacity: 1 !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  border-top: 1px solid rgba(255,211,106,0.08) !important;

  box-shadow:
    0 -18px 60px rgba(0,0,0,0.95),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
/* КОНЕЦ ПАТЧА: NAV NV SOLID (THEME 4 SAFE) */

/* 7) Слегка подтянуть общий рендер (чёткость) */
html{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* =========================================================
   // START PATCH: MODAL UNIFORM HEIGHT + GAP (SAFE)
   Цель:
   1) Одинаковый gap между всеми полями
   2) Уменьшить высоту контейнеров
   3) Применить к Отгрузке (#m-add) и Добору (#m-extra)
   НИЧЕГО не ломаем в логике и темах
   ========================================================= */

/* ==== РУЧКИ НАСТРОЙКИ (МЕНЯТЬ ТОЛЬКО ЭТИ ЦИФРЫ) ==== */
#m-add,
#m-extra{
  --fpe-gap: 10px;          /* расстояние между полями */
  --fpe-field-h: 52px;      /* высота всех обычных полей */
  --fpe-radius: 14px;       /* скругление (прямоугольник) */
  --fpe-pad-x: 16px;        /* боковой отступ текста */
}

/* ==== ЕДИНЫЙ ВЕРТИКАЛЬНЫЙ РИТМ ==== */
#m-add .modal-content > *,
#m-extra .modal-content > *{
  margin-bottom: var(--fpe-gap) !important;
}

/* ==== ВСЕ ОБЫЧНЫЕ ПОЛЯ (input, select, textarea) ==== */
#m-add .modal-content select,
#m-add .modal-content input:not(.in-field input),
#m-add .modal-content textarea,
#m-extra .modal-content select,
#m-extra .modal-content input:not(.in-field input),
#m-extra .modal-content textarea{
  height: var(--fpe-field-h) !important;
  border-radius: var(--fpe-radius) !important;
  padding: 0 var(--fpe-pad-x) !important;
  box-sizing: border-box !important;
}
/* // НАЧАЛО ПАТЧА: THEME4 — MODAL FIELDS LUX (INPUT/SELECT/TEXTAREA) */
body[data-theme="4"] #m-add .modal-content input,
body[data-theme="4"] #m-add .modal-content select,
body[data-theme="4"] #m-add .modal-content textarea,
body[data-theme="4"] #m-extra .modal-content input,
body[data-theme="4"] #m-extra .modal-content select,
body[data-theme="4"] #m-extra .modal-content textarea,
body[data-theme="4"] #m-debt .modal-content input,
body[data-theme="4"] #m-debt .modal-content select,
body[data-theme="4"] #m-debt .modal-content textarea{
  background: rgba(12,13,16,0.88) !important;
  color: rgba(243,245,247,0.92) !important;
  border: 1px solid rgba(255,211,106,0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 14px 34px rgba(0,0,0,0.55) !important;
}

/* Плейсхолдеры — читаемые, но не “кричат” */
body[data-theme="4"] #m-add .modal-content input::placeholder,
body[data-theme="4"] #m-add .modal-content textarea::placeholder,
body[data-theme="4"] #m-extra .modal-content input::placeholder,
body[data-theme="4"] #m-extra .modal-content textarea::placeholder,
body[data-theme="4"] #m-debt .modal-content input::placeholder,
body[data-theme="4"] #m-debt .modal-content textarea::placeholder{
  color: rgba(243,245,247,0.46) !important;
}

/* Фокус — тонкий золотой */
body[data-theme="4"] #m-add .modal-content input:focus,
body[data-theme="4"] #m-add .modal-content select:focus,
body[data-theme="4"] #m-add .modal-content textarea:focus,
body[data-theme="4"] #m-extra .modal-content input:focus,
body[data-theme="4"] #m-extra .modal-content select:focus,
body[data-theme="4"] #m-extra .modal-content textarea:focus,
body[data-theme="4"] #m-debt .modal-content input:focus,
body[data-theme="4"] #m-debt .modal-content select:focus,
body[data-theme="4"] #m-debt .modal-content textarea:focus{
  border-color: rgba(255,211,106,0.34) !important;
  outline: none !important;
  box-shadow:
    0 0 0 2px rgba(255,211,106,0.10),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 16px 40px rgba(0,0,0,0.62) !important;
}
/* // КОНЕЦ ПАТЧА: THEME4 — MODAL FIELDS LUX (INPUT/SELECT/TEXTAREA) */

/* ==== КОНТЕЙНЕРЫ ДАТ (.in-field) ==== */
#m-add .in-field,
#m-extra .in-field{
  height: var(--fpe-field-h) !important;
  border-radius: var(--fpe-radius) !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 6px var(--fpe-pad-x) !important;
}

/* Инпут внутри даты */
#m-add .in-field input,
#m-extra .in-field input{
  font-size: inherit;
  height:auto !important;
  line-height:1.2;
}

/* Убираем лишний нижний margin у последнего элемента */
#m-add .modal-content > *:last-child,
#m-extra .modal-content > *:last-child{
  margin-bottom:0 !important;
}

/* =========================================================
   // END PATCH: MODAL UNIFORM HEIGHT + GAP (SAFE)
   ========================================================= */

/* =========================================================
   ULTRA MODAL PACK (CONSOLIDATED)
   Содержит:
   1) MODAL THEME CONSISTENCY (поверхности/поля/карточки по теме)
   2) PAPER DOC PREVIEW (накладная всегда светлая "бумага")
   3) FISH ROW LOOK (строка рыбы чуть больше + ярче ободок)
   4) RED DELETE X (крестик красный, меньше, овальный квадрат)
   СКОУП: ТОЛЬКО ВНУТРИ МОДАЛОК (.md ...) — категории/главная не трогаются
   ========================================================= */

/* 1) Токены поверхностей (fallback) */
:root{
  --modal-backdrop: rgba(0,0,0,0.78);
  --modal-surface: var(--card);
  --modal-stroke: var(--stroke);
  --modal-shadow: var(--shadow), var(--shadow2);

  --surface-1: var(--card);
  --surface-1-stroke: var(--stroke);
  --surface-1-shadow: var(--shadow);

  --field-surface: var(--card);
  --field-stroke: rgba(255,255,255,0.14);
  --field-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

/* 2) Backdrop модалки */
.md{
  background: var(--modal-backdrop) !important;
}

/* 3) Карточка модалки */
.md .mc{
  background: var(--modal-surface, var(--card)) !important;
  border: 1px solid var(--modal-stroke, var(--stroke)) !important;
  box-shadow: var(--modal-shadow, var(--shadow), var(--shadow2)) !important;
}

/* 4) Внутренние карточки внутри модалок */
.md .analytics,
.md .data-block,
.md .in,
.md .sb,
.md .card,
.md .panel,
.md .box{
  background: var(--surface-1, var(--card)) !important;
  border: 1px solid var(--surface-1-stroke, var(--stroke)) !important;
  box-shadow: var(--surface-1-shadow, var(--shadow)) !important;
}

/* 5) Поля ввода внутри модалок */
.md input,
.md select,
.md textarea{
  background: var(--field-surface, var(--card)) !important;
  border: 1px solid var(--field-stroke, rgba(255,255,255,0.14)) !important;
  box-shadow: var(--field-shadow, inset 0 1px 0 rgba(255,255,255,0.10)) !important;
  color: var(--text) !important;
}
.md input::placeholder,
.md textarea::placeholder{
  color: color-mix(in srgb, var(--text) 55%, transparent) !important;
}

/* =========================================================
   PAPER DOC PREVIEW (накладная всегда "бумага")
   ========================================================= */
.md .doc,
.md #ship-doc-preview.doc,
.md #extra-doc-preview.doc{
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  color: #111 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10) !important;
}
body[data-theme="2"] .md .doc,
body[data-theme="3"] .md .doc{
  background: rgba(240,240,240,0.92) !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
}
.md .doc table{ color:#111 !important; }
.md .doc th{ color:#111 !important; opacity:0.72 !important; }
.md .doc td{ color:#111 !important; }

/* =========================================================
   FISH ROW LOOK (строка рыбы/расходов в модалках)
   ========================================================= */
.md .fish-row{
  background: var(--surface-1, var(--card)) !important;
  border: 1px solid var(--surface-1-stroke, var(--stroke)) !important;
  box-shadow: var(--surface-1-shadow, var(--shadow)) !important;

  padding: 14px 14px !important;
  border-radius: 26px !important;
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 18px 44px rgba(0,0,0,0.62),
    0 0 0 1px rgba(255,255,255,0.14) !important;
}
.md .fish-row input,
.md .fish-row select{
  min-height: 52px !important;
  border-radius: 18px !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* =========================================================
   RED DELETE X (✕) — принудительно красный и меньше
   ========================================================= */
.md .fish-row .del-fish{
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;

  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255,70,70,0.95), rgba(175,12,12,0.95)) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 12px 26px rgba(0,0,0,0.55) !important;

  color: #fff !important;
  font-size: 22px !important;
  line-height: 1 !important;
}
.md .fish-row button.mini.danger,
.md .ship-exp-line.fish-row button.mini,
.md .fish-row.ship-exp-row button.mini{
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255,70,70,0.92), rgba(185,18,18,0.92)) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 10px 22px rgba(0,0,0,0.52) !important;
  color: #fff !important;
}
.md .fish-row .del-fish:active,
.md .fish-row button.mini.danger:active,
.md .ship-exp-line.fish-row button.mini:active,
.md .fish-row.ship-exp-row button.mini:active{
  transform: translateY(1px) scale(0.98) !important;
  filter: brightness(1.05) saturate(1.1) !important;
}

/* =========================================================
   END ULTRA MODAL PACK (CONSOLIDATED)
   ========================================================= */

/* =========================================================
   PATCH v3 (FINAL): LIGHTER BLUR + SMALLER PREMIUM RED ✕
   СКОУП: ТОЛЬКО МОДАЛКИ (.md ...). Категории не трогаем.
   ========================================================= */

/* 1) Блюр легче: меньше blur и saturate (меньше нагрузка на Android) */
.md{
  backdrop-filter: blur(8px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(115%) !important;
}

/* На устройствах/режимах с пониженной анимацией — блюр отключаем полностью */
@media (prefers-reduced-motion: reduce){
  .md{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0,0,0,0.82) !important; /* сохраняем премиум затемнение */
  }
}

/* 2) Крестик (удаление) — меньше, аккуратнее, красный “овальный квадрат” */
.md .fish-row .del-fish{
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;

  border-radius: 13px !important; /* квадратненький, но мягкий */
  background: linear-gradient(180deg, rgba(255,84,84,0.96), rgba(168,10,10,0.96)) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 10px 18px rgba(0,0,0,0.48) !important;

  color: #fff !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Чуть тише при наведении (если есть hover) */
@media (hover:hover){
  .md .fish-row .del-fish:hover{
    filter: brightness(1.05) saturate(1.05) !important;
  }
}

.md .fish-row .del-fish:active{
  transform: translateY(1px) scale(0.985) !important;
  filter: brightness(1.06) saturate(1.08) !important;
}

/* 3) Удаление в расходах по отгрузке — в том же стиле и размере */
.md .fish-row button.mini.danger,
.md .ship-exp-line.fish-row button.mini,
.md .fish-row.ship-exp-row button.mini{
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255,84,84,0.94), rgba(175,12,12,0.94)) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 9px 16px rgba(0,0,0,0.45) !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.md .fish-row button.mini.danger:active,
.md .ship-exp-line.fish-row button.mini:active,
.md .fish-row.ship-exp-row button.mini:active{
  transform: translateY(1px) scale(0.985) !important;
  filter: brightness(1.06) saturate(1.08) !important;
}

/* =========================================================
   END PATCH v3
   ========================================================= */

/* =========================================================
   // НАЧАЛО ПАТЧА: PREMIUM UX PACK (4 + 7 + 10) — SAFE OVERRIDES
   Цель: добавить динамические тени (Stripe-like), интерактивные состояния (Linear-like),
         и систему отступов (4px grid) БЕЗ поломки текущего UI.
   ВАЖНО: Патч сделан как override в конце файла — можно легко откатить одним блоком.
   ========================================================= */

/* (10) SPACING SYSTEM — 4px grid (только токены, без форс-применения) */
:root{
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
}

/* (4) SHADOW TOKENS — динамика (fallback на существующие) */
:root{
  --shadow-xs: 0 2px 4px rgba(0,0,0,0.10);
  --shadow-sm: 0 6px 14px rgba(0,0,0,0.18);
  --shadow-md: 0 12px 26px rgba(0,0,0,0.26);
  --shadow-lg: 0 18px 44px rgba(0,0,0,0.34);
  --shadow-xl: 0 26px 60px rgba(0,0,0,0.42);
}

/* (7) FOCUS VISIBLE — аккуратный ring без “кислоты” */
*:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--ring) 55%, transparent),
    0 0 0 5px color-mix(in srgb, var(--aura) 55%, transparent),
    0 18px 46px rgba(0,0,0,0.55) !important;
  border-radius: 14px;
}

/* (7) DISABLED */
.br:disabled,
button:disabled{
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.15);
  transform: none !important;
}

/* (7) LOADING (по желанию: добавишь класс .loading на кнопку) */
.br.loading{
  position: relative;
  color: transparent !important;
}
.br.loading::after{
  content:"";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.28);
  border-top-color: rgba(255,255,255,0.92);
  animation: fpe-spin 650ms linear infinite;
}
@keyframes fpe-spin{ to{ transform: rotate(360deg); } }

/* (4) DYNAMIC SHADOWS — hover только на устройствах с hover, active уже есть */
@media (hover:hover){
  .cd:hover,
  .it:hover,
  .sb:hover,
  .ci:hover{
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.10) !important;
    transform: translateY(-2px);
  }

  .br:hover,
  .mb:hover,
  .rb:hover,
  .nb:hover b,
  .mini:hover{
    box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.12) !important;
    transform: translateY(-2px);
  }
}

/* На тап-устройствах держим “дорогой” press без дерганий */
.cd:active,
.it:active,
.sb:active,
.ci:active{
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* (10) SAFE SPACING USE — только в местах, где визуально НЕ меняется (эквивалент текущих значений) */
.c{ padding: var(--space-4) !important; }                 /* было 16px */
.sr{ gap: var(--space-2) !important; }                    /* было 10px → близко, без поломки */
.tgl{ gap: var(--space-2) !important; }                   /* было 10px */
.cg{ gap: var(--space-2) !important; }                    /* было 10px */
.btn-row{ gap: var(--space-2) !important; }               /* было 10px */
.range-row{ gap: var(--space-2) !important; }             /* было 10px */

/* (7) REDUCED MOTION — уважение системной настройки */
@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   // КОНЕЦ ПАТЧА: PREMIUM UX PACK (4 + 7 + 10)
   ========================================================= */
   /* =========================================================
   // НАЧАЛО ПАТЧА: MODAL FIELDS + MODAL CARDS TUNING (THEME SAFE)
   Задача: управлять "толщиной" мини-окошек в модалках (поля/селекты),
           отступами, высотой, шрифтами и карточками внутри модалок.
   Принцип: меняем ТОЛЬКО внутри .mc (контент модалки), тема не ломается.
   ========================================================= */

/* 1) ТЮНИНГ-РУЧКИ (меняешь ТУТ цифры — и всё внутри модалок меняется) */
:root{
  /* Модалка: общий внутренний воздух */
  --modal-pad: 16px;          /* padding у .mc */
  --modal-gap: 10px;          /* gap между строками/элементами, где есть flex/grid */

  /* Поля/селекты в модалках (это твои "штуки", "руб/кг", "выбрать") */
  --modal-field-pad-y: 12px;  /* вертикальный padding (уменьши до 10px = ещё тоньше) */
  --modal-field-pad-x: 12px;  /* горизонтальный padding */
  --modal-field-radius: 18px; /* скругление полей в модалках */
  --modal-field-font: 14px;   /* шрифт внутри полей */
  --modal-field-weight: 800;  /* жирность внутри полей */
  --modal-field-minh: 44px;   /* минимальная высота поля (удобно для пальца) */

  /* Внутренние "карточки/строки" внутри модалки (если есть списки/итемы) */
  --modal-item-radius: 22px;
  --modal-item-pad: 12px;     /* было визуально "толще" — тут можно 10–12 */
}

/* 2) MODAL CONTAINER: отступы и консистентность */
.mc{
  padding: var(--modal-pad) !important;
}

/* 3) ВСЕ ПОЛЯ ВНУТРИ МОДАЛОК — компактнее и премиум (тема сохраняется через var(--card), var(--stroke)) */
.mc input,
.mc select,
.mc textarea{
  padding: var(--modal-field-pad-y) var(--modal-field-pad-x) !important;
  border-radius: var(--modal-field-radius) !important;

  font-size: var(--modal-field-font) !important;
  font-weight: var(--modal-field-weight) !important;

  min-height: var(--modal-field-minh) !important;

  /* важное: оставляем тему */
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  color: var(--text) !important;

  /* мягкая внутренняя “дорогая” кромка */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* 4) Плейсхолдеры — спокойные, читаемые */
.mc input::placeholder,
.mc textarea::placeholder{
  color: var(--muted) !important;
  opacity: 0.9;
}

/* 5) ФОКУС в модалках — красивый и по теме */
.mc input:focus,
.mc select:focus,
.mc textarea:focus{
  outline: none !important;
  border-color: color-mix(in srgb, var(--ring) 70%, transparent) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--ring) 55%, transparent),
    0 0 0 6px color-mix(in srgb, var(--aura) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* 6) Внутренние “карточки/строки” в модалках (если внутри модалки рендерятся .it / .cd / .ci) */
.mc .it,
.mc .cd,
.mc .ci{
  border-radius: var(--modal-item-radius) !important;
}

/* .it — элементы списка в модалках (делаем их чуть компактнее) */
.mc .it{
  padding: var(--modal-item-pad) !important;
}

/* 7) Отступы между рядами внутри модалки (где используются gap) */
.mc .row,
.mc .btn-row,
.mc .range-row,
.mc .sr,
.mc .tgl,
.mc .cg{
  gap: var(--modal-gap) !important;
}

/* 8) На всякий: кнопки в модалках не распухают */
.mc .br{
  min-height: 44px;
}

/* =========================================================
   // КОНЕЦ ПАТЧА: MODAL FIELDS + MODAL CARDS TUNING (THEME SAFE)
   ========================================================= */
   /* =========================================================
   // НАЧАЛО ПАТЧА: MODAL PRIORITY BOOST (ANTI-OVERRIDE)
   ========================================================= */

/* Делает правила для полей в модалках максимально приоритетными */
body .md .mc input,
body .md .mc select,
body .md .mc textarea,
body .mc input,
body .mc select,
body .mc textarea{
  padding: var(--modal-field-pad-y) var(--modal-field-pad-x) !important;
  border-radius: var(--modal-field-radius) !important;

  font-size: var(--modal-field-font) !important;
  font-weight: var(--modal-field-weight) !important;

  min-height: var(--modal-field-minh) !important;

  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* =========================================================
   // КОНЕЦ ПАТЧА: MODAL PRIORITY BOOST (ANTI-OVERRIDE)
   ========================================================= */
   /* =========================================================
/* =========================================================
   // НАЧАЛО ПАТЧА: FISH MODAL MINI-FIELDS TUNING (LOCKED VARS)
   ВАЖНО: переменные задаём на body (а не :root), чтобы темы/другие :root их не перебивали.
   ========================================================= */

/* РУЧКИ: меняй цифры ТУТ — и в модалке сразу видно */
body{
  --fish-mini-pad-y: 10px;      /* 8px = ещё тоньше */
  --fish-mini-pad-x: 6px;
  --fish-mini-font: 14px;       /* 13–14 идеально */
  --fish-mini-weight: 900;
  --fish-mini-radius: 16px;
  --fish-mini-minh: 40px;       /* ниже 40 не советую */

  --fish-x-size: 30px;          /* крестик */
  --fish-x-radius: 10px;
  --fish-x-font: 20px;
}

/* Применяем ТОЛЬКО внутри модалок */
.md .mc #fish-logic .f-prc,
.md .mc #fish-logic .f-type,
.md .mc #fish-logic .f-w,
.md .mc #fish-logic .f-cnt,
.md .mc #extra-fish-logic .f-prc,
.md .mc #extra-fish-logic .f-type,
.md .mc #extra-fish-logic .f-w,
.md .mc #extra-fish-logic .f-cnt{
  padding: var(--fish-mini-pad-y) var(--fish-mini-pad-x) !important;
  font-size: var(--fish-mini-font) !important;
  font-weight: var(--fish-mini-weight) !important;
  border-radius: var(--fish-mini-radius) !important;
  min-height: var(--fish-mini-minh) !important;

  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Кнопка “крестик” */
.md .mc #fish-logic .del-fish,
.md .mc #extra-fish-logic .del-fish{
  width: var(--fish-x-size) !important;
  height: var(--fish-x-size) !important;
  min-width: var(--fish-x-size) !important;
  border-radius: var(--fish-x-radius) !important;
  font-size: var(--fish-x-font) !important;
}

/* Компактнее расстояния внутри рыбной строки */
.md .mc #fish-logic .fish-row,
.md .mc #extra-fish-logic .fish-row{
  gap: 6px !important;
}
.md .mc #fish-logic .fish-left,
.md .mc #extra-fish-logic .fish-left{
  gap: 8px !important;
}

/* =========================================================
   // КОНЕЦ ПАТЧА: FISH MODAL MINI-FIELDS TUNING (LOCKED VARS)
   ========================================================= */
/* =========================================================
   // НАЧАЛО ПАТЧА: OBSIDIAN THEME 4 — LUX OVERRIDE (EOF)
   Делается ТОЛЬКО в конце style.css. Не трогаем исходные темы.
   ========================================================= */

body[data-theme="4"]{
  --bg:#07080A !important;                 /* обсидиан */
  --card:rgba(17,19,23,0.94) !important;   /* дорогой графит */

  --text:#F3F5F7 !important;
  --muted:rgba(243,245,247,0.56) !important;

  --accent:#FFD36A !important;
  --accent2:#C79A3A !important;

  --stroke:rgba(255,211,106,0.16) !important;

  --shadow:18px 18px 44px rgba(0,0,0,0.84) !important;
  --shadow2:-18px -18px 44px rgba(255,255,255,0.02) !important;

  --p-bg:rgba(17,19,23,0.95) !important;
  --p-brd:rgba(255,211,106,0.14) !important;
  --p-in:rgba(255,255,255,0.06) !important;
  --p-sh:0 24px 60px rgba(0,0,0,0.86) !important;

  --ring:rgba(255,211,106,0.14) !important;
  --aura:rgba(255,211,106,0.05) !important;

  --nav-bg:rgba(7,8,10,0.97) !important;
  --nav-sh:0 34px 86px rgba(0,0,0,0.88) !important;
}

/* принудительный фон, чтобы обсидиан точно применялся */
html body[data-theme="4"]{
  background: var(--bg) !important;
  background-attachment: fixed !important;
}

/* фон-подложка — чистая, без “пыли” */
body[data-theme="4"]::before{
  content:"" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:
    radial-gradient(1200px 720px at 18% 10%, rgba(255,211,106,0.10), rgba(0,0,0,0) 62%),
    radial-gradient(980px 620px at 82% 16%, rgba(255,211,106,0.08), rgba(0,0,0,0) 64%),
    radial-gradient(900px 650px at 50% 92%, rgba(255,211,106,0.06), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, #07080A 0%, #050506 100%) !important;
}
/* НАЧАЛО ПАТЧА: THEME 4 — FIX GOAL + SEARCH (LUX, NO MUD) */

/* Блок "Цель" — чище и контрастнее */
body[data-theme="4"] .goal,
body[data-theme="4"] .goal-mini{
  background: rgba(10,12,15,0.78) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.86) !important;
}

body[data-theme="4"] .goal .muted,
body[data-theme="4"] .goal-mini .muted{
  color: rgba(255,255,255,0.62) !important;
}

/* ВАЖНО: у тебя визуал "поиска" делает контейнер, а не только input */
body[data-theme="4"] .search-box{
  background: rgba(10,12,15,0.72) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.62) !important;
}

/* input делаем прозрачным, чтобы не было двойной мутной подложки */
body[data-theme="4"] .search-box input,
body[data-theme="4"] #search-input{
  background: transparent !important;
  color: rgba(255,255,255,0.86) !important;
}

body[data-theme="4"] #search-input::placeholder{
  color: rgba(255,255,255,0.55) !important;
  opacity: 1 !important;
}

/* фокус — тонкий золотой, без “грязного” серо-золота */
body[data-theme="4"] #search-input:focus{
  outline: none !important;
  border-color: rgba(255,211,106,0.22) !important;
  box-shadow:
    0 0 0 1px rgba(255,211,106,0.18),
    0 0 0 4px rgba(255,211,106,0.10) !important;
}

/* КОНЕЦ ПАТЧА: THEME 4 — FIX GOAL + SEARCH (LUX, NO MUD) */
/* =========================================================
   // КОНЕЦ ПАТЧА: OBSIDIAN THEME 4 — LUX OVERRIDE (EOF)
   ========================================================= */
   /* =========================================================
   // НАЧАЛО ПАТЧА: THEME 4 — LUX TYPOGRAPHY (EOF)
   Только для обсидиана. Не трогаем другие темы.
   ========================================================= */

/* 1) БАЗОВЫЕ ТЕКСТОВЫЕ ТОКЕНЫ (только в теме 4) */
body[data-theme="4"]{
  --t-xs: 12px;
  --t-sm: 13px;
  --t-md: 14px;
  --t-lg: 16px;

  --w-regular: 450;
  --w-medium: 550;
  --w-semibold: 650;
  --w-bold: 750;

  --lh-tight: 1.25;
  --lh-normal: 1.45;

  --ls-tight: -0.01em;
  --ls-normal: 0;
}

/* 2) ОБЩИЙ РИТМ ВНУТРИ МОДАЛОК (главное место, где сейчас “крупно”) */
body[data-theme="4"] .md .mc{
  font-size: var(--t-md);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
}

/* 3) ЛЕЙБЛЫ/ПОДПИСИ — меньше и спокойнее */
body[data-theme="4"] .md .mc .muted,
body[data-theme="4"] .md .mc .hint,
body[data-theme="4"] .md .mc .lbl{
  font-size: var(--t-sm) !important;
  font-weight: var(--w-regular) !important;
  opacity: 0.85;
  letter-spacing: var(--ls-normal);
}

/* 4) ЗАГОЛОВКИ БЛОКОВ — без “900”, аккуратно */
body[data-theme="4"] .md .mc h1,
body[data-theme="4"] .md .mc h2,
body[data-theme="4"] .md .mc h3,
body[data-theme="4"] .md .mc .ttl,
body[data-theme="4"] .md .mc .title{
  font-size: var(--t-lg) !important;
  font-weight: var(--w-semibold) !important;
  line-height: var(--lh-tight) !important;
  letter-spacing: var(--ls-tight) !important;
}

/* 5) ПОЛЯ В МОДАЛКАХ — текст меньше и не “орёт” */
body[data-theme="4"] .md .mc input,
body[data-theme="4"] .md .mc select,
body[data-theme="4"] .md .mc textarea{
  font-size: var(--t-md) !important;
  font-weight: var(--w-medium) !important;
  letter-spacing: var(--ls-normal) !important;
}

/* 6) КНОПКИ В МОДАЛКАХ — премиум вес */
body[data-theme="4"] .md .mc .br,
body[data-theme="4"] .md .mc button{
  font-weight: var(--w-semibold) !important;
  letter-spacing: var(--ls-tight) !important;
}

/* 7) СУММЫ/ИТОГИ — выделяем, но без “крика” */
body[data-theme="4"] .total,
body[data-theme="4"] .sum,
body[data-theme="4"] .money{
  font-weight: var(--w-bold) !important;
  letter-spacing: var(--ls-tight) !important;
}

/* =========================================================
   // КОНЕЦ ПАТЧА: THEME 4 — LUX TYPOGRAPHY (EOF)
   ========================================================= */
   /* =========================================================
   // НАЧАЛО ПАТЧА: THEME 4 — READABILITY (GOAL + SEARCH)
   Только для обсидиана. Убираем “непонятные” серые.
   ========================================================= */

/* 1) Плейсхолдеры: всегда читаемые на обсидиане (как поиск контрагента) */
body[data-theme="4"] input::placeholder,
body[data-theme="4"] textarea::placeholder{
  color: rgba(255,255,255,0.55) !important;
  opacity: 1 !important;
}

/* 2) Поля ввода/поиска: премиум-поверхность + контраст (как поиск контрагента) */
body[data-theme="4"] input,
body[data-theme="4"] select,
body[data-theme="4"] textarea{
  color: rgba(255,255,255,0.86) !important;
  background: rgba(14,16,19,0.72) !important;
  border: 1px solid rgba(255,211,106,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 26px rgba(0,0,0,0.45) !important;
}

/* 3) Фокус: аккуратное золото, без “кислоты” */
body[data-theme="4"] input:focus,
body[data-theme="4"] select:focus,
body[data-theme="4"] textarea:focus{
  outline: none !important;
  border-color: rgba(255,211,106,0.26) !important;
  box-shadow:
    0 0 0 3px rgba(255,211,106,0.10),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 30px rgba(0,0,0,0.55) !important;
}

/* 4) “Цель не задана” и похожие подписи: усиливаем контраст точечно */
body[data-theme="4"] .goal,
body[data-theme="4"] .goal-text,
body[data-theme="4"] .goalTitle,
body[data-theme="4"] .goal-title,
body[data-theme="4"] #goal,
body[data-theme="4"] #goalBox,
body[data-theme="4"] #goal-box,
body[data-theme="4"] #goalName,
body[data-theme="4"] #goal-name{
  color: rgba(243,245,247,0.74) !important;
}

/* 5) Очень частый случай: “поиск” в списках (подстрахуем id) */
body[data-theme="4"] #q,
body[data-theme="4"] #search,
body[data-theme="4"] #searchInput,
body[data-theme="4"] #catSearch,
body[data-theme="4"] #debtSearch{
  color: var(--text) !important;
}

/* =========================================================
   // КОНЕЦ ПАТЧА: THEME 4 — READABILITY (GOAL + SEARCH)
   ========================================================= */
   /* =========================================================
   // НАЧАЛО ПАТЧА: THEME 4 — MAIN ADD FIELD (HARD TARGET)
   Главная строка “Введи категорию…” часто НЕ input — поэтому расширяем охват.
   ========================================================= */

/* 1) Общий стиль для “поля добавления” на главной (страховка по классам) */
body[data-theme="4"] .add,
body[data-theme="4"] .addbox,
body[data-theme="4"] .add-box,
body[data-theme="4"] .addInput,
body[data-theme="4"] .add-input,
body[data-theme="4"] .main-add,
body[data-theme="4"] .mainAdd,
body[data-theme="4"] #add,
body[data-theme="4"] #addBox,
body[data-theme="4"] #add-box,
body[data-theme="4"] #quickAdd,
body[data-theme="4"] #quick-add{
  color: var(--text) !important;
  background: rgba(14,16,19,0.72) !important;
  border: 1px solid rgba(255,211,106,0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 30px rgba(0,0,0,0.50) !important;
}

/* 2) Если это input — уже ок, но добавим точный плейсхолдер */
body[data-theme="4"] .add::placeholder,
body[data-theme="4"] .addbox::placeholder,
body[data-theme="4"] .add-box::placeholder,
body[data-theme="4"] #add::placeholder,
body[data-theme="4"] #quickAdd::placeholder,
body[data-theme="4"] #quick-add::placeholder{
  color: rgba(255,255,255,0.55) !important;
  opacity: 1 !important;
}

/* 3) Если это не input, а div/span — тогда текст “плейсхолдера” обычно внутри */
body[data-theme="4"] .add .ph,
body[data-theme="4"] .add .placeholder,
body[data-theme="4"] .addbox .ph,
body[data-theme="4"] .addbox .placeholder,
body[data-theme="4"] .add-box .ph,
body[data-theme="4"] .add-box .placeholder,
body[data-theme="4"] #add .ph,
body[data-theme="4"] #add .placeholder,
body[data-theme="4"] #quickAdd .ph,
body[data-theme="4"] #quickAdd .placeholder{
  color: rgba(243,245,247,0.58) !important;
}

/* 4) Фокус/актив на главной строке */
body[data-theme="4"] .add:focus,
body[data-theme="4"] .addbox:focus,
body[data-theme="4"] .add-box:focus,
body[data-theme="4"] #add:focus,
body[data-theme="4"] #quickAdd:focus,
body[data-theme="4"] #quick-add:focus{
  outline: none !important;
  border-color: rgba(255,211,106,0.26) !important;
  box-shadow:
    0 0 0 3px rgba(255,211,106,0.10),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 14px 34px rgba(0,0,0,0.55) !important;
}

/* =========================================================
   // КОНЕЦ ПАТЧА: THEME 4 — MAIN ADD FIELD (HARD TARGET)
   ========================================================= */
   /* =========================================================
   THEME 4 — LUX MAIN INPUT REFINEMENT
   ========================================================= */

body[data-theme="4"] .add,
body[data-theme="4"] .addbox,
body[data-theme="4"] .add-box,
body[data-theme="4"] #quickAdd,
body[data-theme="4"] #add{
  
  background: #0c0f13 !important; /* чистый обсидиан */
  
  border: 1px solid rgba(255,255,255,0.06) !important; /* тонкий дорогой бордер */
  
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 22px rgba(0,0,0,0.55) !important; /* без желтой ауры */

  padding: 18px 22px !important; /* больше воздуха */
  
  border-radius: 20px !important;
}

/* плейсхолдер */
body[data-theme="4"] .add::placeholder,
body[data-theme="4"] #quickAdd::placeholder{
  color: rgba(240,240,240,0.65) !important;
  font-weight: 500;
}

/* фокус — тонкий ювелирный */
body[data-theme="4"] .add:focus,
body[data-theme="4"] #quickAdd:focus{
  border-color: rgba(255,211,106,0.22) !important;
  box-shadow:
    0 0 0 2px rgba(255,211,106,0.08),
    0 10px 26px rgba(0,0,0,0.6) !important;
}
/* =========================================================
   // НАЧАЛО ПАТЧА: THEME 4 — MAIN SEARCH (CLEAN OBSIDIAN + JEWEL RIM)
   ========================================================= */

body[data-theme="4"] #search-input{
  color: var(--text) !important;

  /* чистый обсидиан без мутной серости */
  background: rgba(10,12,14,0.92) !important;

  /* тонкий “дорогой” контур */
  border: 1px solid rgba(255,255,255,0.07) !important;

  border-radius: 20px !important;
  padding: 18px 22px !important;

  /* никакой золотой ауры — только аккуратная глубина */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 26px rgba(0,0,0,0.62) !important;
}

/* плейсхолдер — читаемый, но не белый */
body[data-theme="4"] #search-input::placeholder{
  color: rgba(244,245,247,0.62) !important;
  opacity: 1 !important;
  font-weight: 550 !important;
}

/* фокус — “ювелирный” тонкий золотой, без мутности */
body[data-theme="4"] #search-input:focus{
  outline: none !important;

  border-color: rgba(255,211,106,0.18) !important;

  box-shadow:
    0 0 0 2px rgba(255,211,106,0.06),
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 12px 30px rgba(0,0,0,0.68) !important;
}

/* =========================================================
   // КОНЕЦ ПАТЧА: THEME 4 — MAIN SEARCH (CLEAN OBSIDIAN + JEWEL RIM)
   ========================================================= */
   /* =========================
   THEME 4 — CARD DEPTH LAYER
   ========================= */

body[data-theme="4"] .card,
body[data-theme="4"] .box,
body[data-theme="4"] .tile,
body[data-theme="4"] .entry,
body[data-theme="4"] .goal-box,
body[data-theme="4"] .nav-item{

  background: linear-gradient(
    180deg,
    rgba(22,24,29,0.96) 0%,
    rgba(14,16,20,0.96) 100%
  );

  border: 1px solid rgba(231,185,90,0.12);

  box-shadow:
    0 18px 42px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.6);

  backdrop-filter: none;
}

/* тонкий верхний блик */
body[data-theme="4"] .card::before,
body[data-theme="4"] .box::before,
body[data-theme="4"] .tile::before,
body[data-theme="4"] .entry::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.15),
    transparent
  );
  opacity:0.5;
}
/* =========================
   THEME 4 — BUTTON FIX (GOAL / THEME)
   ========================= */

body[data-theme="4"] .goal-btn,
body[data-theme="4"] .theme-btn{

  background: linear-gradient(
    180deg,
    rgba(20,22,27,0.95) 0%,
    rgba(12,14,18,0.95) 100%
  );

  border: 1px solid rgba(255,211,106,0.22);

  box-shadow:
    0 10px 26px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(255,255,255,0.06);

  color: var(--text);
}
/* =========================
   THEME 4 — CARD DEPTH FIX
   ========================= */

body[data-theme="4"] .card,
body[data-theme="4"] .block,
body[data-theme="4"] .stat-card{

  background: linear-gradient(
    180deg,
    rgba(18,20,24,0.96) 0%,
    rgba(10,12,16,0.96) 100%
  );

  border: 1px solid rgba(255,211,106,0.12);

  box-shadow:
    0 22px 60px rgba(0,0,0,0.88),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
   /* =========================
   // НАЧАЛО ПАТЧА: THEME 4 — NAV ACTIVE LUX (NV/NB)
   ========================= */

/* 1) В теме 4 убираем “молочную серость” у плиток иконок */
body[data-theme="4"] .nv .nb b{
  background: rgba(12,14,18,0.62) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.90) !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.55) !important;
}

/* 2) Активная вкладка: ювелирный акцент (без дешёвого glow) */
body[data-theme="4"] .nv .nb.a{
  color: rgba(255,255,255,0.92) !important;
}

body[data-theme="4"] .nv .nb.a b{
  position: relative !important;

  background: linear-gradient(
    180deg,
    rgba(18,20,24,0.94) 0%,
    rgba(10,12,16,0.94) 100%
  ) !important;

  border-color: rgba(255,211,106,0.42) !important;

  /* делаем “золото” заметным не контуром, а тоном */
  color: rgba(255,211,106,0.92) !important;

  box-shadow:
    0 16px 36px rgba(0,0,0,0.72),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(255,211,106,0.16) !important;
}

/* тонкий индикатор активной вкладки (самое читаемое решение) */
/* body[data-theme="4"] .nv .nb.a::after{
  content:"" !important;
  position:absolute !important;
  left: 18% !important;
  right: 18% !important;
  bottom: 6px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: rgba(255,211,106,0.78) !important;
  box-shadow: 0 6px 18px rgba(255,211,106,0.14) !important;
  pointer-events:none !important;
}
/* =========================
   // НАЧАЛО ПАТЧА: THEME 4 — MODAL MATERIAL (MD/MC)
   ========================= */

/* оверлей */
body[data-theme="4"] .md{
  background: rgba(0,0,0,0.82) !important; !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* НАЧАЛО ПАТЧА: THEME4 MODAL BUTTONS LUX (NO LAG) */
body[data-theme="4"] #m-add .mc button,
body[data-theme="4"] #m-add .mc .btn,
body[data-theme="4"] #m-extra .mc button,
body[data-theme="4"] #m-extra .mc .btn{
  background: linear-gradient(180deg, rgba(24,26,30,0.96) 0%, rgba(14,16,20,0.96) 100%) !important;
  border: 1px solid rgba(255,211,106,0.22) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,0.72),
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.55) !important;
  color: rgba(243,245,247,0.92) !important;
}

body[data-theme="4"] #m-add .mc button:active,
body[data-theme="4"] #m-add .mc .btn:active,
body[data-theme="4"] #m-extra .mc button:active,
body[data-theme="4"] #m-extra .mc .btn:active{
  transform: translateY(1px);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.70),
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.62) !important;
  border-color: rgba(255,211,106,0.30) !important;
}

body[data-theme="4"] #m-add .mc button:focus,
body[data-theme="4"] #m-add .mc .btn:focus,
body[data-theme="4"] #m-extra .mc button:focus,
body[data-theme="4"] #m-extra .mc .btn:focus{
  outline: none !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,0.72),
    0 0 0 2px rgba(255,211,106,0.14),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
/* НАЧАЛО ПАТЧА: THEME4 DATE FIELDS = ONE CONTAINER (OBSIDIAN) */

/* 1) ОБСИДИАН ДЕЛАЕМ НА ВНЕШНЕМ КОНТЕЙНЕРЕ (а не на input) */
body[data-theme="4"] #m-add .in-date,
body[data-theme="4"] #m-add #due-date-wrap,
body[data-theme="4"] #m-add #ship-date-wrap{
  background: linear-gradient(
    180deg,
    rgba(22,24,28,0.96) 0%,
    rgba(14,16,20,0.96) 100%
  ) !important;

  border: 1px solid rgba(255,211,106,0.20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.60),
    0 12px 28px rgba(0,0,0,0.60) !important;

  border-radius: 18px !important;
}

/* 2) ВНУТРЕННИЙ date/datetime делаем “невидимой оболочкой” (убираем его фон/рамки) */
body[data-theme="4"] #m-add .in-date input[type="date"],
body[data-theme="4"] #m-add .in-date input[type="datetime-local"],
body[data-theme="4"] #m-add input#i-due,
body[data-theme="4"] #m-add input#i-date{
  -webkit-appearance: none !important;
  appearance: none !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  color: rgba(243,245,247,0.95) !important;
  -webkit-text-fill-color: rgba(243,245,247,0.95) !important;

  outline: none !important;
}

/* 3) Иконка календаря в тему (без второго серого прямоугольника) */
body[data-theme="4"] #m-add .in-date input[type="date"]::-webkit-calendar-picker-indicator,
body[data-theme="4"] #m-add .in-date input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body[data-theme="4"] #m-add input#i-due::-webkit-calendar-picker-indicator,
body[data-theme="4"] #m-add input#i-date::-webkit-calendar-picker-indicator{
  opacity: 0.85 !important;
  filter: invert(1) brightness(1.05) !important;
}

/* КОНЕЦ ПАТЧА: THEME4 DATE FIELDS = ONE CONTAINER (OBSIDIAN) */
/* НАЧАЛО ПАТЧА: THEME4 INPUTS PREMIUM */

body[data-theme="4"] #m-add .mc input,
body[data-theme="4"] #m-add .mc select,
body[data-theme="4"] #m-add .mc textarea{
  background: linear-gradient(180deg, rgba(22,24,28,0.96) 0%, rgba(14,16,20,0.96) 100%) !important;
  border: 1px solid rgba(255,211,106,0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.60),
    0 12px 28px rgba(0,0,0,0.60) !important;
  color: rgba(243,245,247,0.95) !important;
}

body[data-theme="4"] #m-add .mc input:focus,
body[data-theme="4"] #m-add .mc select:focus,
body[data-theme="4"] #m-add .mc textarea:focus{
  border-color: rgba(255,211,106,0.34) !important;
  box-shadow:
    0 0 0 2px rgba(255,211,106,0.12),
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 16px 36px rgba(0,0,0,0.65) !important;
  outline: none !important;
}

/* НАЧАЛО ПАТЧА: THEME4 DATE WRAP REMOVE DOUBLE LAYER */
body[data-theme="4"] #m-add .in-date{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* КОНЕЦ ПАТЧА: THEME4 DATE WRAP REMOVE DOUBLE LAYER */
/* =========================
   // КОНЕЦ ПАТЧА: THEME 4 — MODAL MATERIAL (MD/MC)
   ========================= */
   /* =========================
   // НАЧАЛО ПАТЧА: THEME 4 — MODAL HEADER FIX
   ========================= */

body[data-theme="4"] .mc h2,
body[data-theme="4"] .modal-title,
body[data-theme="4"] .mc-header{

  background: linear-gradient(
    180deg,
    rgba(14,16,20,1) 0%,
    rgba(10,12,16,1) 100%
  ) !important;

  border-bottom: 1px solid rgba(255,211,106,0.18) !important;

  color: rgba(255,255,255,0.92) !important;

  box-shadow: none !important;
}

/* убираем светлый фон если он был */
body[data-theme="4"] .mc h2{
  background-color: transparent !important;
}

/* =========================
   // КОНЕЦ ПАТЧА: THEME 4 — MODAL HEADER FIX
   ========================= */
   /* =========================
   // НАЧАЛО ПАТЧА: FORCE MODAL HEADER FIX (THEME 4)
   ========================= */

body[data-theme="4"] .mc > div:first-child{
  background: linear-gradient(
    180deg,
    rgba(14,16,20,1) 0%,
    rgba(10,12,16,1) 100%
  ) !important;

  border-bottom: 1px solid rgba(255,211,106,0.22) !important;

  box-shadow: none !important;
}

/* убираем светлый фон если где-то остался */
body[data-theme="4"] .mc > div:first-child *{
  background: transparent !important;
}

/* =========================
   // КОНЕЦ ПАТЧА
   ========================= */
   /* =========================
   // НАЧАЛО ПАТЧА: THEME 4 — MODAL BODY DEPTH
   ========================= */

body[data-theme="4"] .mc{
  background: linear-gradient(180deg,
    rgba(12,13,16,0.99) 0%,
    rgba(6,7,9,0.99) 100%
  ) !important;
}

  border: 1px solid rgba(255,211,106,0.22) !important;

  box-shadow:
    0 30px 80px rgba(0,0,0,0.85),
    inset 0 0 0 1px rgba(255,255,255,0.04) !important;

  backdrop-filter: none !important;
}

/* =========================
   // КОНЕЦ ПАТЧА
   ========================= */
   /* // НАЧАЛО ПАТЧА: THEME4 — MODAL BUTTONS LUX */

body[data-theme="4"] #m-add .modal-content button,
body[data-theme="4"] #m-extra .modal-content button,
body[data-theme="4"] #m-debt .modal-content button{

  background: linear-gradient(
    180deg,
    rgba(22,24,29,0.95),
    rgba(14,15,18,0.98)
  ) !important;

  color: rgba(243,245,247,0.92) !important;

  border: 1px solid rgba(255,211,106,0.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 42px rgba(0,0,0,0.65) !important;

  transition: all 160ms ease !important;
}

/* hover / active */
body[data-theme="4"] #m-add .modal-content button:active,
body[data-theme="4"] #m-extra .modal-content button:active,
body[data-theme="4"] #m-debt .modal-content button:active{

  transform: translateY(1px) scale(0.99);

  border-color: rgba(255,211,106,0.36) !important;

  box-shadow:
    0 0 0 2px rgba(255,211,106,0.10),
    0 22px 50px rgba(0,0,0,0.72) !important;
}

/* // КОНЕЦ ПАТЧА: THEME4 — MODAL BUTTONS LUX */
/* // НАЧАЛО ПАТЧА: THEME4 — MODAL CONTAINER LUX */

body[data-theme="4"] .modal-content{

  background: linear-gradient(
    180deg,
    rgba(18,20,24,0.98),
    rgba(10,11,14,1)
  ) !important;

  border: 1px solid rgba(255,211,106,0.22) !important;

  box-shadow:
    0 40px 90px rgba(0,0,0,0.88),
    0 0 0 1px rgba(255,211,106,0.06) inset;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  border-radius: 22px !important;
}

/* лёгкий золотой кант по краю */
body[data-theme="4"] .modal-content::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  pointer-events:none;

  box-shadow:
    0 0 0 1px rgba(255,211,106,0.08),
    0 0 40px rgba(255,211,106,0.04);
}

/* // КОНЕЦ ПАТЧА: THEME4 — MODAL CONTAINER LUX */
/* НАЧАЛО ПАТЧА: THEME4 SHIP EXPENSES PREMIUM CONTAINER (OBSIDIAN) */

/* 1) Общий контейнер блока расходов */
body[data-theme="4"] #m-add .ship-expenses,
body[data-theme="4"] #m-add .ship-exp,
body[data-theme="4"] #m-add .ship-exp-wrap{
  background: linear-gradient(180deg, rgba(18,20,24,0.92) 0%, rgba(12,14,18,0.92) 100%) !important;
  border: 1px solid rgba(255,211,106,0.16) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 14px 34px rgba(0,0,0,0.60) !important;
}

/* 2) Строка расхода — одна линия, без “второй карточки” */
body[data-theme="4"] #m-add .ship-expenses .exp-row,
body[data-theme="4"] #m-add .ship-exp .exp-row,
body[data-theme="4"] #m-add .ship-exp-wrap .exp-row{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
  padding: 12px 12px !important;

  color: rgba(243,245,247,0.92) !important;
  font-weight: 600 !important;
}

/* Текст расхода */
body[data-theme="4"] #m-add .ship-expenses .exp-row .exp-title,
body[data-theme="4"] #m-add .ship-exp .exp-row .exp-title,
body[data-theme="4"] #m-add .ship-exp-wrap .exp-row .exp-title{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 16px !important;
  letter-spacing: 0.2px !important;
  opacity: 0.92 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ============================================
   OBSIDIAN — КРЕСТИК В РАСХОДАХ ПО ОТГРУЗКЕ
   (без конфликта с fish-logic)
============================================ */

body[data-theme="4"] #m-add .ship-exp-row button{
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  border-radius: 10px !important;

  background: rgba(120,20,20,0.9) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;

  font-size: 16px !important;
  font-weight: 700 !important;

  box-shadow: none !important;
}

/* НАВЕДЕНИЕ */
body[data-theme="4"] #m-add .ship-expenses .exp-row button:active,
body[data-theme="4"] #m-add .ship-exp .exp-row button:active,
body[data-theme="4"] #m-add .ship-exp-wrap .exp-row button:active{
  transform: scale(0.98) !important;
}

/* КОНЕЦ ПАТЧА: THEME4 SHIP EXPENSES PREMIUM CONTAINER (OBSIDIAN) */
/* ============================================
   OBSIDIAN — РОВНАЯ СТРОКА РАСХОДА (ТЕКСТ + КРЕСТИК)
============================================ */
body[data-theme="4"] #m-add .ship-exp-row{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body[data-theme="4"] #m-add .ship-exp-row .exp-title{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
}
/* ============================================
   THEME 4 (OBSIDIAN): SHIP EXPENSES — ONE BLOCK, ROWS (NO INNER CARDS)
   ============================================ */
body[data-theme="4"] #m-add .ship-exp-line,
body[data-theme="4"] #m-add .ship-expenses{
  background: linear-gradient(180deg, rgba(20,22,26,.96) 0%, rgba(12,14,18,.96) 100%) !important;
  border: 1px solid rgba(255,211,106,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 36px rgba(0,0,0,.65) !important;
  border-radius: 22px !important;
  padding: 12px 12px !important;
}

/* УБИРАЕМ "КАРТОЧКУ ВНУТРИ": каждая строка расхода становится плоской и компактной */
body[data-theme="4"] #m-add .ship-exp-row{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  padding: 8px 4px !important;   /* компактнее */
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  gap: 8px !important;            /* компактнее */
}

/* Разделитель между строками (аккуратно, как в Obsidian) */
body[data-theme="4"] #m-add .ship-exp-row + .ship-exp-row{
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

/* Текст и сумма: одинаковый стиль и ровные колонки */
body[data-theme="4"] #m-add .ship-exp-row .exp-title{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  color: rgba(243,245,247,.92) !important;
  letter-spacing: .2px !important;
}

body[data-theme="4"] #m-add .ship-exp-row .exp-amt{
  flex: 0 0 auto !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  color: rgba(255,211,106,.92) !important;
  margin-left: auto !important;
}

/* КРЕСТИК — OBSIDIAN (НЕ КРАСНЫЙ "КИРПИЧ") */
body[data-theme="4"] #m-add .ship-exp-row .exp-del,
body[data-theme="4"] #m-add .ship-exp-row button{
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;

  border-radius: 10px !important;
  font-size: 16px !important;
  line-height: 28px !important;
  padding: 0 !important;

  background: rgba(0,0,0,.20) !important;                 /* Obsidian */
  border: 1px solid rgba(255,211,106,.18) !important;     /* тихий акцент */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  color: rgba(243,245,247,.82) !important;
}

/* Красный — только при нажатии (опасное действие) */
body[data-theme="4"] #m-add .ship-exp-row .exp-del:active,
body[data-theme="4"] #m-add .ship-exp-row button:active{
  background: rgba(255,84,84,.14) !important;
  border-color: rgba(255,84,84,.30) !important;
  color: rgba(255,220,220,.92) !important;
}
/* ============================================
   НАЧАЛО ПАТЧА: FPE — ДАТЫ ВНУТРИ ПОЛЯ (РУЧКИ)
   ============================================ */

#m-add .in-field#ship-date-wrap,
#m-add .in-field#due-date-wrap{
  position: relative !important;

  /* [1] ВЫСОТА КОНТЕЙНЕРА (НЕ ТРОГАЙ, если не хочешь увеличивать поле) */
  height: var(--fpeCtlH) !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  /* [2] ВНУТРЕННИЕ ОТСТУПЫ КОНТЕЙНЕРА (влияют на "воздух" вокруг всего) */
  /*    ↑/↓ тут не двигается по отдельности, это общий padding */
  padding: 6px var(--fpe-pad-x) !important;

  overflow: hidden !important;
}

/* ---------- ЛЕЙБЛ (СЛОВА: "Дата оплаты", "Дата отгрузки") ---------- */
#m-add .in-field#ship-date-wrap .in-field-label,
#m-add .in-field#due-date-wrap .in-field-label{
  position: absolute !important;

  /* [3] ЛЕЙБЛ ВЛЕВО/ВПРАВО */
  left: var(--fpeCtlPadX) !important;   /* ← двигает слова вправо/влево */
  right: 56px !important;              /* ← оставляет место под стрелку/иконку справа */

  /* [4] ЛЕЙБЛ ВВЕРХ/ВНИЗ (СЛОВА) */
  top: var(--fpeDateLabelTop) !important; /* ← ГЛАВНАЯ РУЧКА. Увеличь значение = слова ниже */

  /* [5] ШРИФТ ЛЕЙБЛА (СЛОВА) */
  font-size: var(--fpeDateLabelSize) !important; /* ← размер слов */
  line-height: 1 !important;

  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: .78 !important;
}

/* ---------- ЦИФРЫ ДАТЫ (значение инпута) ---------- */
#m-add .in-field#ship-date-wrap > input,
#m-add .in-field#due-date-wrap > input{
  position: absolute !important;

  /* [6] ЦИФРЫ ВЛЕВО/ВПРАВО */
  left: 0 !important;
  right: 0 !important;

  /* [7] ЦИФРЫ ВВЕРХ/ВНИЗ (ОСНОВНАЯ РУЧКА) */
  bottom: var(--fpeDateInputBottom) !important;  /* ↑ увеличить = цифры выше, уменьшить = цифры ниже */

  /* [8] ВЫСОТА ЛИНИИ ЦИФР (влияет на то, как они "сидят") */
  height: var(--fpeDateInputH) !important;       /* ↑ больше = жирнее/выше строка, меньше = компактнее */

  /* [9] ВНУТРЕННИЕ ОТСТУПЫ ЦИФР (лево/право) */
  padding-left: var(--fpeCtlPadX) !important;    /* ← цифры левее/правее */
  padding-right: 56px !important;               /* ← резерв справа под стрелку/иконку */

  border: 0 !important;
  background: transparent !important;
  outline: none !important;

  /* [10] ШРИФТ ЦИФР (РАЗМЕР/ЖИРНОСТЬ) */
  font-size: var(--fpeFont) !important;          /* ← размер цифр (сделай меньше, если крупно) */
  font-weight: 800 !important;

  /* [11] ПОСАДКА ЦИФР ВНУТРИ СВОЕЙ ВЫСОТЫ */
  line-height: var(--fpeDateInputH) !important;  /* ← держи равным height для ровной посадки */
}

/* [12] ОТДЕЛЬНО: ДАТА ОТГРУЗКИ (datetime) обычно длиннее — можно чуть ниже, чтобы НЕ наезжала */
#m-add .in-field#ship-date-wrap > input{
  bottom: calc(var(--fpeDateInputBottom) - 4px) !important;
  /* поменяй -4px на -6px (ниже) или -2px (выше) */
}

/* ---------- СТРЕЛОЧКА/КАЛЕНДАРЬ СПРАВА ---------- */
/* Это НЕ "наша" стрелка как у select. Это системный индикатор даты. */
#m-add .in-field#ship-date-wrap input::-webkit-calendar-picker-indicator,
#m-add .in-field#due-date-wrap input::-webkit-calendar-picker-indicator{
  opacity: .9 !important;

  /* [13] СТРЕЛКА ВЛЕВО/ВПРАВО */
  position: absolute !important;
  right: 14px !important;              /* ← двигает индикатор левее/правее */

  /* [14] СТРЕЛКА ВВЕРХ/ВНИЗ */
  top: 50% !important;                 /* ← базово по центру */
  transform: translateY(-50%) !important;

  cursor: pointer !important;
}

/* ============================================
   КОНЕЦ ПАТЧА: FPE — ДАТЫ ВНУТРИ ПОЛЯ (РУЧКИ)
   ============================================ */
   /* ============================================
   НАЧАЛО ПАТЧА: ДАТЫ — ЯСНО ГДЕ ЦИФРЫ И ГДЕ СТРЕЛКА
   ============================================ */

/* ====== НАСТРОЙКИ (КРУТИЛКИ) ======
   1) ЦИФРЫ ВВЕРХ/ВНИЗ: меняй --DATE_NUM_BOTTOM
      МЕНЬШЕ = НИЖЕ (6px -> 4px -> 2px)
      БОЛЬШЕ = ВЫШЕ (6px -> 8px -> 10px)

   2) ВЫСОТА ЛИНИИ ЦИФР: меняй --DATE_NUM_H
      МЕНЬШЕ = КОМПАКТНЕЕ (34px -> 32px)
      БОЛЬШЕ = СВОБОДНЕЕ (34px -> 36px)

   3) РАЗМЕР ЦИФР: меняй --DATE_NUM_SIZE
      (16px -> 15px)

   4) СЛЕВА/СПРАВА ЦИФРЫ: --DATE_NUM_PAD_L / --DATE_NUM_PAD_R
*/
body[data-theme="4"]{
  --DATE_NUM_BOTTOM: -6px;     /* ← ЦИФРЫ ВВЕРХ/ВНИЗ */
  --DATE_NUM_H: 34px;         /* ← ВЫСОТА ЛИНИИ ЦИФР */
  --DATE_NUM_SIZE: 12px;      /* ← РАЗМЕР ЦИФР */
  --DATE_NUM_PAD_L: 18px;     /* ← ЦИФРЫ СЛЕВА/СПРАВА */
  --DATE_NUM_PAD_R: 56px;     /* ← МЕСТО СПРАВА ПОД СТРЕЛКУ/ИКОНКУ */
  --DATE_LABEL_TOP: 10px;     /* ← СЛОВА "Дата..." ВВЕРХ/ВНИЗ */
}

/* ====== КОНТЕЙНЕРЫ ДАТ ====== */
#m-add .in-field#ship-date-wrap,
#m-add .in-field#due-date-wrap{
  position: relative !important;
  height: var(--fpeCtlH) !important;
  overflow: hidden !important;
}

/* ====== СЛОВА (лейбл) ====== */
#m-add .in-field#ship-date-wrap .in-field-label,
#m-add .in-field#due-date-wrap .in-field-label{
  position: absolute !important;
  left: var(--DATE_NUM_PAD_L) !important;
  right: var(--DATE_NUM_PAD_R) !important;

  top: var(--DATE_LABEL_TOP) !important;  /* ← СЛОВА ВВЕРХ/ВНИЗ */
  pointer-events: none !important;
}

/* =========================================================
   ✅ Ц И Ф Р Ы  (ВОТ ОНИ!)
   Это именно input, куда подставляется дата (цифры).
   ========================================================= */
#m-add .in-field#ship-date-wrap > input,
#m-add .in-field#due-date-wrap > input{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;

  /* ✅ ЦИФРЫ ВВЕРХ/ВНИЗ (ГЛАВНОЕ) */
  bottom: var(--DATE_NUM_BOTTOM) !important;

  /* ✅ ВЫСОТА ЛИНИИ ЦИФР (рамка, в которой сидят цифры) */
  height: var(--DATE_NUM_H) !important;
  line-height: var(--DATE_NUM_H) !important;

  /* ✅ СЛЕВА/СПРАВА (видишь 56 — это место под стрелку/иконку) */
  padding-left: var(--DATE_NUM_PAD_L) !important;
  padding-right: var(--DATE_NUM_PAD_R) !important;

  border: 0 !important;
  background: transparent !important;
  outline: none !important;

  /* ✅ РАЗМЕР ЦИФР */
  font-size: var(--DATE_NUM_SIZE) !important;
  font-weight: 800 !important;
}

/* =========================================================
   ✅ НИЖНЯЯ ДАТА (datetime) ДЛИННЕЕ — ЕЁ ОПУСКАЕМ ЕЩЁ НИЖЕ
   Меняй -4px на -6px / -8px если всё ещё заезжает.
   ========================================================= */
#m-add .in-field#ship-date-wrap > input{
  bottom: calc(var(--DATE_NUM_BOTTOM) - 8px) !important; /* ← ЦИФРЫ ЕЩЁ НИЖЕ */
}

/* =========================================================
   ✅ С Т Р Е Л О Ч К А  /  ИКОНКА КАЛЕНДАРЯ (ВОТ ОНА!)
   Это системный индикатор input date/datetime на Android.
   ========================================================= */
#m-add .in-field#ship-date-wrap input::-webkit-calendar-picker-indicator,
#m-add .in-field#due-date-wrap input::-webkit-calendar-picker-indicator{
  opacity: .9 !important;

  position: absolute !important;
  right: 14px !important;       /* ← СТРЕЛКА ЛЕВЕЕ/ПРАВЕЕ */
  top: 50% !important;          /* ← СТРЕЛКА ВЫШЕ/НИЖЕ */
  transform: translateY(-50%) !important;

  cursor: pointer !important;
}

/* ============================================
   КОНЕЦ ПАТЧА
   ============================================ */
   /* ===== СКРЫТЬ ДАТУ ОТГРУЗКИ В КАТЕГОРИЯХ ===== */
#debt-options ~ #ship-date-wrap,
#m-add:not(.fish-mode) #ship-date-wrap{
  display: none !important;
}
/* НАЧАЛО ПАТЧА: ЕДИНЫЙ ШРИФТ ВО ВСЕХ МОДАЛКАХ (OBSIDIAN LUX) */
/* Куда править цифры:
   - размер текста:        --fpeModalFontSize
   - жирность текста:      --fpeModalFontWeight
   - цвет текста:          --fpeModalTextColor
   - цвет плейсхолдера:    --fpeModalPlaceholderColor
   - высота строки:        --fpeModalLineHeight
*/

:root{
  --fpeModalFontSize: 12px;                 /* ← МЕНЯЙ ЗДЕСЬ: размер шрифта */
  --fpeModalFontWeight: 500;                /* ← МЕНЯЙ ЗДЕСЬ: “потолще” */
  --fpeModalLineHeight: 1.2;                /* ← МЕНЯЙ ЗДЕСЬ: высота строки */
  --fpeModalTextColor: rgba(255,255,255,.72);       /* ← МЕНЯЙ ЗДЕСЬ: приглушённый цвет */
  --fpeModalPlaceholderColor: rgba(255,255,255,.38);/* ← МЕНЯЙ ЗДЕСЬ: плейсхолдер */
}

/* 1) БАЗА: всё внутри модалок */
#m-add, #m-extra, #m-pay, #m-view, #m-data, #m-goal, #m-ship-exp,
#id-m-ship, #m-ana-income, #m-ana-daily, #m-ana-cats{
  color: var(--fpeModalTextColor) !important;
}

/* 2) ТЕКСТ/КНОПКИ/ПОЛЯ: делаем одинаково */
#m-add .mc, #m-extra .mc, #m-pay .mc, #m-view .mc, #m-data .mc, #m-goal .mc, #m-ship-exp .mc,
#id-m-ship .mc, #m-ana-income .mc, #m-ana-daily .mc, #m-ana-cats .mc{
  color: var(--fpeModalTextColor) !important;
}

/* 3) Главные элементы ввода: input/select/textarea + кнопки */
#m-add input, #m-add select, #m-add textarea, #m-add button,
#m-extra input, #m-extra select, #m-extra textarea, #m-extra button,
#m-pay input, #m-pay select, #m-pay textarea, #m-pay button,
#m-view input, #m-view select, #m-view textarea, #m-view button,
#m-data input, #m-data select, #m-data textarea, #m-data button,
#m-goal input, #m-goal select, #m-goal textarea, #m-goal button,
#m-ship-exp input, #m-ship-exp select, #m-ship-exp textarea, #m-ship-exp button,
#id-m-ship input, #id-m-ship select, #id-m-ship textarea, #id-m-ship button,
#m-ana-income input, #m-ana-income select, #m-ana-income textarea, #m-ana-income button,
#m-ana-daily input, #m-ana-daily select, #m-ana-daily textarea, #m-ana-daily button,
#m-ana-cats input, #m-ana-cats select, #m-ana-cats textarea, #m-ana-cats button{
  font-size: var(--fpeModalFontSize) !important;     /* ← размер */
  font-weight: var(--fpeModalFontWeight) !important;/* ← толщина */
  line-height: var(--fpeModalLineHeight) !important;/* ← высота строки */
  color: var(--fpeModalTextColor) !important;        /* ← цвет */
}

/* 4) Плейсхолдеры (в т.ч. “Комментарий…”, “Или впиши…” и т.д.) */
#m-add input::placeholder, #m-add textarea::placeholder,
#m-extra input::placeholder, #m-extra textarea::placeholder,
#m-pay input::placeholder, #m-pay textarea::placeholder,
#m-view input::placeholder, #m-view textarea::placeholder,
#m-data input::placeholder, #m-data textarea::placeholder,
#m-goal input::placeholder, #m-goal textarea::placeholder,
#m-ship-exp input::placeholder, #m-ship-exp textarea::placeholder,
#id-m-ship input::placeholder, #id-m-ship textarea::placeholder,
#m-ana-income input::placeholder, #m-ana-income textarea::placeholder,
#m-ana-daily input::placeholder, #m-ana-daily textarea::placeholder,
#m-ana-cats input::placeholder, #m-ana-cats textarea::placeholder{
  color: var(--fpeModalPlaceholderColor) !important;
  font-weight: 700 !important;
}
/* КОНЕЦ ПАТЧА: ЕДИНЫЙ ШРИФТ ВО ВСЕХ МОДАЛКАХ (OBSIDIAN LUX) */
/* ===== THEME 4 LUX OBSIDIAN BACK ===== */
body[data-theme="4"]{
  --bg: #07090c;
  --card: #0f1319;
  --text: rgba(243,245,247,.92);
}

body[data-theme="4"]{
  background:
    radial-gradient(
      1200px 600px at 50% -200px,
      rgba(255,211,106,0.08),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at 50% 30%,
      rgba(16,20,28,0.6),
      transparent 70%
    ),
    #07090c;
}
/* =========================================================
   НАЧАЛО ПАТЧА: THEME 4 — OBSIDIAN ULTRA LUX EDGES (MAIN SAFE)
   ========================================================= */
body[data-theme="4"]{
  /* Ювелирные кромки (ультра тонко, без “колхоза”) */
  --lux-edge-cold: rgba(255,255,255,0.08);   /* холодная линия сверху */
  --lux-edge-deep: rgba(0,0,0,0.62);         /* внутренняя тень-кромка */
  --lux-edge-gold: rgba(255,211,106,0.20);   /* золотая “нить” */
  --lux-glass: radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,0.06), rgba(255,255,255,0) 55%);
}

/* Главные карточки/панели на главной и в разделах */
body[data-theme="4"] .cd,
body[data-theme="4"] .mb,
body[data-theme="4"] .sb,
body[data-theme="4"] .it,
body[data-theme="4"] .goal-mini,
body[data-theme="4"] .search-box,
body[data-theme="4"] .ii{
  background:
    var(--lux-glass),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)) !important;

  border: 1px solid rgba(255,211,106,0.18) !important; /* тонкий золотой кант */
  box-shadow:
    0 16px 40px rgba(0,0,0,0.72),                 /* глубина */
    0 1px 0 var(--lux-edge-cold) inset,           /* холодная линия */
    0 -1px 0 var(--lux-edge-deep) inset,          /* внутренняя тень */
    0 0 0 1px rgba(0,0,0,0.55) inset !important;  /* плотность */
}

/* Поля и кнопки — тот же язык (без изменения размеров/отступов) */
body[data-theme="4"] input,
body[data-theme="4"] select,
body[data-theme="4"] textarea,
body[data-theme="4"] .br{
  background:
    var(--lux-glass),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012)) !important;

  border-color: rgba(255,211,106,0.18) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.70),
    0 1px 0 var(--lux-edge-cold) inset,
    0 -1px 0 var(--lux-edge-deep) inset,
    0 0 0 1px rgba(0,0,0,0.55) inset !important;
}

/* Очень тонкое “дорогое” усиление на активном/фокусе */
body[data-theme="4"] input:focus,
body[data-theme="4"] select:focus,
body[data-theme="4"] textarea:focus{
  border-color: rgba(255,211,106,0.28) !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.74),
    0 1px 0 rgba(255,255,255,0.09) inset,
    0 -1px 0 rgba(0,0,0,0.65) inset,
    0 0 0 1px rgba(255,211,106,0.10),
    0 0 0 1px rgba(0,0,0,0.55) inset !important;
}

/* hover (если браузер поддерживает) — без прыжков, только “дорогой блик” */
body[data-theme="4"] .cd:hover,
body[data-theme="4"] .mb:hover,
body[data-theme="4"] .br:hover{
  border-color: rgba(255,211,106,0.26) !important;
}
/* =========================================================
   КОНЕЦ ПАТЧА: THEME 4 — OBSIDIAN ULTRA LUX EDGES (MAIN SAFE)
   ========================================================= */
   /* =======================================================
   OBSIDIAN ULTRA DEPTH — ГЛАВНАЯ СТРАНИЦА
   ======================================================= */

body[data-theme="4"] .cd,
body[data-theme="4"] .mb,
body[data-theme="4"] .ii,
body[data-theme="4"] .search-box {

  background:
    radial-gradient(120% 100% at 20% 0%, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(180deg, #0c0f14 0%, #06080c 100%) !important;

  border: 1px solid rgba(255,211,106,0.22) !important;

  box-shadow:
    0 20px 45px rgba(0,0,0,0.75),        /* глубина */
    inset 0 1px 0 rgba(255,255,255,0.07), /* холодный верх */
    inset 0 -2px 4px rgba(0,0,0,0.8),     /* плотный низ */
    0 0 0 1px rgba(0,0,0,0.6) inset !important;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Лёгкое золото при hover */
body[data-theme="4"] .cd:hover,
body[data-theme="4"] .mb:hover {
  border-color: rgba(255,211,106,0.35) !important;
}

/* =========================================================
   🏆 ULTRA PREMIUM OBSIDIAN — ЮВЕЛИРНЫЕ ДЕТАЛИ
   ========================================================= */

/* 1) ЗВЁЗДЫ (ультра редкие пиксели света в градиентах) */
body[data-theme="4"] .cd::before,
body[data-theme="4"] .mb::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 15% 10%, rgba(255,255,255,0.8), transparent 1px),
    radial-gradient(1px 1px at 85% 90%, rgba(255,211,106,0.6), transparent 1px),
    radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.4), transparent 1px);
  pointer-events: none;
  opacity: 0.3;
  z-index: 1;
  border-radius: inherit;
}

/* 2) МЕГА-ГЛУБИНА: слой-слой-слой */
body[data-theme="4"] .cd,
body[data-theme="4"] .mb{
  position: relative;
  overflow: hidden;
  box-shadow:
    /* слой 1: абсолютная тень (космос) */
    0 32px 64px rgba(0,0,0,0.92),
    /* слой 2: золото-аура */
    0 0 24px rgba(255,211,106,0.12),
    /* слой 3: холодная граница */
    inset 0 2px 6px rgba(255,255,255,0.08),
    /* слой 4: плотный низ */
    inset 0 -4px 12px rgba(0,0,0,0.88),
    /* слой 5: ювелирный кант */
    0 0 0 1px rgba(255,211,106,0.24) !important;
}

/* 3) ПРЕМИУМ ПЕРЕХОДЫ (плавные, как жидкое золото) */
body[data-theme="4"] .cd,
body[data-theme="4"] .mb,
body[data-theme="4"] .br,
body[data-theme="4"] input,
body[data-theme="4"] select,
body[data-theme="4"] textarea{
  transition:
    border-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background 0.35s ease-out !important;
}

/* 4) КНОПКИ — УЛЬТРА-КЛАСС (они же .br) */
body[data-theme="4"] .br{
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(255,211,106,0.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)) !important;
  
  border: 1.5px solid rgba(255,211,106,0.25) !important;
  
  box-shadow:
    0 18px 44px rgba(0,0,0,0.80),
    0 2px 4px rgba(255,211,106,0.10) inset,
    inset 0 1px 2px rgba(255,255,255,0.06),
    inset 0 -2px 6px rgba(0,0,0,0.75) !important;
  
  position: relative;
  color: rgba(243,245,247,0.94) !important;
  font-weight: 600 !important;
}

/* 5) КНОПКА НА HOVER — ПРОБУЖДЕНИЕ ЗОЛОТА */
body[data-theme="4"] .br:hover{
  border-color: rgba(255,211,106,0.45) !important;
  box-shadow:
    0 20px 50px rgba(255,211,106,0.15),
    0 20px 50px rgba(0,0,0,0.80),
    0 3px 6px rgba(255,211,106,0.18) inset,
    inset 0 1px 2px rgba(255,255,255,0.08),
    inset 0 -2px 8px rgba(0,0,0,0.78) !important;
  transform: translateY(-1px);
}

/* 6) КНОПКА ACTIVE (нажата) — ВТЯНУТОСТЬ */
body[data-theme="4"] .br:active{
  box-shadow:
    inset 0 8px 20px rgba(0,0,0,0.85),
    inset 0 2px 4px rgba(255,211,106,0.12),
    0 2px 8px rgba(0,0,0,0.95) !important;
  transform: translateY(1px);
}

/* 7) INPUT / SELECT / TEXTAREA — ПРЕМИУМ ПОЛЯ */
body[data-theme="4"] input,
body[data-theme="4"] select,
body[data-theme="4"] textarea{
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(255,211,106,0.06), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.02)) !important;
  
  border: 1px solid rgba(255,211,106,0.20) !important;
  
  box-shadow:
    inset 0 4px 12px rgba(0,0,0,0.70),
    inset 0 1px 3px rgba(255,255,255,0.05),
    0 8px 24px rgba(0,0,0,0.65) !important;
  
  color: rgba(243,245,247,0.88) !important;
}

/* 8) INPUT FOCUS — ЗОЛОТАЯ ГЛУБИНА */
body[data-theme="4"] input:focus,
body[data-theme="4"] select:focus,
body[data-theme="4"] textarea:focus{
  border-color: rgba(255,211,106,0.38) !important;
  outline: none !important;
  
  box-shadow:
    inset 0 4px 16px rgba(0,0,0,0.72),
    inset 0 1px 3px rgba(255,255,255,0.07),
    0 0 0 3px rgba(255,211,106,0.18),
    0 12px 28px rgba(255,211,106,0.08),
    0 12px 28px rgba(0,0,0,0.70) !important;
  
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(255,211,106,0.10), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.01)) !important;
}

/* 9) ТЕКСТОВЫЕ ЭЛЕМЕНТЫ — ГЛУБОКАЯ ТИПОГРАФИЯ */
body[data-theme="4"] .cd p,
body[data-theme="4"] .mb p,
body[data-theme="4"] .cd h3,
body[data-theme="4"] .mb h3{
  color: rgba(243,245,247,0.92) !important;
  text-shadow: 
    0 2px 4px rgba(0,0,0,0.60),
    0 0 12px rgba(255,211,106,0.06) !important;
}

/* 10) МУТИРОВАННЫЙ ТЕКСТ (secondary) — РАССЕЯННОЕ ЗОЛОТО */
body[data-theme="4"] .muted,
body[data-theme="4"] .mc{
  color: rgba(150,160,172,0.70) !important;
}

/* 11) ОСОБЫЕ БЛОКИ (goal-mini, sb, it) */
body[data-theme="4"] .goal-mini,
body[data-theme="4"] .sb,
body[data-theme="4"] .it,
body[data-theme="4"] .search-box{
  position: relative;
  background:
    radial-gradient(130% 100% at 20% -10%, rgba(255,211,106,0.07), transparent 55%),
    linear-gradient(180deg, rgba(20,25,35,0.80), rgba(5,8,12,0.95)) !important;
  
  border: 1px solid rgba(255,211,106,0.20) !important;
  
  box-shadow:
    0 24px 52px rgba(0,0,0,0.78),
    inset 0 2px 8px rgba(255,255,255,0.06),
    inset 0 -4px 12px rgba(0,0,0,0.80),
    0 0 0 1px rgba(0,0,0,0.50) inset !important;
}

/* 12) HOVER ЭФФЕКТ НА БЛОКАХ */
body[data-theme="4"] .goal-mini:hover,
body[data-theme="4"] .sb:hover,
body[data-theme="4"] .it:hover,
body[data-theme="4"] .search-box:hover{
  border-color: rgba(255,211,106,0.32) !important;
  box-shadow:
    0 28px 60px rgba(255,211,106,0.12),
    0 28px 60px rgba(0,0,0,0.80),
    inset 0 2px 8px rgba(255,255,255,0.07),
    inset 0 -4px 12px rgba(0,0,0,0.82),
    0 0 0 1px rgba(0,0,0,0.50) inset !important;
}

/* 13) АККОРДИОНЫ / ВЫПАДАЮЩИЕ СПИСКИ */
body[data-theme="4"] details,
body[data-theme="4"] summary{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.02)) !important;
  border-color: rgba(255,211,106,0.18) !important;
}

body[data-theme="4"] summary{
  color: rgba(243,245,247,0.88) !important;
  cursor: pointer;
  transition: color 0.25s ease-out;
}

body[data-theme="4"] summary:hover{
  color: rgba(255,211,106,0.90) !important;
}

/* 14) СКРОЛЛ-БАР (если видим) */
body[data-theme="4"] ::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}

body[data-theme="4"] ::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.40);
  border-radius: 4px;
}

body[data-theme="4"] ::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(255,211,106,0.35), rgba(255,211,106,0.20));
  border-radius: 4px;
  border: 2px solid rgba(0,0,0,0.50);
}

body[data-theme="4"] ::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(255,211,106,0.50), rgba(255,211,106,0.30));
}

/* 15) ПЛЕЙСХОЛДЕРЫ — МЯГКОЕ ЗОЛОТО */
body[data-theme="4"] input::placeholder,
body[data-theme="4"] textarea::placeholder{
  color: rgba(200,180,150,0.45) !important;
  font-weight: 500;
}

/* 16) СЕЛЕКТ-ОПЦИИ (background) */
body[data-theme="4"] select option{
  background: #0f1319 !important;
  color: rgba(243,245,247,0.92) !important;
}

/* =========================================================
   ✨ ФИНАЛЬНАЯ АТМОСФЕРА: МИКРО-АНИМАЦИИ
   ========================================================= */

@keyframes ultra-glow {
  0% {
    box-shadow:
      0 0 20px rgba(255,211,106,0.08),
      inset 0 0 0 rgba(255,211,106,0.02);
  }
  50% {
    box-shadow:
      0 0 30px rgba(255,211,106,0.14),
      inset 0 0 8px rgba(255,211,106,0.04);
  }
  100% {
    box-shadow:
      0 0 20px rgba(255,211,106,0.08),
      inset 0 0 0 rgba(255,211,106,0.02);
  }
}

@keyframes premium-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-2px); }
}

/* Применяем микро-анимации на интерактивные элементы */
body[data-theme="4"] .br{
  animation: ultra-glow 4s ease-in-out infinite;
}

/* =========================================================

/* ================================================================
   КАТЕГОРИИ — ПЕРЕОПРЕДЕЛЕНИЕ (САМЫЙ ВЫСОКИЙ ПРИОРИТЕТ)
   ================================================================ */

body[data-theme="4"] .cat-item,
body[data-theme="4"] #box-cats .ci,
body[data-theme="4"] #list .ci,
body[data-theme="4"] .cat-btn,
body[data-theme="4"] [class*="cat"] {
  color: rgba(255,255,255,0.86) !important;
}

body[data-theme="4"] .cat-item p,
body[data-theme="4"] .cat-item h3,
body[data-theme="4"] .cat-item span {
  color: rgba(255,255,255,0.86) !important;
}

/* ВСЕ INPUT И SEARCH ВЕЗДЕ */
body[data-theme="4"] input[type="text"],
body[data-theme="4"] input[type="search"],
body[data-theme="4"] input[placeholder*="категор"],
body[data-theme="4"] input[placeholder*="сумм"],
body[data-theme="4"] input[placeholder*="Введ"] {
  color: rgba(255,255,255,0.86) !important;
  border-color: rgba(255,211,106,0.22) !important;
}

body[data-theme="4"] input[placeholder*="категор"]::placeholder,
body[data-theme="4"] input[placeholder*="сумм"]::placeholder,
body[data-theme="4"] input[placeholder*="Введ"]::placeholder {
  color: rgba(255,255,255,0.55) !important;
}

/* END ПЕРЕОПРЕДЕЛЕНИЕ */

   🏆 БЛОКИ КАТЕГОРИЙ — ULTRA PREMIUM (как главный экран)
   ========================================================= */

/* ЗВЁЗДЫ в категориях */
body[data-theme="4"] .cat-item::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 15% 10%, rgba(255,255,255,0.8), transparent 1px),
    radial-gradient(1px 1px at 85% 90%, rgba(255,211,106,0.6), transparent 1px),
    radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.4), transparent 1px);
  pointer-events: none;
  opacity: 0.3;
  z-index: 1;
  border-radius: inherit;
}

/* Базовый стиль блока категории */
body[data-theme="4"] .cat-item{
  position: relative;
  overflow: hidden;
  
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(180deg, #0c0f14 0%, #06080c 100%) !important;
  
  border: 1px solid rgba(255,211,106,0.18) !important; /* тонкий ободок */
  
  box-shadow:
    /* слой 1: абсолютная тень (космос) */
    0 32px 64px rgba(0,0,0,0.92),
    /* слой 2: золото-аура */
    0 0 24px rgba(255,211,106,0.12),
    /* слой 3: холодная граница */
    inset 0 2px 6px rgba(255,255,255,0.08),
    /* слой 4: плотный низ */
    inset 0 -4px 12px rgba(0,0,0,0.88),
    /* слой 5: ювелирный кант */
    0 0 0 1px rgba(255,211,106,0.24) !important;
  
  transition:
    border-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.25s ease-out !important;
}

/* При наведении — золото светлеет */
body[data-theme="4"] .cat-item:hover{
  border-color: rgba(255,211,106,0.32) !important;
  box-shadow:
    0 28px 60px rgba(255,211,106,0.12),
    0 28px 60px rgba(0,0,0,0.80),
    inset 0 2px 8px rgba(255,255,255,0.07),
    inset 0 -4px 12px rgba(0,0,0,0.82),
    0 0 0 1px rgba(0,0,0,0.50) inset !important;
}

/* При нажатии — потолще ободок (видно что нажали) */
body[data-theme="4"] .cat-item:active,
body[data-theme="4"] .cat-item.active{
  border: 2px solid rgba(255,211,106,0.45) !important;
  box-shadow:
    0 28px 60px rgba(255,211,106,0.15),
    0 28px 60px rgba(0,0,0,0.80),
    inset 0 2px 8px rgba(255,255,255,0.08),
    inset 0 -4px 12px rgba(0,0,0,0.85),
    0 0 0 3px rgba(255,211,106,0.18) !important;
  transform: scale(0.98);
}

/* Текст в категориях — премиум (как поиск контрагента) */
body[data-theme="4"] .cat-item,
body[data-theme="4"] .cat-item p,
body[data-theme="4"] .cat-item h3{
  color: rgba(255,255,255,0.86) !important;
}

/* ================================================================
   КАТЕГОРИИ BOX-CATS — ПРЯМОЕ ПЕРЕОПРЕДЕЛЕНИЕ 🎯
   ================================================================ */

body[data-theme="4"] #box-cats,
body[data-theme="4"] #box-cats .ci,
body[data-theme="4"] .cg,
body[data-theme="4"] .cg .ci {
  color: rgba(255,255,255,0.86) !important;
  border-color: rgba(255,211,106,0.22) !important;
}

body[data-theme="4"] #box-cats .ci,
body[data-theme="4"] .cg .ci {
  background: rgba(14,16,19,0.72) !important;
  border: 1px solid rgba(255,211,106,0.22) !important;
}

body[data-theme="4"] #box-cats .ci p,
body[data-theme="4"] #box-cats .ci h3,
body[data-theme="4"] #box-cats .ci span,
body[data-theme="4"] .cg .ci p,
body[data-theme="4"] .cg .ci h3,
body[data-theme="4"] .cg .ci span {
  color: rgba(255,255,255,0.86) !important;
}

/* END BOX-CATS */


/* ================================================================
   INPUT ПОИСК КАТЕГОРИИ — СИНХРОНИЗИРОВАН С ПОИСКОМ КОНТРАГЕНТА
   ================================================================ */

body[data-theme="4"] #search-input {
  color: rgba(255,255,255,0.86) !important;
  border-color: rgba(255,211,106,0.22) !important;
  background: rgba(10,12,15,0.72) !important;
}

body[data-theme="4"] #search-input::placeholder {
  color: rgba(255,255,255,0.55) !important;
}

body[data-theme="4"] #search-input:focus {
  border-color: rgba(255,211,106,0.22) !important;
  box-shadow: 0 0 0 1px rgba(255,211,106,0.18), 0 0 0 4px rgba(255,211,106,0.10) !important;
}

/* END INPUT ПОИСК */


/* =========================================================
   🏆 КОНЕЦ: БЛОКИ КАТЕГОРИЙ ULTRA PREMIUM
   ========================================================= */
/* =========================================================
   НАЧАЛО ПАТЧА: OBSIDIAN — PREMIUM ACTIVE RING (MB + TYPES + CATS)
   Цель: как у идеального ободка категории (.ci.s), но для:
   1) Личное/Бизнес (кнопки .mb в верхнем тумблере)
   2) Расход/Приход (кнопки .mb в модалке #m-add)
   3) Категории (у тебя уже ок, оставляем как есть)
   Важно: без смены текста/заливки (чтобы не ломать цифры/контент).
   ========================================================= */

/* 0) База для всех .mb в обсидиане — спокойная, читабельная, без тяжёлых анимаций */
body[data-theme="4"] .tgl .mb{
  border: 1px solid rgba(255,211,106,0.12) !important;
  background: rgba(14,16,19,0.60) !important;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease !important;
  will-change: transform;
}

/* 1) АКТИВНАЯ КНОПКА (Личное/Бизнес и Расход/Приход) — тот же “ювелирный ободок” как у категории */
body[data-theme="4"] .tgl .mb.a{
  border-color: rgba(255,211,106,0.58) !important;

  /* “ювелирная нить” + мягкий ореол снаружи (как ты одобрил на категориях) */
  box-shadow:
    0 0 0 1px rgba(255,211,106,0.22),
    0 0 18px rgba(255,211,106,0.14),
    0 10px 26px rgba(0,0,0,0.60) !important;

  transform: translateY(-1px) !important;
}

/* 2) Нажатие — лёгкое, без “вязкости” и без тяжёлых теней */
body[data-theme="4"] .tgl .mb:active{
  transform: translateY(0px) scale(0.99) !important;
}

/* 3) Категории в модалке — оставляем твой идеальный стиль (не трогаем текст/фон) */
body[data-theme="4"] #m-add #box-cats.cg .ci{
  border: 1px solid rgba(255,211,106,0.12) !important;
}
body[data-theme="4"] #m-add #box-cats.cg .ci.s{
  border-color: rgba(255,211,106,0.58) !important;
  box-shadow:
    0 0 0 1px rgba(255,211,106,0.22),
    0 0 18px rgba(255,211,106,0.14),
    0 10px 26px rgba(0,0,0,0.60) !important;
}

/* =========================================================
   КОНЕЦ ПАТЧА
   ========================================================= */
   /* =====================================================
   OBSIDIAN — FORCE ACTIVE RING FOR INCOME / EXPENSE
   (ПРИХОД / РАСХОД — ЖЁСТКО)
   ===================================================== */

/* База */
body[data-theme="4"] #m-add button{
  border: 1px solid rgba(255,211,106,0.12) !important;
}

/* Активное состояние через aria-pressed */
body[data-theme="4"] #m-add button[aria-pressed="true"]{
  border-color: rgba(255,211,106,0.60) !important;

  box-shadow:
    0 0 0 1px rgba(255,211,106,0.22),
    0 0 18px rgba(255,211,106,0.14),
    0 10px 26px rgba(0,0,0,0.60) !important;
}

/* Актив через .a */
/* =====================================================
   OBSIDIAN — STRONG ACTIVE RING FOR INCOME / EXPENSE
   ===================================================== */

body[data-theme="4"] #m-add button.a{

  border-color: rgba(255,211,106,0.78) !important;

  box-shadow:
    0 0 0 1px rgba(255,211,106,0.38),
    0 0 26px rgba(255,211,106,0.22),
    0 12px 28px rgba(0,0,0,0.65) !important;

}

  box-shadow:
    0 0 0 1px rgba(255,211,106,0.22),
    0 0 18px rgba(255,211,106,0.14),
    0 10px 26px rgba(0,0,0,0.60) !important;
}
/* =====================================================
   OBSIDIAN PERFORMANCE FIX
   Убираем лаги и дергание
   ===================================================== */

/* 1) Запрещаем transition: all */
body[data-theme="4"] *{
  transition-property: border-color, box-shadow, transform, background-color, color !important;
}

/* 2) Упрощаем glow (GPU легче) */
body[data-theme="4"] .mb.a,
body[data-theme="4"] .ci.s,
body[data-theme="4"] #m-add button.a{
  box-shadow:
    0 0 0 1px rgba(255,211,106,0.25),
    0 8px 18px rgba(0,0,0,0.55) !important;
}

/* 3) Убираем тяжелые inset если есть */
body[data-theme="4"] .mb,
body[data-theme="4"] .ci{
  box-shadow:
    0 8px 18px rgba(0,0,0,0.55) !important;
}

/* 4) Говорим браузеру что двигается только transform */
body[data-theme="4"] .mb,
body[data-theme="4"] .ci,
body[data-theme="4"] .rb{
  will-change: transform;
}
/* НАЧАЛО ПАТЧА: THEME 4 — DATA+GOAL MODALS NO GLOW / NO GLASS / NO FLICKER (ANDROID) */

@media (pointer: coarse){

  /* 1) В этих двух модалках убираем любые намёки на стекло и тяжёлые эффекты */
  body[data-theme="4"] #m-data.md,
  body[data-theme="4"] #m-goal.md{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0,0,0,0.84) !important; /* плотный фон, без стекла */
  }

  body[data-theme="4"] #m-data .mc,
  body[data-theme="4"] #m-goal .mc{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(7,8,10,0.96) !important;  /* плотный “лак” */
    background-image: none !important;         /* убираем переливы */
    box-shadow: 0 22px 56px rgba(0,0,0,0.85) !important; /* 1 тень, дешево */
  }

  /* 2) Шапка: чтобы не было “просвета” и мигания из-за inherit */
  body[data-theme="4"] #m-data .mc-top,
  body[data-theme="4"] #m-goal .mc-top{
    background: rgba(7,8,10,0.98) !important;
    background-image: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255,211,106,0.14) !important;
  }

  /* 3) УБИРАЕМ ПОДСВЕТЫ (ореолы) на кнопках внутри этих модалок */
  body[data-theme="4"] #m-data .br,
  body[data-theme="4"] #m-goal .br,
  body[data-theme="4"] #m-data .mini,
  body[data-theme="4"] #m-goal .mini{
    background: rgba(10,12,15,0.96) !important;
    background-image: none !important;
    filter: none !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.65) !important; /* без ауры */
  }

  /* 4) Поля ввода в “Цели”: убираем стекло/свечения */
  body[data-theme="4"] #m-goal input,
  body[data-theme="4"] #m-goal textarea,
  body[data-theme="4"] #m-goal select{
    background: rgba(14,16,19,0.92) !important;
    background-image: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 22px rgba(0,0,0,0.55) !important;
  }

  /* 5) Ключ от мигания: на телефоне гасим переходы именно в этих модалках */
  body[data-theme="4"] #m-data,
  body[data-theme="4"] #m-goal,
  body[data-theme="4"] #m-data * ,
  body[data-theme="4"] #m-goal *{
    transition: none !important;
    animation: none !important;
  }

  /* 6) И отдельно: нажатие без фильтра яркости (filter = лаги) */
  body[data-theme="4"] #m-data .br:active,
  body[data-theme="4"] #m-goal .br:active,
  body[data-theme="4"] #m-data .mini:active,
  body[data-theme="4"] #m-goal .mini:active{
    filter: none !important;
  }
}

/* КОНЕЦ ПАТЧА: THEME 4 — DATA+GOAL MODALS NO GLOW / NO GLASS / NO FLICKER (ANDROID) */
/* НАЧАЛО ПАТЧА: THEME 4 — HARD KILL GLASS (MOBILE, GLOBAL) */
@media (pointer: coarse){
  /* Убираем “просвет” (альфа) — именно он даёт эффект стекла */
  body[data-theme="4"] .md,
  body[data-theme="4"] .m{
    background: rgba(0,0,0,0.92) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body[data-theme="4"] .md .mc,
  body[data-theme="4"] .m .mc,
  body[data-theme="4"] .an-card,
  body[data-theme="4"] .cd,
  body[data-theme="4"] .mb,
  body[data-theme="4"] .ci,
  body[data-theme="4"] .ii{
    background: rgba(7,8,10,1) !important;   /* 1 = без стекла */
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
/* КОНЕЦ ПАТЧА: THEME 4 — HARD KILL GLASS (MOBILE, GLOBAL) */
/* НАЧАЛО ПАТЧА: ТЕМА 4 — ДОБИТЬ СТЕКЛО ВЕЗДЕ (ТОЛЬКО ТЕЛЕФОН) */
@media (pointer: coarse){

  /* 1) Глобально вырубаем размытие в теме 4, где бы оно ни пряталось */
  body[data-theme="4"] *,
  body[data-theme="4"] *::before,
  body[data-theme="4"] *::after{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* 2) Делает “плотный лак” вместо стекла для основных блоков */
  body[data-theme="4"] .md,
  body[data-theme="4"] .m{
    background: rgba(0,0,0,0.92) !important;
  }

  body[data-theme="4"] .mc,
  body[data-theme="4"] .cd,
  body[data-theme="4"] .mb,
  body[data-theme="4"] .ci,
  body[data-theme="4"] .ii,
  body[data-theme="4"] .an-card,
  body[data-theme="4"] .search-box,
  body[data-theme="4"] .rb,
  body[data-theme="4"] .br,
  body[data-theme="4"] .mini,
  body[data-theme="4"] .cat-btn{
    background: rgba(7,8,10,1) !important;   /* 1 = без стекла */
    background-image: none !important;
  }

  /* 3) Убираем “ореолы” и тяжёлые подсветы (часто выглядят как стекло) */
  body[data-theme="4"] .cd,
  body[data-theme="4"] .mb,
  body[data-theme="4"] .ci,
  body[data-theme="4"] .ii,
  body[data-theme="4"] .an-card,
  body[data-theme="4"] .rb,
  body[data-theme="4"] .br,
  body[data-theme="4"] .mini,
  body[data-theme="4"] .cat-btn{
    filter: none !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.78) !important;
  }
}
/* КОНЕЦ ПАТЧА: ТЕМА 4 — ДОБИТЬ СТЕКЛО ВЕЗДЕ (ТОЛЬКО ТЕЛЕФОН) */
/* НАЧАЛО ПАТЧА: THIN HEADER FULL WIDTH (CARD + EXTRA) */

/* делаем верх модалки компактнее именно для этих двух экранов */
#m-view .mc,
#m-extra .mc{
  padding-top: 10px !important; /* было 16px — это и делает “толстую полосу” */
}

/* шапка */
#m-view .mc-top,
#m-extra .mc-top{
  margin-bottom: 6px !important;  /* было 10px */
  gap: 8px !important;
}

/* заголовок в шапке (если это .mc-title) */
#m-view .mc-top .mc-title,
#m-extra .mc-top .mc-title{
  font-size: 14px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

/* крестик/кнопка закрытия — главный “раздуватель” высоты */
#m-view .mc-top .mini,
#m-extra .mc-top .mini{
  width: 34px !important;
  height: 34px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  padding: 0 !important;
}

/* КОНЕЦ ПАТЧА: THIN HEADER FULL WIDTH (CARD + EXTRA) */
/* ==============================
   PERIOD BUTTONS — OBSIDIAN LUX (v2)
   Статичный ободок ярче
   Текст НЕ жёлтый
   ============================== */

.rb{ border-radius:14px !important; }

/* ВСЕ КНОПКИ ПЕРИОДА — постоянный премиум-ободок (ярче), текст бело-серый */
.period .rb,
.range-row .rb,
.filters .rb{
  background: linear-gradient(180deg, rgba(18,20,24,0.90) 0%, rgba(10,12,16,0.90) 100%) !important;

  /* ободок ярче */
  border: 1px solid rgba(255,211,106,0.32) !important;

  /* текст НЕ жёлтый */
  color: rgba(255,255,255,0.82) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 24px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,211,106,0.08) !important;
}

/* АКТИВНАЯ — ободок ещё ярче, текст чуть теплее (не “лимон”) */
.period .rb.a,
.range-row .rb.a,
.filters .rb.a{
  border-color: rgba(255,211,106,0.60) !important;
  color: rgba(255,255,255,0.92) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 0 0 1px rgba(255,211,106,0.18),
    0 16px 36px rgba(0,0,0,0.72) !important;
}
/* НАЧАЛО ПАТЧА: PLACEHOLDER COLOR — SEARCH INPUT + DEBT SEARCH */
body[data-theme="4"] #search-input::placeholder,
body[data-theme="4"] #search-debt::placeholder{
  color: rgba(255,211,106,0.26) !important;
}
/* КОНЕЦ ПАТЧА: PLACEHOLDER COLOR — SEARCH INPUT + DEBT SEARCH */
/* НАЧАЛО ПАТЧА: INPUT TEXT COLOR SYNC (MAIN + DEBT SEARCH) */
body[data-theme="4"] #search-input,
body[data-theme="4"] #search-debt{
  color: rgba(255,255,255,0.92) !important;     /* введённый текст */
  caret-color: rgba(255,211,106,0.75) !important;/* курсор */
}
/* КОНЕЦ ПАТЧА: INPUT TEXT COLOR SYNC (MAIN + DEBT SEARCH) */
/* НАЧАЛО ПАТЧА: MOBILE WIDER — .c + MODALS (.mc) */
@media (max-width: 520px){

  /* 1) Главный контейнер приложения (.c) — убираем “узкий коридор” */
  .c{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* 2) Карточки/блоки на главной и в долгах — во всю ширину */
  .sb, .cd, .it, .goal-mini, .search-box, #list, #d-list{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 3) Модалки: контейнер (.mc) — делаем шире под экран */
  .md .mc{
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 4) Док-превью (накладные) — тоже во всю ширину модалки */
  .doc{
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* КОНЕЦ ПАТЧА: MOBILE WIDER — .c + MODALS (.mc) */
/* НАЧАЛО ПАТЧА: MODAL WIDTH FULLER (PHONE) */
/* Делаем все модалки шире: почти во всю ширину экрана, с безопасными отступами */
.md .mc{
  width: calc(100vw - 20px) !important;   /* почти во всю ширину */
  max-width: 760px !important;           /* чтобы на планшете/десктопе не раздувало */
}

@media (max-width: 480px){
  .md .mc{
    width: calc(100vw - 16px) !important; /* чуть шире на мелких экранах */
  }
}
/* КОНЕЦ ПАТЧА: MODAL WIDTH FULLER (PHONE) */
/* НАЧАЛО ПАТЧА: MC SCROLL + SAFE BOTTOM */
.mc{
  max-height: 98dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* чтобы низ не обрезался и кнопки были видны */
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
/* КОНЕЦ ПАТЧА: MC SCROLL + SAFE BOTTOM */
/* НАЧАЛО ПАТЧА: MODALS FULL WIDTH ON PHONE */
@media (max-width: 680px){
  /* оверлей модалки — часто именно его padding делает модалку “узкой” */
  .md{
    padding: 10px !important;
  }

  /* контейнер модалки — даём занять всю доступную ширину */
  .md .mc{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}
/* КОНЕЦ ПАТЧА: MODALS FULL WIDTH ON PHONE */
/* НАЧАЛО ПАТЧА: MODALS FULL-WIDTH (MOBILE) */
@media (max-width: 560px){
  /* модалка-оверлей */
  .md{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }


/* END PATCH: MODAL MC FULL WIDTH (MOBILE) */
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* на всякий: бумажный превью-блок тоже растягиваем по контейнеру */
  .md .mc .doc{
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* // START PATCH: INNER SHIPMENT & PURCHASE DOC FULL WIDTH */
.mc .ship-doc,
.mc .invoice,
.mc .sheet,
.mc .paper,
.mc .print{
  width: calc(100% + 20px) !important;
  margin-left: -10px !important;
  margin-right: -10px !important;
  box-sizing: border-box !important;
}
/* // END PATCH */
/* КОНЕЦ ПАТЧА: MODALS FULL-WIDTH (MOBILE) */
/* ===== ACTIVE PERIOD BUTTON ===== */

.rb.a {
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 0 8px rgba(255,255,255,0.2);
}
/* НАЧАЛО ПАТЧА: GOLD ACTIVE PERIOD BUTTON */
.catRcontrols .br.on{
  border-color: #FFD36A !important;
  background: rgba(255,211,106,.10) !important;
  color: #FFD36A !important;
  box-shadow:
    0 0 0 1px rgba(255,211,106,.35) inset,
    0 8px 20px rgba(0,0,0,.55);
}
/* КОНЕЦ ПАТЧА: GOLD ACTIVE PERIOD BUTTON */
/* TEST — ищем кто сжимает модалку */
.mc * {
  max-width: none !important;
}
/* // START PATCH: MOBILE MC PADDING TUNE (WIDTH ONLY FEEL) */
@media (max-width: 680px){
  .md .mc{
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }
}
/* // END PATCH: MOBILE MC PADDING TUNE (WIDTH ONLY FEEL) */
/* НАЧАЛО ПАТЧА: MOBILE MODAL INNER WIDTH (MC PADDING TUNE) */
@media (max-width: 680px){
  .md .mc{
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }
}
/* КОНЕЦ ПАТЧА: MOBILE MODAL INNER WIDTH (MC PADDING TUNE) */
/* START PATCH: INNER BLOCKS FULL WIDTH (MOBILE) */
/* Контракт: модалку НЕ трогаем. Растягиваем только внутренние блоки (превью накладной). */
@media (max-width: 680px){
  .md .mc .doc,
  .md .mc .doc *{
    box-sizing: border-box !important;
  }
  .md .mc .doc{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* END PATCH: INNER BLOCKS FULL WIDTH (MOBILE) */
/* // START PATCH: HIDE SCROLLBARS EVERYWHERE (KEEP SCROLL) */
html, body{
  scrollbar-width: none !important;          /* Firefox */
  -ms-overflow-style: none !important;       /* old Edge/IE */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}

*{
  scrollbar-width: none !important;          /* Firefox */
  -ms-overflow-style: none !important;       /* old Edge/IE */
}

*::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}
/* // END PATCH: HIDE SCROLLBARS EVERYWHERE (KEEP SCROLL) */
/* // НАЧАЛО ПАТЧА: DOBOR DUE DATE LABEL INSIDE */
#extra-due-wrap{
  position: relative !important;
}

#extra-due-wrap .in-date-title{
  position: absolute !important;
  left: 16px !important;
  top: 18px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  opacity: .75 !important;
  pointer-events: none !important;
  z-index: 5 !important;
  margin: 0 !important;
}

#extra-due-wrap #e-due{
  width: 100% !important;
  padding-top: 20px !important; /* место под внутренний лейбл */
}
/* // КОНЕЦ ПАТЧА: DOBOR DUE DATE LABEL INSIDE */
/* // НАЧАЛО ПАТЧА: ДОБОР — UI РАСХОДОВ (exp-box) */
.exp-box{
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
}

.exp-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.exp-title{
  font-weight: 700;
  opacity: .9;
}

.exp-list{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exp-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.exp-row .t{
  opacity: .9;
  font-weight: 700;
}

.exp-row .a{
  opacity: .95;
  white-space: nowrap;
  font-weight: 800;
}

.exp-sum{
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  opacity: .95;
}
/* // КОНЕЦ ПАТЧА: ДОБОР — UI РАСХОДОВ (exp-box) */
/* // НАЧАЛО ПАТЧА: DOBOR — PICK ROW + ИТОГО РАСХОДОВ */
.pick-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-radius:14px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  cursor:pointer;
}

.pick-row span{ opacity:.95; font-weight:700; }

.pick-row .arr{
  opacity:.75;
  font-weight:900;
  font-size:18px;
  line-height:1;
}

.mini-sum{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 4px 0;
  opacity:.92;
}

.mini-sum b{ font-weight:900; }
/* // КОНЕЦ ПАТЧА: DOBOR — PICK ROW + ИТОГО РАСХОДОВ */
/* // НАЧАЛО ПАТЧА: FORCE BORDER (DOBOR EXP WRAP) */
#m-extra #extra-exp-wrap{
  padding: 12px !important;
  border-radius: 16px !important;

  /* железный ободок */
  border: 1px solid rgba(255,255,255,.18) !important;

  /* чуть отличим от фона */
  background: rgba(255,255,255,.03) !important;

  /* чтобы визуально было видно даже на тёмном */
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset !important;
}

#m-extra #extra-exp-wrap .exp-wrap-top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding: 2px 4px 10px !important;
  opacity: .92 !important;
}

#m-extra #extra-exp-wrap .exp-wrap-top b{
  font-weight: 900 !important;
}

#m-extra #extra-exp-wrap .pick-row{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:14px 14px !important;
  border-radius:14px !important;

  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.14) !important;

  color: inherit !important;
}

#m-extra #extra-exp-wrap .pick-row .arr{
  opacity:.75 !important;
  font-weight:900 !important;
  font-size:18px !important;
  line-height:1 !important;
}
/* // КОНЕЦ ПАТЧА: FORCE BORDER (DOBOR EXP WRAP) */
/* // НАЧАЛО ПАТЧА: MODAL OVERSCROLL FIX */
.md .mc { 
  overscroll-behavior: contain;
}
/* // КОНЕЦ ПАТЧА: MODAL OVERSCROLL FIX */
/* // НАЧАЛО ПАТЧА: INPUT FONT SIZE 16 (ANTI-ZOOM) */
input, select, textarea { 
  font-size: 16px; 
}
/* // КОНЕЦ ПАТЧА: INPUT FONT SIZE 16 (ANTI-ZOOM) */
/* // НАЧАЛО ПАТЧА: INPUT FONT SIZE 16 (ANTI-ZOOM) */
input, select, textarea { 
  font-size: 16px; 
}
/* // КОНЕЦ ПАТЧА: INPUT FONT SIZE 16 (ANTI-ZOOM) */
/* // НАЧАЛО ПАТЧА: DOBOR — NO FLICKER (DISABLE TRANSITIONS + ISOLATE PREVIEW) */

/* 1) отключаем любые переходы/анимации ТОЛЬКО внутри модалки Добор */
#m-extra, 
#m-extra * {
  transition: none !important;
  animation: none !important;
}

/* 2) изолируем бумажное превью, чтобы оно не дергало слой модалки */
#extra-doc-preview {
  contain: layout paint !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
}

/* 3) если где-то есть blur/backdrop-filter на карточках — вырубаем внутри Добора */
#m-extra .mc,
#m-extra .doc,
#m-extra .card,
#m-extra .glass {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* // КОНЕЦ ПАТЧА: DOBOR — NO FLICKER (DISABLE TRANSITIONS + ISOLATE PREVIEW) */
/* НАЧАЛО ПАТЧА: DANGER CONFIRM BUTTON */
#m-confirm-ok{
  background: rgba(150, 20, 20, 0.55) !important;
  border: 1px solid rgba(255, 80, 80, 0.55) !important;
  box-shadow: 0 10px 26px rgba(255, 0, 0, 0.18), 0 0 0 1px rgba(255, 0, 0, 0.12) inset !important;
  color: #fff !important;
}

#m-confirm-ok:active{
  transform: translateY(1px) scale(0.99) !important;
  box-shadow: 0 6px 18px rgba(255, 0, 0, 0.14), 0 0 0 1px rgba(255, 0, 0, 0.10) inset !important;
}
/* КОНЕЦ ПАТЧА: DANGER CONFIRM BUTTON */
/* === ПОЛОСКА ПОДОТЧЁТА === */
.advance-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  margin:10px auto 14px;
  padding:6px 14px;

  width:fit-content;
  max-width:92%;

  border-radius:999px;

  border:1px solid rgba(231,185,90,0.35); /* тонкое золото */

  background:rgba(255,255,255,0.03);

  font-weight:700;
  font-size:14px;
  letter-spacing:0.3px;

  backdrop-filter: blur(6px);

  white-space:nowrap; /* ❗ запрет переноса */
}
.advance-strip b{
  font-weight:800;
  color:#E7B95A;
}