/* Админка «Юзеры» (get_users) — мобайл-фёрст */
.cc { max-width: 1080px; margin: 0 auto; padding: 12px; font-size: 15px; color: #24292f; }
.cc * { box-sizing: border-box; }

.cc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.cc-stat { background: #fff; border: 1px solid #e4e8ee; border-radius: 10px; padding: 10px 12px; }
.cc-stat b { display: block; font-size: 21px; line-height: 1.2; }
.cc-stat span { font-size: 12px; color: #6b7684; }
.cc-stat small { display: block; font-size: 11px; color: #98a1ad; margin-top: 2px; }

.cc-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cc-filters input[type=text] { flex: 1 1 100%; height: 38px; padding: 0 12px; border: 1px solid #d4dae2; border-radius: 8px; font-size: 15px; }
.cc-filters select { flex: 1 1 45%; height: 36px; padding: 0 8px; border: 1px solid #d4dae2; border-radius: 8px; background: #fff; font-size: 13px; color: #24292f; }
.cc-filters button { height: 36px; padding: 0 16px; border: 0; border-radius: 8px; background: #2f6fed; color: #fff; font-size: 14px; cursor: pointer; }
.cc-filters .cc-reset { height: 36px; line-height: 36px; padding: 0 12px; font-size: 14px; color: #6b7684; text-decoration: none; }

.cc-count { font-size: 13px; color: #6b7684; margin-bottom: 8px; }

.cc-row { background: #fff; border: 1px solid #e4e8ee; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.cc-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cc-email { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.cc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.cc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; color: #6b7684; }
.cc-meta .cc-seen { color: #1d7a3f; }
.cc-meta .cc-link { color: #1d5ca8; }
.cc-meta .cc-code { color: #1d5ca8; text-decoration: none; border-bottom: 1px dashed #9cc0ea; font-weight: 600; }

.cc-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.cc-pro { background: #17a04b; color: #fff; }
.cc-app-camcam { background: #eafaf0; color: #1d7a3f; border: 1px solid #c4ecd2; }
.cc-app-doggy { background: #fdecea; color: #b93a2e; border: 1px solid #f6cfc9; }
.cc-app-looloo { background: #fff0ec; color: #c96450; border: 1px solid #ffd9cf; }
.cc-os { background: #eef1f5; color: #3c4858; border: 1px solid #dde3ea; }
.cc-os-and { background: #f0f7e8; color: #4c7a2f; border: 1px solid #dcecc9; }
.cc-guest { background: #fff; color: #98a1ad; border: 1px dashed #c3cad3; }
.cc-cam { background: #e8f3ff; color: #1d5ca8; border: 1px solid #c9e0f6; }
.cc-mon { background: #f3edff; color: #6740b4; border: 1px solid #e0d4f7; }
.cc-del { background: #f4f5f7; color: #8a93a0; border: 1px solid #e0e4e9; text-decoration: line-through; }
.cc-country { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #6b7684; }
.cc-country img { height: 12px; width: auto; border-radius: 2px; }

.cc-h { font-size: 19px; margin: 4px 0 12px; }
.cc-panel { background: #fff; border: 1px solid #e4e8ee; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; overflow-x: auto; }
.cc-panel-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.cc-legend { font-size: 12px; color: #6b7684; display: inline-flex; align-items: center; gap: 4px; }
.cc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 10px; }
.cc-chart { width: 100%; height: auto; display: block; }
.cc-bar-num { font-size: 9px; fill: #6b7684; text-anchor: middle; }
.cc-bar-date { font-size: 9px; fill: #98a1ad; text-anchor: middle; }
.cc-muted { color: #6b7684; font-size: 13.5px; margin: 4px 0; }
.cc-table { border-collapse: collapse; width: 100%; font-size: 13.5px; background: #fff; }
.cc-table th, .cc-table td { border: 1px solid #e4e8ee; padding: 5px 10px; text-align: right; white-space: nowrap; }
.cc-table th:first-child, .cc-table td:first-child { text-align: left; }

.cc-pager { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; margin: 16px 0 8px; }
.cc-pager a, .cc-pager span.cc-cur, .cc-pager span.cc-dots { min-width: 34px; height: 34px; line-height: 34px; text-align: center; border-radius: 8px; font-size: 14px; text-decoration: none; display: inline-block; padding: 0 6px; }
.cc-pager a { background: #fff; border: 1px solid #d4dae2; color: #24292f; }
.cc-pager span.cc-cur { background: #2f6fed; color: #fff; font-weight: 600; }
.cc-pager span.cc-dots { color: #98a1ad; }
.cc-pager .cc-disabled { opacity: .35; pointer-events: none; }

@media (min-width: 700px) {
    .cc { padding: 20px 16px; }
    .cc-stats { grid-template-columns: repeat(4, 1fr); }
    .cc-filters input[type=text] { flex: 2 1 220px; }
    .cc-filters select { flex: 0 1 auto; }
    .cc-row { display: grid; grid-template-columns: minmax(220px, 1.2fr) 1fr auto; gap: 4px 16px; align-items: center; padding: 9px 14px; margin-bottom: 6px; }
    .cc-tags, .cc-meta { margin-top: 0; }
    .cc-meta { justify-content: flex-end; }
}

/* фильтр прил иконками (get_users) */
.cc-apps { display: flex; gap: 8px; margin-bottom: 12px; }
.cc-appbtn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; background: #fff; border: 1px solid #e4e8ee; border-radius: 12px; text-decoration: none; color: #3c4858; font-size: 12.5px; font-weight: 600; }
.cc-appbtn img { width: 44px; height: 44px; border-radius: 11px; display: block; }
.cc-appbtn .cc-appall { width: 44px; height: 44px; border-radius: 11px; background: #eef1f5; color: #6b7684; font-size: 20px; line-height: 44px; text-align: center; }
.cc-appbtn.cc-on { border-color: #2f6fed; box-shadow: 0 0 0 2px rgba(47,111,237,.18); color: #2f6fed; }
.cc-appbtn:hover { text-decoration: none; border-color: #b9cdf5; }

/* онлайн-статус возле кодов */
.cc-live { color: #d81f3d; font-weight: 700; white-space: nowrap; }
.cc-codeago { color: #98a1ad; font-style: normal; font-size: 11.5px; white-space: nowrap; }
.cc-wcode { white-space: nowrap; margin-right: 6px; }

/* соединительные линии камера↔монитор (js/users.js) */
.cc-list { position: relative; }
.cc-list.cc-haslinks { padding-left: 22px; }
#ccLinkSvg { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; }
.cc-linkline path { fill: none; stroke: url(#ccLinkGrad); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.cc-linkline circle { fill: #7c6cf6; opacity: .75; }
.cc-linkline.cc-glow path { opacity: 1; stroke-width: 2.5; }
.cc-linkline.cc-glow circle { opacity: 1; fill: #6740b4; }
.cc-row.cc-hl { border-color: #a68cf0; box-shadow: 0 0 0 2px rgba(124,108,246,.18); }

/* кликабельные #ID связок девайсов */
.cc-uid { display: inline-block; margin: 0 1px; padding: 0 7px; background: #f3edff; border: 1px solid #ddccf8; border-radius: 12px; color: #6740b4; font-weight: 700; font-size: 11.5px; line-height: 1.7; text-decoration: none; }
.cc-uid:hover { background: #e7dbfd; color: #4d2b96; text-decoration: none; }

/* полоска покупок + бейджи событий подписок */
.cc-substrip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; background: #fff; border: 1px solid #e4e8ee; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 12.5px; color: #24292f; }
.cc-subper { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; }
.cc-subper i { font-style: normal; font-weight: 700; color: #6b7684; font-size: 11.5px; margin-right: 1px; }
.cc-subper + .cc-subper { border-left: 1px solid #e4e8ee; padding-left: 10px; }
.cc-devbadge { display: inline-block; margin: 0 1px; padding: 0 7px; background: #f4f5f7; border: 1px dashed #c3cad3; border-radius: 12px; color: #6b7684; font-weight: 600; font-size: 11px; line-height: 1.7; }
a.cc-substrip-link { text-decoration: none; }
a.cc-substrip-link:hover { border-color: #b9cdf5; }
.cc-substrip-t { font-weight: 600; color: #6b7684; }
.cc-ev { display: inline-block; padding: 1px 8px; border-radius: 12px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.cc-ev b { font-weight: 800; }
.cc-ev-new { background: #eafaf0; color: #1d7a3f; border: 1px solid #c4ecd2; }
.cc-ev-for { background: #17a04b; color: #fff; border: 1px solid #17a04b; }
.cc-ev-renew { background: #e8f3ff; color: #1d5ca8; border: 1px solid #c9e0f6; }
.cc-ev-churn { background: #fdecea; color: #b93a2e; border: 1px solid #f6cfc9; }
.cc-ev-warn { background: #fff5e6; color: #a06616; border: 1px solid #f3ddb5; }
.cc-ev-ok { background: #fff; color: #1d7a3f; border: 1px solid #c4ecd2; }
.cc-ev-def { background: #f4f5f7; color: #6b7684; border: 1px solid #e0e4e9; }
.cc-evapp img { width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.cc-pct { color: #98a1ad; font-size: 12px; }
.cc-thico { width: 16px; height: 16px; border-radius: 4px; vertical-align: middle; }
.cc-plan-inline { display: none; }
@media (max-width: 699px) {
    .cc-table { font-size: 12.5px; }
    .cc-table th, .cc-table td { padding: 4px 6px; }
    .cc-evapp-name { display: none; }
    .cc-ev { font-size: 11px; padding: 1px 6px; }
    .cc-col-plan { display: none; }
    .cc-plan-inline { display: block; color: #6b7684; font-size: 11px; margin-top: 2px; text-align: right; }
}

/* страница «Стримы» */
.cc-strm-sect { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 10px; font-size: 15px; }
.cc-strm-sect2 { margin-top: 22px; }
.cc-muted-inline { font-size: 12.5px; color: #98a1ad; }
.cc-strm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.cc-strm { background: #fff; border: 1px solid #e4e8ee; border-radius: 12px; overflow: hidden; }
.cc-strm-cover { position: relative; display: block; aspect-ratio: 16/10; background: #1c2430; overflow: hidden; }
.cc-strm-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-strm-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; opacity: .45; }
.cc-strm-flag { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 14px; font-size: 11px; }
.cc-strm-flag.cc-live { background: #d81f3d; color: #fff; }
.cc-strm-ago { background: rgba(15,20,28,.72); color: #dfe5ec; font-weight: 600; }
.cc-strm-dur { position: absolute; bottom: 6px; left: 6px; padding: 1px 7px; border-radius: 12px; background: rgba(15,20,28,.72); color: #dfe5ec; font-size: 10.5px; }
.cc-strm-off .cc-strm-cover img { filter: grayscale(.5); opacity: .8; }
.cc-strm-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; padding: 8px 10px 9px; }
.cc-strm-code { font-weight: 700; font-size: 14px; color: #1d5ca8; text-decoration: none; border-bottom: 1px dashed #9cc0ea; }
.cc-strm-appic { width: 16px; height: 16px; border-radius: 4px; }
.cc-strm-email { flex: 1 1 100%; font-size: 11.5px; color: #6b7684; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-strm-email:hover { color: #2f6fed; }

@media (min-width: 700px) {
    .cc-apps { max-width: 560px; }
    .cc-strm-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
}

/* страница «Покупки» */
.cc-pur-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cc-pur { background: #fff; border: 1px solid #e4e8ee; border-radius: 12px; padding: 14px 16px; }
.cc-pur-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 15px; }
.cc-pur-head img { width: 28px; height: 28px; border-radius: 7px; }
.cc-pur-note { font-size: 11.5px; color: #98a1ad; border: 1px dashed #c3cad3; border-radius: 12px; padding: 1px 8px; }
.cc-field { margin-bottom: 10px; }
.cc-field label { display: block; font-size: 12px; color: #6b7684; margin-bottom: 4px; }
.cc-field input[type=text] { width: 100%; height: 38px; padding: 0 12px; border: 1px solid #d4dae2; border-radius: 8px; font-size: 14.5px; box-sizing: border-box; }
.cc-field input[type=text]:focus { border-color: #2f6fed; outline: none; box-shadow: 0 0 0 2px rgba(47,111,237,.15); }
.cc-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #24292f; margin: 4px 0 10px; cursor: pointer; }
.cc-check input { width: 17px; height: 17px; accent-color: #2f6fed; }
.cc-pur-foot { display: flex; justify-content: flex-end; }
.cc-pur button[type=submit], .cc-scr .btn-primary { height: 38px; padding: 0 20px; border: 0; border-radius: 8px; background: #2f6fed; color: #fff; font-size: 14px; cursor: pointer; }
.cc-pur button[type=submit]:hover, .cc-scr .btn-primary:hover { background: #245cd2; }
@media (min-width: 700px) {
    .cc-pur-grid { grid-template-columns: 1fr 1fr; }
}

/* страница «Скрины покупок» — только оформление поверх bootstrap-механики табов */
.cc-scr .container { max-width: 100%; padding: 0; }
.cc-scr .nav-tabs { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 4px 0 10px; }
.cc-scr .nav-tabs .nav-item { margin: 0; }
.cc-scr .nav-tabs .nav-link { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d4dae2; border-radius: 18px; background: #fff; color: #3c4858; font-size: 12.5px; font-weight: 600; padding: 5px 12px; }
.cc-scr .nav-tabs .nav-link img { width: 16px; height: 16px; border-radius: 4px; }
.cc-scr .nav-tabs .nav-link:hover { border-color: #b9cdf5; }
.cc-scr .nav-tabs .nav-link.active { background: #2f6fed; border-color: #2f6fed; color: #fff; }
.cc-scr .nav-tabs-main .nav-link { font-size: 13.5px; padding: 7px 14px; border-radius: 20px; }
.cc-scr .tab-content > .tab-pane { padding: 0; }
.cc-scr form > .tab-content { background: #fff; border: 1px solid #e4e8ee; border-radius: 12px; padding: 14px 16px; }
.cc-scr h4 { font-size: 15px; margin: 6px 0 10px; }
.cc-scr hr { border: 0; border-top: 1px solid #e4e8ee; margin: 14px 0; }
.cc-scr .help-block { font-size: 12px; color: #98a1ad; }
.cc-scr .form-group { margin-bottom: 10px; }
.cc-scr .form-group label { font-size: 12px; color: #6b7684; margin-bottom: 4px; display: block; }
.cc-scr .form-control { width: 100%; border: 1px solid #d4dae2; border-radius: 8px; font-size: 14px; padding: 8px 12px; box-sizing: border-box; background: #fff; color: #24292f; }
.cc-scr input.form-control { height: 38px; padding: 0 12px; }
.cc-scr .form-control:focus { border-color: #2f6fed; outline: none; box-shadow: 0 0 0 2px rgba(47,111,237,.15); }
.cc-scr .form-check { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.cc-scr .form-check-input { width: 17px; height: 17px; accent-color: #2f6fed; margin: 0; position: static; }
.cc-scr .form-check-label { font-size: 14px; margin: 0; }
.cc-scr .row { margin: 0; display: block; }
.cc-scr .row [class^=col-] { padding: 0; width: 100%; max-width: 100%; flex: none; }
.cc-scr form > .d-flex { position: sticky; bottom: 10px; margin-top: 12px; z-index: 5; }
.cc-scr form .btn-primary { box-shadow: 0 4px 14px rgba(31,45,70,.25); }