cat /home/a0440299/domains/uromed.su/public_html/assets/c
через: */
/* ----- Font ----- */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap');
/* ===== Reset & Variables ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#0a0e17;
--bg2:#111827;
--bg3:#1a2332;
--accent:#6c5ce7;
--accent2:#059669;
--accent-glow:rgba(108,92,231,0.10);
--text:#e2e8f0;
--text2:#94a3b8;
--text3:#64748b;
--border:#1e293b;
--nav-bg:rgba(10,14,23,0.85);
--card-bg:#111827;
--hover:#1a2332;
--radius:12px;
--radius-sm:8px;
--shadow:0 1px 3px rgba(0,0,0,0.3);
--success:#10b981;
--danger:#ef4444;
--warning:#f59e0b;
--input-border:#334155;
--input-bg:#0f172a;
}
[data-theme="light"]{
--bg:#f8fafc;
--bg2:#ffffff;
--bg3:#f1f5f9;
--accent:#6c5ce7;
--accent2:#059669;
--accent-glow:rgba(108,92,231,0.06);
--text:#0f172a;
--text2:#475569;
--text3:#94a3b8;
--border:#e2e8f0;
--nav-bg:rgba(255,255,255,0.85);
--card-bg:#ffffff;
--hover:#f1f5f9;
--shadow:0 1px 3px rgba(0,0,0,0.06);
--success:#16a34a;
--danger:#dc2626;
--warning:#d97706;
--input-border:#cbd5e1;
--input-bg:#f8fafc;
}
body{
font-family:'Inter',-apple-system,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
transition:background .3s,color .3s;
}
/* ===== Navigation ===== */
nav{
position:sticky;top:0;z-index:100;
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
background:var(--nav-bg);border-bottom:1px solid var(--border);
}
nav .nav-inner{
max-width:1200px;margin:0 auto;padding:0 20px;
display:flex;align-items:center;justify-content:space-between;height:60px;
}
.nav-brand{
display:flex;align-items:center;gap:10px;
font-weight:700;font-size:17px;color:var(--text);text-decoration:none;
}
.nav-brand svg{width:26px;height:26px;flex-shrink:0}
.nav-brand span{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{
display:flex;align-items:center;gap:7px;
padding:8px 16px;border-radius:var(--radius-sm);
font-size:14px;font-weight:500;text-decoration:none;
color:var(--text3);transition:all .15s;
}
.nav-link:hover{color:var(--text);background:var(--bg3)}
.nav-link.active{color:var(--accent);background:rgba(108,92,231,0.10)}
.nav-link svg{width:18px;height:18px;flex-shrink:0}
.nav-actions{display:flex;align-items:center;gap:8px}
.theme-btn{
background:none;border:none;cursor:pointer;padding:8px;
border-radius:8px;color:var(--text3);transition:all .2s;
display:flex;align-items:center;justify-content:center;
}
.theme-btn:hover{color:var(--text);background:var(--bg3)}
.theme-btn svg{width:20px;height:20px;display:block}
.theme-btn .sun-icon{display:none}
.theme-btn .moon-icon{display:block}
[data-theme="light"] .theme-btn .sun-icon{display:block}
[data-theme="light"] .theme-btn .moon-icon{display:none}
/* ===== Layout ===== */
.container{max-width:1200px;margin:0 auto;padding:24px 20px}
.page-header{margin-bottom:24px}
.page-header h1{font-size:24px;font-weight:700;margin-bottom:4px}
.page-header .subtitle{font-size:13px;color:var(--text3)}
/* ===== Stats Grid ===== */
.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:12px;margin-bottom:24px;
}
.stat-card{
background:var(--card-bg);border:1px solid var(--border);
border-radius:var(--radius);padding:18px;
transition:all .2s;
}
.stat-card:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.stat-card .stat-label{
font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
color:var(--text3);margin-bottom:6px;
}
.stat-card .stat-value{
font-size:28px;font-weight:800;color:var(--text);
line-height:1.1;
}
.stat-card .stat-change{
font-size:12px;font-weight:600;margin-top:4px;
}
.stat-card .stat-change.up{color:var(--success)}
.stat-card .stat-change.down{color:var(--danger)}
.stat-card .stat-change.neutral{color:var(--text3)}
.stat-card .stat-sublabel{font-size:11px;color:var(--text3);margin-top:2px}
/* ===== Charts ===== */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
@media(max-width:800px){.charts-grid{grid-template-columns:1fr}}
.chart-box{
background:var(--card-bg);border:1px solid var(--border);
border-radius:var(--radius);padding:20px;
}
.chart-box h3{
display:flex;align-items:center;gap:8px;
font-size:14px;font-weight:600;color:var(--text2);
margin-bottom:14px;
}
.chart-box h3 svg{width:18px;height:18px;flex-shrink:0;color:var(--accent)}
.chart-box canvas{max-height:220px}
/* ===== Data Tables ===== */
.data-section{
background:var(--card-bg);border:1px solid var(--border);
border-radius:var(--radius);padding:20px;margin-bottom:16px;
}
.data-section .section-header{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:14px;
}
.data-section .section-header h3{
display:flex;align-items:center;gap:8px;
font-size:14px;font-weight:600;color:var(--text2);
}
.data-section .section-header h3 svg{width:18px;height:18px;color:var(--accent)}
.data-section .section-header .badge{
font-size:11px;padding:3px 10px;border-radius:100px;
background:rgba(108,92,231,0.10);color:var(--accent);font-weight:600;
}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{
text-align:left;padding:8px 10px;font-weight:600;
color:var(--text3);border-bottom:1px solid var(--border);
font-size:11px;text-transform:uppercase;letter-spacing:.5px;
}
.data-table td{
padding:8px 10px;border-bottom:1px solid var(--border);
color:var(--text);
}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--hover)}
.data-table .num{font-weight:600;font-variant-numeric:tabular-nums}
.data-table .num.highlight{color:var(--accent2)}
.data-table .dim{color:var(--text3)}
/* ===== GEO Keywords ===== */
.geo-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:10px;margin-bottom:16px;
}
.geo-card{
display:flex;align-items:center;gap:12px;
background:var(--bg3);border:1px solid var(--border);
border-radius:var(--radius-sm);padding:12px 14px;
transition:all .15s;
}
.geo-card:hover{border-color:var(--accent)}
.geo-card .geo-icon{
width:36px;height:36px;border-radius:8px;
background:rgba(108,92,231,0.10);color:var(--accent);
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.geo-card .geo-icon svg{width:18px;height:18px}
.geo-card .geo-info{flex:1;min-width:0}
.geo-card .geo-keyword{font-size:13px;font-weight:600;color:var(--text)}
.geo-card .geo-location{font-size:11px;color:var(--text3)}
.geo-card .geo-stats{text-align:right;flex-shrink:0}
.geo-card .geo-visits{font-size:15px;font-weight:700;color:var(--accent2)}
.geo-card .geo-trend{font-size:11px;font-weight:600}
.geo-card .geo-position{font-size:11px;font-weight:500;color:var(--text3);margin-top:2px}
/* ===== Footer ===== */
.page-footer{
text-align:center;padding:20px 0;
font-size:12px;color:var(--text3);border-top:1px solid var(--border);
margin-top:16px;
}
.page-footer a{color:var(--accent);text-decoration:none}
.page-footer a:hover{text-decoration:underline}
/* ===== Empty State ===== */
.empty-state{text-align:center;padding:40px 20px;color:var(--text3);font-size:14px}
/* ===== Forms & Buttons ===== */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
textarea, select {
padding:8px 12px;border-radius:var(--radius-sm);
border:1px solid var(--border);background:var(--bg3);
color:var(--text);font-family:'Inter',sans-serif;font-size:13px;
outline:none;transition:border-color .2s;
}
input:focus, textarea:focus, select:focus{border-color:var(--accent)}
.btn{
display:inline-flex;align-items:center;gap:6px;
padding:8px 18px;border-radius:var(--radius-sm);
border:none;font-size:13px;font-weight:600;cursor:pointer;
transition:all .15s;text-decoration:none;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{opacity:0.9}
.btn-success{background:var(--accent2);color:#fff}
.btn-success:hover{opacity:0.9}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{opacity:0.9}
.btn-ghost{
background:transparent;color:var(--text3);border:1px solid var(--border);
}
.btn-ghost:hover{background:var(--bg3);color:var(--text)}
/* ===== Alerts ===== */
.alert{
padding:12px 16px;border-radius:var(--radius-sm);
font-size:13px;margin-bottom:12px;
}
.alert-info{background:rgba(108,92,231,0.10);border:1px solid rgba(108,92,231,0.2);color:var(--accent)}
.alert-success{background:rgba(16,185,129,0.10);border:1px solid rgba(16,185,129,0.2);color:var(--success)}
.alert-danger{background:rgba(239,68,68,0.10);border:1px solid rgba(239,68,68,0.2);color:var(--danger)}
/* ===== Cards ===== */
.card{
background:var(--card-bg);border:1px solid var(--border);
border-radius:var(--radius);padding:20px;margin-bottom:16px;
}
.card-title{
font-size:14px;font-weight:600;color:var(--text2);
margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
/* ===== Smooth scrollbar ===== */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}
/* ===== Responsive ===== */
@media(max-width:640px){
.nav-inner{padding:0 12px}
.nav-link span{display:none}
.stats-grid{grid-template-columns:repeat(2,1fr);gap:8px}
.stat-card{padding:14px}
.stat-card .stat-value{font-size:22px}
.container{padding:16px 12px}
.geo-grid{grid-template-columns:1fr}
}
[a0440299@embla ~]
/* ===== Chat Panel — диалоги ===== */
/* Stats cards for dialogues */
.chat-stats{display:flex;gap:10px;margin-bottom:20px}
.chat-stat{
flex:1;background:var(--card-bg);border:1px solid var(--border);
border-radius:var(--radius);padding:14px;
text-align:center;cursor:pointer;display:block;
text-decoration:none;color:var(--text);
transition:all .15s;
}
.chat-stat:hover{transform:translateY(-2px);border-color:var(--accent)}
.chat-stat.active{border-color:var(--accent);background:rgba(108,92,231,0.06)}
.chat-stat .num{font-size:28px;font-weight:700;color:var(--accent)}
.chat-stat .label{font-size:12px;color:var(--text3);margin-top:4px}
/* Search */
.search-bar{margin-bottom:12px}
.search-bar input{
width:100%;padding:8px 14px;border-radius:20px;
border:1px solid var(--border);background:var(--bg3);
color:var(--text);font-family:'Inter',sans-serif;font-size:14px;
outline:none;transition:border-color .2s;
}
.search-bar input:focus{border-color:var(--accent)}
/* Filter bar */
.filter-bar{font-size:13px;color:var(--text3);margin-bottom:12px}
.filter-bar a{color:var(--accent);text-decoration:none}
.filter-bar a:hover{text-decoration:underline}
/* Conversation card */
.conv{
background:var(--card-bg);border:1px solid var(--border);
border-radius:var(--radius);padding:12px 16px;
margin-bottom:8px;transition:all .15s;cursor:pointer;
}
.conv:hover{background:var(--bg3);border-color:var(--accent)}
.conv.new{border-left:3px solid var(--danger)}
.conv .top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:3px}
.conv .left{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.conv .phone{font-weight:600;font-size:15px;white-space:nowrap;color:var(--text)}
.conv .phone .no-phone{color:var(--text3);font-weight:400;font-size:13px}
.conv .name{font-size:13px;color:var(--text2)}
.conv .badge{font-size:10px;padding:2px 8px;border-radius:8px;margin-left:4px;display:inline-block;vertical-align:middle}
.conv .badge-new{background:var(--danger);color:#fff}
.conv .badge-read{background:var(--bg3);color:var(--text3)}
.conv .badge-appt{background:var(--success);color:#fff}
.conv .time{font-size:11px;color:var(--text3);white-space:nowrap}
.conv .msg{font-size:13px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .meta{font-size:11px;color:var(--text3);margin-top:4px;display:flex;gap:12px}
.conv .actions{margin-top:6px;display:flex;gap:8px}
.conv .actions a{font-size:11px;color:var(--text3);text-decoration:none;padding:2px 8px;border-radius:4px;border:1px solid var(--border)}
.conv .actions a:hover{background:var(--bg3);color:var(--text)}
.conv .actions a.danger:hover{color:var(--danger);border-color:var(--danger)}
/* Conversation view (single dialog) */
.conv-view{
background:var(--card-bg);border:1px solid var(--border);
border-radius:var(--radius);padding:16px;margin-bottom:16px;
}
.conv-view .back{font-size:13px;color:var(--accent);text-decoration:none;display:inline-block;margin-bottom:12px}
.conv-view .back:hover{text-decoration:underline}
.conv-view h1{font-size:20px;font-weight:700;color:var(--text);margin-bottom:4px;display:flex;align-items:center;gap:10px}
.conv-view h1 small{font-size:12px;font-weight:400;color:var(--text3)}
.conv-view .msg-row{
padding:10px 14px;margin-bottom:8px;border-radius:12px;
max-width:85%;font-size:14px;line-height:1.5;
}
.conv-view .msg-user{
background:var(--accent2);color:#fff;margin-left:auto;
border-bottom-right-radius:4px;
}
.conv-view .msg-bot{
background:var(--bg3);color:var(--text);
border:1px solid var(--border);border-bottom-left-radius:4px;
}
.conv-view .msg-meta{font-size:10px;color:var(--text3);margin-top:4px;text-align:right}
.conv-view .msg-bot .msg-meta{text-align:left}
/* Empty state for dialogues */
.empty{text-align:center;padding:40px 20px;color:var(--text3);font-size:14px}
/* Refresh indicator */
.refresh{font-size:12px;color:var(--text3);text-align:center;margin-top:16px}
.refresh a{color:var(--accent);text-decoration:none}
/* Page title in dialogues */
.page-title-dialogues{
display:flex;align-items:center;gap:10px;
font-size:20px;font-weight:700;color:var(--text);margin-bottom:16px;
}
/* ===== Panel diagolov (chat.php) ===== */
.stats{display:flex;gap:10px;margin-bottom:16px}
.stats .stat-card{flex:1;background:var(--card-bg);border:2px solid transparent;border-radius:var(--radius);padding:14px 16px;text-align:center;cursor:pointer;box-shadow:var(--shadow);text-decoration:none;color:var(--text);display:block;transition:all .15s}
.stats .stat-card:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,0.2)}
.stats .stat-card.active{border-color:var(--accent);background:rgba(108,92,231,0.06)}
.stats .stat-card .num{font-size:26px;font-weight:800;color:var(--accent)}
.stats .stat-card .label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.sf{display:flex;gap:10px;margin-bottom:16px;align-items:center}
.sf .sw{position:relative;flex:1}
.sf .sw svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none}
.sf input{width:100%;padding:10px 14px 10px 38px;border:2px solid var(--input-border);border-radius:var(--radius-sm);font-size:14px;outline:none;background:var(--input-bg);color:var(--text);transition:border-color .2s;font-family:inherit}
.sf input:focus{border-color:var(--accent)}
.sf a{padding:8px 12px;color:var(--text3);text-decoration:none;font-size:14px;transition:color .15s}
.sf a:hover{color:var(--accent)}
.tw{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto}
.tw table{width:100%;border-collapse:collapse;min-width:800px}
.tw th{text-align:left;padding:10px 12px;font-size:11px;text-transform:uppercase;color:var(--text3);background:var(--bg3);border-bottom:2px solid var(--border);letter-spacing:.5px;white-space:nowrap;cursor:pointer;user-select:none;font-weight:600}
.tw th:hover{color:var(--accent)}
.tw td{padding:9px 12px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
.tw tr:last-child td{border-bottom:none}
.tw tr:hover td{background:var(--hover)}
.tw tr.new td{background:rgba(16,185,129,0.04)}
.tw tr.new:hover td{background:rgba(16,185,129,0.08)}
.nc{color:var(--text);font-size:13px;white-space:nowrap;font-weight:600}
.nc .np{color:var(--text3);font-weight:400}
.pc{font-weight:400;color:var(--text);font-size:13px;white-space:nowrap}
.pc .np{color:var(--text3);font-weight:400;font-size:12px}
.tc{white-space:nowrap;color:var(--text3);font-size:12px}
.mc{color:var(--text3);font-size:12px;cursor:pointer;text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.mc:hover{color:var(--accent)}
.bdg{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.bdg-new{background:rgba(16,185,129,0.10);color:var(--success)}
.ac{display:flex;gap:6px;align-items:center}
.ac .btn{padding:5px 0;border-radius:5px;font-size:11px;font-weight:500;text-decoration:none;display:inline-block;transition:all .15s;border:none;cursor:pointer;white-space:nowrap;width:80px;text-align:center}
.ac .btn:hover{opacity:.8}
.ac .br{background:rgba(16,185,129,0.10);color:var(--success)}
.ac .bu{background:rgba(245,158,11,0.10);color:var(--warning)}
.ac .bd{background:rgba(239,68,68,0.10);color:var(--danger)}
.emp{text-align:center;padding:60px 20px;color:var(--text3);font-size:15px}
.st{text-align:center;margin-top:16px;font-size:12px;color:var(--text3)}
.st a{color:var(--accent);text-decoration:none;font-weight:500}
/* View mode */
.conv-view-info{font-size:14px;color:var(--text);padding:10px 14px;margin-bottom:12px;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius)}
.conv-view-info b{color:var(--accent)}
.conv-view-actions{display:flex;gap:10px;margin-top:16px}
.conv-view-actions .back{color:var(--text3);text-decoration:none;font-size:13px;padding:8px 16px;border-radius:5px;background:var(--bg3)}
.conv-view-actions .back:hover{background:var(--border);color:var(--text)}
.conv-view-actions .danger{color:var(--danger);text-decoration:none;font-size:13px;padding:8px 16px;border-radius:5px;background:rgba(239,68,68,0.08)}
.conv-view-actions .danger:hover{background:rgba(239,68,68,0.15)}
/* ===== Mobile Responsive for Panel ===== */
@media(max-width:768px){
.stats{flex-wrap:wrap;gap:8px}
.stats .stat-card{flex:1 1 calc(50% - 8px);padding:12px 10px;min-width:0}
.stats .stat-card .num{font-size:22px}
.sf{flex-wrap:wrap;gap:8px}
.sf .sw{flex:1 1 100%}
.sf input{padding:8px 12px 8px 36px;font-size:13px}
.tw{table-layout:fixed;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tw table{min-width:650px;font-size:12px}
.tw th,.tw td{padding:7px 8px;font-size:12px}
.tw td{font-size:12px}
.nc,.pc{font-size:12px}
.mc{max-width:160px;font-size:11px}
.ac .btn{width:60px;padding:4px 0;font-size:10px}
.page-title-dialogues{font-size:17px}
.conv-view-info{font-size:13px;padding:8px 12px}
.conv-view-actions{flex-wrap:wrap}
.conv-view-actions .back,.conv-view-actions .danger{font-size:12px;padding:6px 12px}
}
@media(max-width:480px){
.stats .stat-card{flex:1 1 100%}
.stats .stat-card .num{font-size:20px}
.nc,.pc{font-size:11px}
.mc{max-width:120px}
.ac{flex-wrap:wrap;gap:4px}
.ac .btn{width:100%;padding:6px 0;font-size:11px}
}
/* Empty cell placeholder */
.nc:empty::before,.pc:empty::before{content:"—";color:var(--text2);opacity:0.7}