/* Design tokens — тёмная тема в стиле Viewer-Fresh */
:root{
	--bg:#05060a;
	--panel:rgba(15,23,42,0.9);
	--panel-strong:#0f172a;
	--panel-soft:#0f1320;
	--text:#e5e7eb;
	--text-strong:#fff;
	--muted:#9ba9ff;
	--accent:#38bdf8;
	--accent-strong:#0ea5e9;
	--accent-soft:rgba(56,189,248,0.15);
	--border:rgba(255,255,255,0.08);
	--border-strong:rgba(125,211,252,0.4);
	--shadow:0 18px 40px rgba(0,0,0,0.4);
	--shadow-btn:0 10px 28px rgba(56,189,248,0.18);
	--shadow-btn-hover:0 14px 36px rgba(56,189,248,0.25);
	--radius-lg:16px;
	--radius:12px;
	--radius-sm:10px;
	--radius-pill:999px;
	--success:#22c55e;
	--success-strong:#16a34a;
	--success-soft:rgba(34,197,94,0.15);
	--success-text:#4ade80;
	--danger:#ef4444;
	--danger-strong:#dc2626;
	--danger-soft:rgba(239,68,68,0.15);
	--danger-text:#f87171;
	--warning:#f59e0b;
	--warning-soft:rgba(245,158,11,0.15);
	--warning-text:#fbbf24;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}

/* Layout - fluid (резиновый) container */
.container{width:calc(100% - 40px);max-width:1600px;margin:20px auto;padding:20px}

.card{background:var(--panel);border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid var(--border);padding:24px;margin-bottom:20px}

.card-row{margin-bottom:12px}
.card hr{margin:18px 0;border:none;border-top:1px solid var(--border)}

/* Client profile card */
.client-card-grid{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start;margin-bottom:14px}
.client-card .client-col{padding:6px 0}
.client-card .client-col--right{border-left:1px solid var(--border);padding-left:16px}
.btn-small{padding:8px 12px;font-size:13px}
.login-history td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.login-history .table{font-size:13px}
.client-card p{margin:8px 0}
.login-history td:nth-child(2){max-width:480px;word-break:break-all}

/* Header / nav */
.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.app-title{font-weight:700;font-size:20px;color:var(--text-strong);letter-spacing:-0.01em}
.nav{display:flex;gap:12px;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:var(--radius-sm);transition:background .2s ease,color .2s ease}
.nav a:hover{background:var(--accent-soft);color:var(--accent)}
.nav a.btn{background:linear-gradient(120deg,#111827,#0b1323);color:#e0f2fe;border:1px solid var(--border-strong);box-shadow:var(--shadow-btn)}
.nav a.btn:hover{background:linear-gradient(120deg,#131c2c,#0c1626);box-shadow:var(--shadow-btn-hover);border-color:rgba(56,189,248,0.6)}

/* Forms */
.form{max-width:520px;margin:0 auto}
.form .form-row{margin-bottom:14px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
input[type="text"],input[type="email"],input[type="password"],select,textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel-soft);color:var(--text);font-size:14px;font-family:inherit}
input::placeholder,textarea::placeholder{color:#6b7280}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,189,248,0.15)}
.btn-primary{display:inline-block;background:linear-gradient(120deg,#111827,#0b1323);color:#e0f2fe;padding:10px 16px;border-radius:var(--radius);border:1px solid var(--border-strong);cursor:pointer;font-weight:700;box-shadow:var(--shadow-btn);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-btn-hover);border-color:rgba(56,189,248,0.6)}
.btn-primary:disabled,.btn-primary[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{background:transparent;border:1px solid var(--border);padding:8px 12px;border-radius:var(--radius);color:var(--accent);cursor:pointer;transition:border-color .2s ease,background .2s ease}
.btn-ghost:hover{background:var(--accent-soft);border-color:rgba(56,189,248,0.4)}
.btn-danger{background:linear-gradient(120deg,#3a0d0d,#210606);border-color:rgba(248,113,113,0.4);color:#fee2e2}
.btn-danger:hover{border-color:rgba(248,113,113,0.6);box-shadow:0 14px 36px rgba(239,68,68,0.2)}
.btn-success{background:linear-gradient(120deg,#0d3a1c,#062109);border-color:rgba(74,222,128,0.4);color:#dcfce7}
.btn-success:hover{border-color:rgba(74,222,128,0.6);box-shadow:0 14px 36px rgba(34,197,94,0.2)}

/* Small text / messages */
.help{font-size:13px;color:var(--muted);margin-top:8px}
.text-success{color:var(--success-text) !important}
.text-danger{color:var(--danger-text) !important}
.text-muted{color:var(--muted) !important}

/* Alerts */
.alert{padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);font-size:13px}
.alert-success{background:var(--success-soft);border-color:rgba(34,197,94,0.3);color:var(--success-text)}
.alert-danger{background:var(--danger-soft);border-color:rgba(239,68,68,0.3);color:var(--danger-text)}

/* Dashboard layout */
.dashboard-top{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.balance{flex:1;min-width:220px;background:var(--panel);color:var(--text);padding:18px;border-radius:var(--radius-lg);border:1px solid rgba(56,189,248,0.3);box-shadow:0 18px 40px rgba(56,189,248,0.12)}
.profile{flex:1;min-width:220px;padding:18px;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--panel)}
.balance .help{color:var(--muted)}
.balance .help strong{color:var(--text-strong);font-weight:700}
.tariff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:14px}
.tariff{background:var(--panel);border-radius:var(--radius-lg);padding:14px;border:1px solid var(--border);text-align:center}
.tariff h4{margin-bottom:8px;color:var(--text-strong)}
.tariff .price{font-weight:700;font-size:18px;color:var(--accent);margin-bottom:8px}
.tariff .buy{margin-top:10px}

/* Footer */
.footer{margin-top:28px;text-align:center;color:var(--muted);font-size:13px}

/* responsive */
@media(max-width:560px){.container{margin:18px} .app-title{font-size:18px}}
@media(max-width:900px){.app-header{flex-direction:column;align-items:flex-start}}

/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0;margin-top:12px;font-size:15px;line-height:1.5}
.table th,.table td{padding:14px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
.table th{font-weight:600;color:var(--muted);background:rgba(255,255,255,0.03)}
.table tbody tr:nth-child(even){background:rgba(255,255,255,0.02)}
.table tbody tr:hover{background:var(--accent-soft)}
.table thead th:first-child{border-top-left-radius:var(--radius-sm)}
.table thead th:last-child{border-top-right-radius:var(--radius-sm)}
.table-wrap{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;overflow-x:auto;background:var(--panel)}
.row-actions{display:flex;gap:8px}
.row-unread{background:var(--accent-soft) !important}

/* Add camera form */
.cam-form{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:10px;align-items:end;margin-top:10px}
.filters-form{grid-template-columns:1fr 1fr auto}
.cam-form .form-row{margin:0}
.cam-toggle{margin-top:10px}

/* Readability helpers */
.ip{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;color:var(--accent)}
.badge{display:inline-block;padding:4px 10px;border-radius:var(--radius-pill);background:var(--accent-soft);color:#7dd3fc;font-weight:600;font-size:12px}
.badge--type{background:var(--accent-soft);color:#7dd3fc}
.badge--tariff{background:var(--success-soft);color:var(--success-text)}
.badge--on{background:var(--success-soft);color:var(--success-text);border:1px solid rgba(34,197,94,0.3)}
.badge--off{background:rgba(255,255,255,0.06);color:var(--muted);border:1px solid var(--border)}
.badge--warn{background:var(--warning-soft);color:var(--warning-text);border:1px solid rgba(245,158,11,0.3)}

/* Pagination */
.pagination{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:14px}
.pagination a,.pagination span{display:inline-block;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:var(--text);background:var(--panel)}
.pagination .active{background:var(--accent-strong);border-color:var(--accent-strong);color:#04141f}
.pagination .disabled{opacity:.5;pointer-events:none}

/* Payment status badges */
.badge--success{background:var(--success-soft);color:var(--success-text);border:1px solid rgba(34,197,94,0.3)}
.badge--warning{background:var(--warning-soft);color:var(--warning-text);border:1px solid rgba(245,158,11,0.3)}

/* Responsive forms */
@media (max-width: 1024px){
	.cam-form{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width: 720px){
	.cam-form{grid-template-columns:1fr 1fr}
	.cam-form .form-row:last-child{grid-column:1 / -1}
}
@media (max-width: 480px){
	.cam-form{grid-template-columns:1fr}
}
@media (max-width: 700px){
	.filters-form{grid-template-columns:1fr 1fr}
	.client-card-grid{grid-template-columns:1fr;}
	.filters-form .form-row:last-child{grid-column:1 / -1}
}
@media (max-width: 460px){
	.filters-form{grid-template-columns:1fr}
}

/* Company info on login page */
.company-info{margin-top:24px;padding-top:20px;border-top:1px solid var(--border);text-align:center;font-size:13px;color:var(--muted)}
.company-info p{margin:4px 0}
.company-info strong{color:var(--text-strong);font-weight:600}
.company-info a{color:var(--accent);text-decoration:none}
.company-info a:hover{text-decoration:underline}

/* Support chat */
.chat{background:var(--panel-soft);border:1px solid var(--border);padding:14px;border-radius:var(--radius-sm);max-height:480px;overflow-y:auto}
.chat .msg{animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Ticket chat bubbles */
.msg-bubble{border:1px solid var(--border);padding:10px 12px;border-radius:var(--radius-sm)}
.msg-bubble--mine{background:var(--accent-soft)}
.msg-bubble--theirs{background:var(--panel-soft)}
.msg-bubble-meta{font-size:12px;color:var(--muted);margin-bottom:4px}
.msg--new{box-shadow:0 0 0 3px rgba(56,189,248,0.5)}