/* ============================================================================
RG Hub · единая дизайн-система · /lib/rg-ui.css · v1.0 (21.09.2026)
ЗАЧЕМ. Стиль кабинета менеджера (app.html) был заперт в одном файле —
остальные шесть кабинетов о нём не знали. Здесь он вынесен наружу, чтобы
подключаться одной строкой и применяться по всей системе.
КАК ПОДКЛЮЧАТЬ.
← обязательно: иначе Auto Dark
Mode браузера инвертирует цвета
ПРАВИЛО ИМЁН. Все классы здесь начинаются с rg- . Это сделано намеренно:
в кабинетах уже есть свои .card, .row, .btn, и без префикса они бы
конфликтовали. Переводить экраны можно по одному, старая вёрстка при этом
продолжает работать.
ПРАВИЛО СТЕКЛА. Эффект стекла (.rg-glass) — ТОЛЬКО на навигации: шапка,
боковая панель, нижняя панель, плавающие кнопки. Контент — плотный,
на матовых поверхностях. Стекло на таблицах делает цифры нечитаемыми.
========================================================================== */
/* ---------------------------------------------------------------- ТОКЕНЫ -- */
:root{
/* поверхности: глубина задаётся не тенью, а тоном */
--rg-bg0:#0F1114; /* фон страницы */
--rg-bg1:#16191E; /* нижний край градиента */
--rg-surface:#1B1F25; /* карточка */
--rg-surface2:#21262D; /* карточка при наведении */
--rg-border:#2A2F37;
--rg-divider:#242A31;
/* текст: четыре уровня, больше не нужно */
--rg-text:#F2F4F7;
--rg-text2:#C3CAD3;
--rg-muted:#8A94A3;
--rg-dim:#5E6875;
/* фирменный */
--rg-gold:#E8B84B;
--rg-gold-soft:rgba(232,184,75,.14);
/* смысловые пары для тайлов: первый — светлый край градиента */
--rg-cash1:#22D3EE; --rg-cash2:#0E7490; /* деньги, выручка */
--rg-work1:#6366F1; --rg-work2:#3730A3; /* работа, машины */
--rg-dop1:#A855F7; --rg-dop2:#DB2777; /* допродажи */
--rg-todo1:#F59E0B; --rg-todo2:#B45309; /* задачи, внимание */
--rg-ins1:#3B82F6; --rg-ins2:#1D4ED8; /* страховые */
/* состояния */
--rg-ok:#34D399;
--rg-bad:#FB7185;
--rg-warn:#FBBF24;
--rg-font-head:'Sora',system-ui,-apple-system,sans-serif;
--rg-font-text:'Inter',system-ui,-apple-system,sans-serif;
--rg-font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
--rg-r-tile:24px;
--rg-r-card:16px;
--rg-r-field:14px;
--rg-r-pill:999px;
--rg-spring:cubic-bezier(.34,1.56,.64,1);
--rg-ease:cubic-bezier(.2,.8,.2,1);
--rg-row-h:48px; /* плотность строки таблицы: 40 плотная, 56 свободная */
--rg-tab-h:64px;
--rg-wrap:1240px;
--rg-wrap-wide:1800px; /* для табличных экранов: график, ведомость */
}
/* -------------------------------------------------------------- ОСНОВА --- */
.rg *,.rg *::before,.rg *::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body.rg{
margin:0;min-height:100%;
background:radial-gradient(120% 80% at 8% 0%,rgba(255,255,255,.07),transparent 55%),
linear-gradient(180deg,var(--rg-bg0),var(--rg-bg1));
background-attachment:fixed;
color:var(--rg-text);
font-family:var(--rg-font-text);font-size:14px;line-height:1.45;
}
/* Числа ВСЕГДА моноширинными цифрами и вправо — иначе колонка сумм «пляшет» */
.rg-num{font-family:var(--rg-font-head);font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.02em}
.rg-mono{font-family:var(--rg-font-mono);font-variant-numeric:tabular-nums;font-weight:500;font-size:12px;letter-spacing:.02em}
.rg-h1{margin:0;font:700 20px/1.2 var(--rg-font-head)}
.rg-h2{margin:0;font:700 16px/1.25 var(--rg-font-head)}
.rg-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--rg-muted);font-weight:600}
.rg-sub{font-size:12px;color:var(--rg-muted)}
.rg-hidden{display:none!important}
.rg-wrap{max-width:var(--rg-wrap);margin:0 auto;padding:0 clamp(12px,3vw,24px)}
.rg-wrap-wide{max-width:var(--rg-wrap-wide)}
/* --------------------------------------------------------------- СТЕКЛО -- */
.rg-glass{
position:relative;
background:rgba(255,255,255,.06);
backdrop-filter:blur(18px) saturate(180%);
-webkit-backdrop-filter:blur(18px) saturate(180%);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.22);
}
.rg-glass::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 40%);
}
/* Запасной вариант: старые браузеры и ?noglass=1 — стекло становится матовым.
Проверено: без этого на Android 8 шапка превращается в белое пятно.
ВНИМАНИЕ: это ДВА отдельных правила. Объединять их запятой нельзя —
@supports не может стоять в списке селекторов, и браузер молча выбросит
весь блок вместе с ручным отключением стекла. */
body.rg-no-glass .rg-glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(27,31,37,.96)}
@supports not (backdrop-filter:blur(1px)){
.rg-glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(27,31,37,.96)}
}
/* ----------------------------------------------------------- НАВИГАЦИЯ --- */
.rg-ctx{
position:sticky;top:0;z-index:20;
margin:10px 0 0;padding:10px 14px;border-radius:18px;
display:flex;align-items:center;gap:10px;font-size:12px;color:var(--rg-text2);
}
.rg-ctx .rg-dot{width:7px;height:7px;border-radius:50%;background:var(--rg-ok);box-shadow:0 0 10px var(--rg-ok);animation:rg-pulse 4s ease-in-out infinite;flex:none}
.rg-ctx.rg-offline .rg-dot{background:var(--rg-warn);box-shadow:0 0 10px var(--rg-warn)}
.rg-ctx .rg-spacer{flex:1}
@keyframes rg-pulse{0%,100%{opacity:.55}50%{opacity:1}}
/* период как контекст, а не как навигация: «Зарплата ‹ Сентябрь 2026 ›» */
.rg-period{display:inline-flex;align-items:center;gap:8px;font:700 18px var(--rg-font-head)}
.rg-period button{background:none;border:0;color:var(--rg-muted);cursor:pointer;font-size:18px;padding:2px 6px;border-radius:8px;transition:color .2s,background .2s}
.rg-period button:hover{color:var(--rg-text);background:rgba(255,255,255,.06)}
.rg-side{display:flex;flex-direction:column;border-radius:22px;padding:18px 12px}
.rg-side-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--rg-text2);font-weight:500;cursor:pointer;transition:background .2s,color .2s;border:0;background:none;width:100%;text-align:left;font-size:14px}
.rg-side-item:hover{background:rgba(255,255,255,.05);color:var(--rg-text)}
.rg-side-item.rg-active{background:var(--rg-gold-soft);color:var(--rg-gold)}
.rg-side-item svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rg-side-cap{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--rg-dim);padding:14px 12px 6px}
/* вкладки: лентой, со скроллом на узком экране */
.rg-tabs{display:flex;gap:6px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:none}
.rg-tabs::-webkit-scrollbar{display:none}
.rg-tab{flex:none;padding:8px 14px;border-radius:var(--rg-r-pill);background:rgba(255,255,255,.06);color:var(--rg-text2);font-size:13px;font-weight:500;cursor:pointer;border:0;transition:transform .35s var(--rg-spring),background .2s,color .2s}
.rg-tab:active{transform:scale(.95)}
.rg-tab.rg-active{background:var(--rg-gold);color:#1A1405}
/* подчёркивание активной вкладки — второй вариант, для плотных экранов */
.rg-tabline{display:flex;gap:18px;border-bottom:1px solid var(--rg-divider);overflow-x:auto;scrollbar-width:none}
.rg-tabline::-webkit-scrollbar{display:none}
.rg-tabline button{flex:none;background:none;border:0;padding:10px 0 12px;color:var(--rg-muted);font:500 14px var(--rg-font-text);cursor:pointer;position:relative;transition:color .2s}
.rg-tabline button.rg-active{color:var(--rg-text)}
.rg-tabline button.rg-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--rg-gold)}
/* ------------------------------------------------------------- КНОПКИ ---- */
.rg-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
border:0;border-radius:var(--rg-r-field);padding:12px 18px;
font:600 14px var(--rg-font-text);cursor:pointer;color:var(--rg-text);
background:rgba(255,255,255,.08);
transition:transform .35s var(--rg-spring),filter .2s,background .2s;
min-height:44px; /* тап-зона: меньше 44px не попасть пальцем */
}
.rg-btn:hover{filter:brightness(1.12)}
.rg-btn:active{transform:scale(.97)}
.rg-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.rg-btn-primary{background:linear-gradient(135deg,var(--rg-cash1),var(--rg-cash2));color:#03141A}
.rg-btn-gold{background:var(--rg-gold);color:#1A1405}
.rg-btn-danger{background:rgba(251,113,133,.16);color:var(--rg-bad)}
.rg-btn-sm{padding:8px 12px;font-size:12.5px;min-height:36px;border-radius:10px}
.rg-btn-block{width:100%}
.rg-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* плавающая кнопка действия */
.rg-fab{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--rg-tab-h) + 26px);z-index:25;padding:14px 26px;border-radius:var(--rg-r-pill);font:600 14px var(--rg-font-text);color:var(--rg-text);cursor:pointer;border:0}
/* --------------------------------------------------------------- ПОЛЯ ---- */
.rg-field{display:block;margin-top:12px}
.rg-field > span{display:block;font-size:12px;color:var(--rg-muted);margin-bottom:6px}
.rg-input,.rg-select,.rg-textarea{
width:100%;background:rgba(0,0,0,.35);border:1px solid var(--rg-border);
border-radius:var(--rg-r-field);color:var(--rg-text);
font:500 16px var(--rg-font-text); /* 16px обязательно: iOS зумит поля мельче */
padding:12px 14px;outline:none;transition:border-color .2s;
}
.rg-input:focus,.rg-select:focus,.rg-textarea:focus{border-color:var(--rg-cash1)}
.rg-textarea{min-height:88px;resize:vertical}
.rg-search{display:flex;align-items:center;gap:10px;background:var(--rg-surface);border:1px solid var(--rg-border);border-radius:var(--rg-r-field);padding:10px 12px}
.rg-search input{flex:1;background:none;border:0;outline:none;color:var(--rg-text);font:500 15px var(--rg-font-text)}
.rg-search svg{width:18px;height:18px;stroke:var(--rg-muted);fill:none;stroke-width:1.6;flex:none}
/* ------------------------------------------------------------ КАРТОЧКИ -- */
.rg-card{background:var(--rg-surface);border:1px solid var(--rg-border);border-radius:var(--rg-r-card);margin-top:12px;overflow:hidden}
.rg-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px 8px}
.rg-card-h .rg-label{margin:0}
.rg-card-b{padding:0 14px 14px}
.rg-card-h + .rg-card-b{padding-top:2px}
/* строка списка: слева суть, справа сумма */
.rg-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--rg-divider)}
.rg-row:first-of-type{border-top:0}
.rg-row .rg-main{flex:1;min-width:0}
.rg-row .rg-ttl{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-row .rg-sub{font-size:12px;color:var(--rg-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-row .rg-sum{font-family:var(--rg-font-mono);font-variant-numeric:tabular-nums;font-size:13px;text-align:right;white-space:nowrap}
.rg-row.rg-tap{cursor:pointer}
.rg-row.rg-tap:hover{background:var(--rg-surface2)}
.rg-row.rg-late{box-shadow:inset 3px 0 0 var(--rg-todo1)}
/* --------------------------------------------------------------- ТАЙЛЫ -- */
.rg-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px}
.rg-tile{
position:relative;overflow:hidden;border-radius:var(--rg-r-tile);
padding:14px 16px;min-height:96px;color:#fff;cursor:default;
box-shadow:0 10px 30px rgba(0,0,0,.28);
animation:rg-rise .5s var(--rg-spring) both;
}
.rg-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 45%);pointer-events:none}
.rg-tile.rg-tap{cursor:pointer;transition:transform .45s var(--rg-spring)}
.rg-tile.rg-tap:active{transform:scale(.97)}
.rg-tile .rg-t-label{font-size:12px;opacity:.85}
.rg-tile .rg-t-big{font-size:32px;line-height:1.05;margin-top:2px;font-family:var(--rg-font-head);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rg-tile .rg-t-sub{font-size:11.5px;opacity:.85;margin-top:4px;font-family:var(--rg-font-mono)}
.rg-tile.rg-wide{grid-column:1/-1}
.rg-tile.rg-cash{background:linear-gradient(135deg,var(--rg-cash1),var(--rg-cash2))}
.rg-tile.rg-work{background:linear-gradient(135deg,var(--rg-work1),var(--rg-work2))}
.rg-tile.rg-dop{background:linear-gradient(135deg,var(--rg-dop1),var(--rg-dop2))}
.rg-tile.rg-todo{background:linear-gradient(135deg,var(--rg-todo1),var(--rg-todo2))}
.rg-tile.rg-ins{background:linear-gradient(135deg,var(--rg-ins1),var(--rg-ins2))}
@keyframes rg-rise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.rg-tiles .rg-tile:nth-child(2){animation-delay:.05s}
.rg-tiles .rg-tile:nth-child(3){animation-delay:.1s}
.rg-tiles .rg-tile:nth-child(4){animation-delay:.15s}
/* показатель без заливки — для плотных экранов, где тайлы были бы шумом */
.rg-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px}
.rg-kpi{background:var(--rg-surface);border:1px solid var(--rg-border);border-radius:var(--rg-r-card);padding:14px}
.rg-kpi .rg-k-label{font-size:11.5px;color:var(--rg-muted)}
.rg-kpi .rg-k-big{font-size:30px;line-height:1.05;margin-top:2px;font-family:var(--rg-font-head);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rg-kpi .rg-k-sub{font-size:11.5px;color:var(--rg-muted);margin-top:4px}
.rg-kpi.rg-accent .rg-k-big{color:var(--rg-gold)}
/* ------------------------------------------------------------- ПЛАШКИ --- */
.rg-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:var(--rg-r-pill);font-size:11.5px;font-weight:500;white-space:nowrap;background:rgba(255,255,255,.07);color:var(--rg-text2)}
.rg-pill i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;flex:none}
.rg-pill.rg-ok{color:var(--rg-ok)}
.rg-pill.rg-warn{color:var(--rg-warn)}
.rg-pill.rg-bad{color:var(--rg-bad)}
.rg-pill.rg-gold{background:var(--rg-gold-soft);color:var(--rg-gold)}
.rg-pill.rg-ins{color:#C4B5FD}
.rg-pill.rg-corp{color:#7DD3FC}
.rg-pill.rg-work{color:#93C5FD}
/* ------------------------------------------------------------ ТАБЛИЦЫ --- */
/* Правила: числа вправо и tabular-nums; единицы в заголовок, не в ячейку;
шапка липкая; вертикальных линий нет; итог — сменой фона, не цветом текста. */
.rg-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--rg-r-card);border:1px solid var(--rg-border);margin-top:12px}
table.rg-table{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--rg-surface)}
.rg-table thead th{
position:sticky;top:0;z-index:2;background:var(--rg-surface);
text-align:left;font:600 11px var(--rg-font-text);letter-spacing:.07em;text-transform:uppercase;
color:var(--rg-muted);padding:10px 12px;border-bottom:1px solid var(--rg-border);white-space:nowrap;
}
.rg-table tbody td{padding:0 12px;height:var(--rg-row-h);border-top:1px solid var(--rg-divider);vertical-align:middle}
.rg-table tbody tr:hover{background:var(--rg-surface2)}
.rg-table .rg-n{text-align:right;font-family:var(--rg-font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.rg-table .rg-neg{color:var(--rg-bad)}
.rg-table tr.rg-total td{background:rgba(255,255,255,.05);font-weight:600;border-top:1px solid var(--rg-border)}
.rg-table tr.rg-group td{background:rgba(255,255,255,.03);font:600 11px var(--rg-font-text);letter-spacing:.07em;text-transform:uppercase;color:var(--rg-muted);height:34px}
.rg-table.rg-dense tbody td{height:40px}
.rg-table .rg-first{position:sticky;left:0;background:var(--rg-surface);z-index:1} /* закреплённая колонка имён */
/* ----------------------------------------------------- СОСТОЯНИЯ ЭКРАНА - */
.rg-empty{padding:26px 14px;color:var(--rg-muted);font-size:13px;text-align:center}
.rg-empty b{display:block;color:var(--rg-text2);font-size:14px;margin-bottom:4px}
.rg-sk{background:linear-gradient(90deg,var(--rg-surface),var(--rg-surface2),var(--rg-surface));background-size:200% 100%;animation:rg-sk 1.4s linear infinite;border-radius:10px;height:14px}
.rg-sk + .rg-sk{margin-top:8px}
@keyframes rg-sk{to{background-position:-200% 0}}
.rg-note{margin-top:12px;padding:12px 14px;border-radius:var(--rg-r-field);font-size:13px;border:1px solid}
.rg-note-warn{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.30);color:#FCD9A0}
.rg-note-bad{background:rgba(251,113,133,.10);border-color:rgba(251,113,133,.30);color:#FFC7CF}
.rg-note-ok{background:rgba(52,211,153,.10);border-color:rgba(52,211,153,.28);color:#A7F3D0}
.rg-note-info{background:rgba(168,85,247,.10);border-color:rgba(168,85,247,.25);color:#E9D5FF}
.rg-note b{display:block;margin-bottom:3px}
.rg-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;padding:11px 18px;border-radius:14px;font-size:13.5px;z-index:60;transition:all .4s var(--rg-spring);pointer-events:none;max-width:88vw}
.rg-toast.rg-show{opacity:1;transform:translateX(-50%)}
/* шторка снизу на телефоне, окно по центру на десктопе */
.rg-sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.rg-sheet{width:100%;max-width:560px;max-height:86vh;overflow:auto;background:var(--rg-bg1);border:1px solid var(--rg-border);border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));animation:rg-up .32s var(--rg-ease)}
@keyframes rg-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.rg-sheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
@media(min-width:768px){
.rg-sheet-bg{align-items:center}
.rg-sheet{border-radius:20px;max-height:80vh}
}
/* полосы прогресса: план, доля, конверсия */
.rg-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.rg-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--rg-cash1),var(--rg-cash2));transition:width 1s var(--rg-spring)}
.rg-bar.rg-dop i{background:linear-gradient(90deg,var(--rg-dop1),var(--rg-dop2))}
.rg-bar.rg-gold i{background:linear-gradient(90deg,var(--rg-gold),#F3D27A)}
.rg-barline{display:grid;grid-template-columns:minmax(64px,90px) 1fr 56px;align-items:center;gap:10px;font-size:12.5px;padding:5px 0}
.rg-barline .rg-v{font-family:var(--rg-font-mono);text-align:right;color:var(--rg-text2)}
/* ---------------------------------------------------------- МОБИЛЬНОЕ --- */
@media(max-width:1023px){
.rg-side{display:none}
.rg-tabbar{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));height:var(--rg-tab-h);border-radius:28px;display:grid;z-index:30}
.rg-tabbar-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--rg-muted);font-size:10.5px;font-weight:500;cursor:pointer;background:none;border:0;transition:color .2s}
.rg-tabbar-item svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--rg-spring)}
.rg-tabbar-item.rg-active{color:var(--rg-gold)}
.rg-tabbar-item.rg-active svg{transform:translateY(-1px) scale(1.06)}
main.rg-main{padding-bottom:calc(var(--rg-tab-h) + 28px)}
.rg-table thead th,.rg-table tbody td{padding-left:10px;padding-right:10px}
}
@media(min-width:1024px){
.rg-tabbar{display:none}
.rg-shell{display:grid;grid-template-columns:220px 1fr;gap:0}
.rg-side{position:sticky;top:12px;height:calc(100dvh - 24px);margin:12px 0 12px 12px}
main.rg-main{padding:14px 20px 32px}
}
/* уважение к настройке «уменьшить движение» — иначе укачивает на анимациях */
@media(prefers-reduced-motion:reduce){
.rg *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* печать: убрать фон и навигацию, оставить цифры */
@media print{
body.rg{background:#fff;color:#000}
.rg-side,.rg-tabbar,.rg-fab,.rg-ctx{display:none!important}
.rg-card,.rg-table-wrap{border-color:#ccc;box-shadow:none}
.rg-table thead th,.rg-table tbody td{color:#000}
}