:root {
    --cloud-950: #3f271b; --cloud-800: #70452f; --cloud-700: #8f5b3f; --cloud-600: #a96b49;
    --cloud-500: #b97a57; --cloud-400: #cf9a7b; --cloud-100: #f5e9e2;
    --cloud-gradient: linear-gradient(135deg, #8f5b3f 0%, #b97a57 52%, #d2a185 100%);
    --cloud-gradient-hover: linear-gradient(135deg, #70452f 0%, #a96b49 48%, #c98f6e 100%);
    --app-bg: #f8f4f1; --app-surface: #fff; --app-surface-soft: #fcfaf8; --app-text: #111111;
    --app-muted: #5f5752; --app-border: #e8d9d0; --app-shadow: 0 12px 35px rgba(80,48,31,.09);
}
::selection { color:#fff; background:#a96846; }
::-moz-selection { color:#fff; background:#a96846; }
html.dark-theme {
    --app-bg: #071521; --app-surface: #0d2030; --app-surface-soft: #112a3d; --app-text: #e8f6ff;
    --app-muted: #9fb5c5; --app-border: #1e3d52; --app-shadow: 0 14px 38px rgba(0,0,0,.28);
}
body { background: var(--app-bg); color: var(--app-text); transition: background-color .25s ease, color .25s ease; }
a, .text-primary { color: var(--cloud-700) !important; }
a:hover { color: var(--cloud-800) !important; }
.card, .modal-content, .dropdown-menu, .offcanvas, .list-group-item, .page-content .table-responsive,
.email-wrapper, .chat-wrapper { background-color: var(--app-surface); color: var(--app-text); border-color: var(--app-border) !important; }
.card { border: 1px solid var(--app-border); box-shadow: var(--app-shadow); }
.card-header, .card-footer, .modal-header, .modal-footer { border-color: var(--app-border) !important; }
.text-muted, .text-secondary, small { color: var(--app-muted) !important; }
.table { color: var(--app-text); --bs-table-bg: transparent; --bs-table-striped-color: var(--app-text); }
.table > :not(caption) > * > * { border-color: var(--app-border); }
.btn-primary, .btn-info, .btn-success, .btn-danger, .btn-warning, .btn-dark, .btn-secondary,
.back-to-top, .btn-switcher, button[type="submit"]:not(.dropdown-item):not(.btn-close) {
    color: #111 !important; border: 0 !important; background-image: var(--cloud-gradient) !important;
    box-shadow: 0 7px 18px rgba(185,122,87,.25); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover, .btn-info:hover, .btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-dark:hover,
.btn-secondary:hover, button[type="submit"]:not(.dropdown-item):not(.btn-close):hover {
    color: #111 !important; background-image: var(--cloud-gradient-hover) !important;
    box-shadow: 0 10px 24px rgba(185,122,87,.34); transform: translateY(-1px);
}
.btn-outline-primary, .btn-outline-info, .btn-outline-success, .btn-outline-danger, .btn-outline-warning,
.btn-outline-dark, .btn-outline-secondary { color: var(--cloud-700) !important; border-color: var(--cloud-500) !important; background: transparent; }
.btn-outline-primary:hover, .btn-outline-info:hover, .btn-outline-success:hover, .btn-outline-danger:hover,
.btn-outline-warning:hover, .btn-outline-dark:hover, .btn-outline-secondary:hover { color: #111 !important; background-image: var(--cloud-gradient) !important; }
.form-control, .form-select, .input-group-text, .bootstrap-tagsinput {
    color: var(--app-text) !important; background-color: var(--app-surface-soft) !important; border-color: var(--app-border) !important;
}
.form-control:focus, .form-select:focus { border-color: var(--cloud-400) !important; box-shadow: 0 0 0 .22rem rgba(185,122,87,.16) !important; }
.form-check-input:checked { border-color: var(--cloud-500); background-color: var(--cloud-500); }
.page-item.active .page-link, .dropdown-item.active, .dropdown-item:active { color: #111 !important; background: var(--cloud-gradient); border-color: transparent; }
.top-header { background: var(--app-surface); border-color: var(--app-border); box-shadow: 0 4px 18px rgba(80,48,31,.06); }
.footer { background: var(--app-surface); border-color: var(--app-border); color: var(--app-muted); }
.app-footer { padding:7px 15px; font-size:9.5px; line-height:1.35; }
.app-footer p { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; letter-spacing:.01em; }
.app-footer-brand { color:#955f42; font-size:10px; font-weight:800; }
.app-footer-divider { width:1px; height:11px; background:var(--app-border); }
.app-footer-credit { color:var(--app-muted); }.app-footer-credit strong { color:var(--app-text); font-weight:700; }
@media(max-width:575px){.app-footer{padding:6px 10px;font-size:8.5px}.app-footer-credit{display:none}}
.sidebar-wrapper, .sidebar-header { border-color: var(--app-border); }
.logo-text { background: var(--cloud-gradient); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-weight: 800; }
.sidebar-wrapper .metismenu .mm-active > a, .sidebar-wrapper .metismenu a:hover { color: #111; background: linear-gradient(90deg,rgba(185,122,87,.19),rgba(210,161,133,.05)); }
.sidebar-wrapper .metismenu .parent-icon { color: var(--cloud-600) !important; }
.msg-count, .badge-primary, .bg-primary { background: var(--cloud-gradient) !important; }
.page-content { min-height: calc(100vh - 120px); }
html.dark-sidebar .sidebar-wrapper, html.dark-sidebar .sidebar-wrapper .sidebar-header { background: linear-gradient(180deg,#b97a57 0%,#8f5b3f 100%); }
html.dark-sidebar .sidebar-wrapper .metismenu a { color: #17100c; }
html.dark-sidebar .sidebar-wrapper .metismenu a:hover, html.dark-sidebar .sidebar-wrapper .metismenu .mm-active > a { color: #000; background: linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.08)); }
html.dark-sidebar .sidebar-wrapper .metismenu .parent-icon { color: #111 !important; }
html.colorless-theme .sidebar-wrapper .metismenu .parent-icon { color: var(--cloud-700) !important; }
html.colorless-theme .card { box-shadow: 0 8px 24px rgba(80,48,31,.06); }
html.dark-theme .top-header, html.dark-theme .footer, html.dark-theme .sidebar-wrapper,
html.dark-theme .sidebar-wrapper .sidebar-header { background: var(--app-surface); border-color: var(--app-border); }
html.dark-theme .dropdown-item, html.dark-theme label, html.dark-theme h1, html.dark-theme h2,
html.dark-theme h3, html.dark-theme h4, html.dark-theme h5, html.dark-theme h6 { color: var(--app-text); }
html.dark-theme .dropdown-item:hover { background: var(--app-surface-soft); }
html.dark-theme .form-control::placeholder { color: #7892a5; }

/* Navigation shell */
body { font-family: 'Manrope',sans-serif !important; }
.sidebar-wrapper {
    background: var(--app-surface);
    border-right: 1px solid var(--app-border) !important;
    box-shadow: 8px 0 30px rgba(80,48,31,.045);
}
.sidebar-wrapper .sidebar-header {
    height: 74px;
    padding: 0 17px;
    background: var(--app-surface);
    border-right: 0;
    border-bottom: 1px solid var(--app-border);
}
.sidebar-header .logo-icon-2 { width: 39px; height: 39px; padding: 5px; object-fit: contain; background: linear-gradient(135deg,#f5e9e2,#fff); border: 1px solid #ead4c8; border-radius: 12px; box-shadow: 0 5px 14px rgba(185,122,87,.12); }
.sidebar-header .logo-text { margin-left: 10px; font-size: 19px; letter-spacing: -.045em; }
.sidebar-header .toggle-btn { width: 36px; height: 36px; line-height: 36px; margin: 0 0 0 14px !important; color: #70452f; background: #f7eee9; border-radius: 10px; font-size: 21px; }
.sidebar-wrapper .simplebar-content { padding-bottom: 25px !important; }
.sidebar-wrapper .metismenu { padding: 14px 11px 25px; }
.sidebar-wrapper .metismenu > li { margin: 3px 0; }
.sidebar-wrapper .metismenu > li > a {
    min-height: 46px;
    padding: 9px 12px;
    color: #3e3936;
    border-radius: 11px;
    font-size: 12.5px;
    font-weight: 650;
    letter-spacing: -.008em;
    transition: color .18s ease,background .18s ease,transform .18s ease;
}
.sidebar-wrapper .metismenu > li > a:hover { transform: translateX(2px); }
.sidebar-wrapper .metismenu a .parent-icon {
    width: 31px;
    height: 31px;
    display: grid;
    flex: 0 0 31px;
    place-items: center;
    margin-right: 11px;
    color: #70452f !important;
    background: #f5e9e2;
    border-radius: 9px;
    font-size: 17px;
}
.sidebar-wrapper .metismenu a .menu-title { line-height: 1.25; }
.sidebar-wrapper .metismenu .has-arrow::after { right: 14px; width: 7px; height: 7px; border-width: 0 1.5px 1.5px 0; color: #9a877d; }
.sidebar-wrapper .metismenu ul {
    position: relative;
    margin: 5px 0 8px 15px;
    padding: 5px 0 5px 17px;
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid #ead9cf !important;
}
.sidebar-wrapper .metismenu ul a {
    position: relative;
    min-height: 37px;
    padding: 8px 27px 8px 11px;
    color: #71645d;
    border-radius: 9px;
    font-size: 11.5px;
    font-weight: 550;
    line-height: 1.35;
    letter-spacing: 0;
}
.sidebar-wrapper .metismenu ul a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -21px;
    width: 8px;
    height: 1px;
    background: #d5b8a7;
}
.sidebar-wrapper .metismenu ul a i { width: 21px; margin-right: 7px; color: #a16849; font-size: 14px; text-align: center; }
.sidebar-wrapper .metismenu ul a:hover,
.sidebar-wrapper .metismenu ul a.current-menu-link { color: #4d2e1e !important; background: linear-gradient(90deg,rgba(185,122,87,.18),rgba(185,122,87,.04)) !important; transform: translateX(2px); }
.sidebar-wrapper .metismenu ul a.current-menu-link { font-weight: 750; }
.sidebar-wrapper .metismenu ul a.current-menu-link::after { content: ''; position: absolute; top: 50%; right: 10px; width: 6px; height: 6px; transform: translateY(-50%); background: #b97a57; border-radius: 50%; }
.sidebar-wrapper .metismenu > li.mm-active > a { color: #3f271b !important; background: linear-gradient(135deg,rgba(185,122,87,.22),rgba(210,161,133,.09)) !important; box-shadow: inset 3px 0 #b97a57; }
.sidebar-wrapper .metismenu > li.mm-active > a .parent-icon { color: #111 !important; background: var(--cloud-gradient); box-shadow: 0 5px 12px rgba(185,122,87,.2); }
.sidebar-wrapper .menu-label { margin: 22px 12px 8px; padding: 0; color: #a18d82; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.top-header { height: 74px; line-height: normal; backdrop-filter: blur(16px); }
.top-header .navbar { height: 74px; padding: 0 18px; }
.top-header .toggle-btn { width: 39px; height: 39px; display: grid; place-items: center; margin: 0; color: #70452f; background: #f7eee9; border: 1px solid #ead9cf; border-radius: 11px; font-size: 22px; line-height: 1; }
.top-header .toggle-btn:hover { color: #111; background: #ead2c4; }
.device-selector { min-height: 42px; display: inline-flex; align-items: center; max-width: min(390px,38vw); padding: 8px 14px; overflow: hidden; color: #2f2926 !important; background: var(--app-surface-soft); border: 1px solid var(--app-border); border-radius: 12px; box-shadow: 0 3px 10px rgba(80,48,31,.04); font-size: 11.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.device-selector:hover { border-color: #cf9a7b; background: #faf2ed; }
.right-topbar .navbar-nav { gap: 4px; }
.right-topbar .navbar-nav .nav-link { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; color: #665951; background: transparent; border-radius: 11px; font-size: 20px; line-height: 1; transition: .18s ease; }
.right-topbar .navbar-nav .nav-link:hover { color: #70452f; background: #f5e9e2; transform: translateY(-1px); }
.right-topbar .dropdown-user-profile { display: flex; align-items: center; }
.right-topbar .dropdown-user-profile .nav-link { width: auto; height: 48px; display: flex; align-items: center; margin-left: 8px; padding: 4px 6px 4px 14px; background: var(--app-surface-soft); border: 1px solid var(--app-border); border-radius: 14px; }
.right-topbar .dropdown-user-profile .nav-link:hover { background: #f5e9e2; border-color: #dfbdab; transform: none; }
.right-topbar .dropdown-user-profile .user-box { width: auto; height: auto; min-width: 0; gap: 10px; line-height: normal; }
.right-topbar .dropdown-user-profile .user-info { min-width: 0; max-width: 180px; margin-right: 0; text-align: right; line-height: 1.25; }
.user-info .user-name { color: var(--app-text); font-size: 11.5px; font-weight: 800; }
.right-topbar .dropdown-user-profile .user-name,
.right-topbar .dropdown-user-profile .designattion { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-info .designattion { max-width: 170px; overflow: hidden; color: var(--app-muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.right-topbar .dropdown-user-profile .user-img { width: 38px; height: 38px; flex: 0 0 38px; padding: 2px; border: 2px solid #d8ab92; box-shadow: 0 4px 12px rgba(185,122,87,.16); object-fit: cover; }
.right-topbar .dropdown-user-profile .user-icon-avatar { display:grid; place-items:center; padding:0; color:#70452f; background:linear-gradient(135deg,#f7e9e1,#ead0c1); }
.right-topbar .dropdown-user-profile .user-icon-avatar i { font-size:21px; line-height:1; }
.top-header .dropdown-menu { margin-top: 10px !important; overflow: hidden; border: 1px solid var(--app-border) !important; border-radius: 14px !important; box-shadow: 0 16px 38px rgba(46,31,23,.13) !important; }
.top-header .dropdown-item { display: flex; align-items: center; min-height: 40px; color: var(--app-text); font-size: 11.5px; font-weight: 600; }
.top-header .dropdown-item i { color: #a16849; font-size: 17px; }
.support-notifications-menu { width:340px !important; padding:0 !important; overflow:hidden; }
.top-header .navbar .dropdown-lg .support-notifications-menu::after { background:var(--app-surface) !important; border-top-color:var(--app-border) !important; border-left-color:var(--app-border) !important; }
.support-notifications-head { display:flex; align-items:center; gap:10px; padding:15px 16px; background:var(--app-surface); border-bottom:1px solid var(--app-border); }
.support-notifications-head-icon { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; color:#8f5b3f; background:#f4e5dc; border-radius:10px; font-size:18px; }
.support-notifications-head h6 { margin:0 0 2px; color:var(--app-text); font-size:12px; font-weight:800; }.support-notifications-head p { margin:0; color:var(--app-muted); font-size:9px; }.support-notifications-head > span { margin-left:auto; padding:4px 7px; color:#fff; background:#a96846; border-radius:99px; font-size:8px; font-weight:800; }
.support-notifications-list { max-height:310px; overflow-y:auto; }.support-notification-row { padding:12px 15px !important; border-bottom:1px solid var(--app-border); white-space:normal !important; }.support-notification-row > div { gap:10px; }.support-notification-icon { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; color:#8f5b3f; background:var(--app-surface-soft); border-radius:9px; font-size:16px; }.support-notification-row .msg-name { color:var(--app-text); font-size:10.5px; font-weight:750; }.support-notification-row .msg-info { display:-webkit-box; overflow:hidden; color:var(--app-muted); font-size:9.5px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.support-notification-row small { font-size:8px; }
.support-notifications-empty { min-height:145px; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:25px 20px; text-align:center; }.support-notifications-empty > span { width:42px; height:42px; display:grid; place-items:center; margin-bottom:10px; color:#a16849; background:var(--app-surface-soft); border-radius:12px; font-size:21px; }.support-notifications-empty h6 { margin:0 0 4px; color:var(--app-text); font-size:11.5px; font-weight:800; }.support-notifications-empty p { margin:0; color:var(--app-muted); font-size:9.5px; }
.support-notifications-footer { min-height:39px; display:flex; align-items:center; justify-content:center; gap:4px; color:#8f5b3f!important; background:var(--app-surface-soft); font-size:9.5px; font-weight:800; text-decoration:none!important; }.support-notifications-footer i { font-size:15px; transition:transform .18s ease; }.support-notifications-footer:hover i { transform:translateX(2px); }
html.dark-theme .support-notifications-head-icon { color:#e5c0ad; background:#193141; }
@media(max-width:400px){.support-notifications-menu{width:calc(100vw - 20px)!important;}}
.top-header .dropdown-item:hover { background: #f8eee8; }
.msg-count { top: 0 !important; right: 0 !important; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; color: #111; border: 2px solid var(--app-surface); font-size: 8px; }
html.dark-theme .sidebar-wrapper .metismenu > li > a { color: #d9e4eb; }
html.dark-theme .sidebar-wrapper .metismenu ul { border-left-color: #294252 !important; }
html.dark-theme .sidebar-wrapper .metismenu ul a { color: #9fb2be; }
html.dark-theme .sidebar-wrapper .metismenu ul a:hover,
html.dark-theme .sidebar-wrapper .metismenu ul a.current-menu-link { color: #fff !important; }
html.dark-theme .device-selector { color: var(--app-text) !important; }
html.dark-theme .top-header .toggle-btn,
html.dark-theme .right-topbar .navbar-nav .nav-link { color: #d9e4eb; background: var(--app-surface-soft); border-color: var(--app-border); }
html.dark-theme .right-topbar .dropdown-user-profile .nav-link:hover { background: #193044; border-color: #355066; }
html.dark-theme .right-topbar .dropdown-user-profile .user-icon-avatar { color:#e8c7b5; background:linear-gradient(135deg,#20394a,#162b39); border-color:#466174; }
@media(max-width:767px){
    .top-header .navbar { padding: 0 10px; }
    .device-selector { max-width: 42vw; padding: 8px 10px; font-size: 10px; }
    .right-topbar .navbar-nav { gap: 0; }
    .right-topbar .dropdown-user-profile .nav-link { width: 42px; height: 42px; margin-left: 2px; padding: 3px; border-radius: 12px; }
    .right-topbar .dropdown-user-profile .user-img { width: 34px; height: 34px; flex-basis: 34px; }
}

/* Live controls */
.help-page { --help-accent:#a96846; }.help-hero,.installation-hero { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:clamp(30px,5vw,55px); overflow:hidden; background:linear-gradient(135deg,#3c2920,#8f5b3f 65%,#c58b6b); border-radius:21px; box-shadow:0 16px 38px rgba(80,48,31,.15); color:#fff; }.help-hero > div:first-child,.installation-hero > div:first-child { max-width:650px; }.help-eyebrow { display:block; margin-bottom:8px; color:inherit; opacity:.72; font-size:8.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.help-hero h2,.installation-hero h2 { margin:0 0 10px; color:#fff; font-size:clamp(27px,4vw,42px); font-weight:800; letter-spacing:-.04em; }.help-hero p,.installation-hero p { margin:0 0 22px; color:rgba(255,255,255,.76); font-size:12px; line-height:1.7; }.help-hero-icon,.installation-device { width:145px; height:145px; flex:0 0 145px; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.19); border-radius:38px; font-size:70px; transform:rotate(5deg); }.installation-hero small { display:block; margin-top:9px; color:rgba(255,255,255,.66); font-size:9px; }
.help-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:18px; }.help-card,.support-updates,.installation-steps,.installation-note { background:var(--app-surface); border:1px solid var(--app-border); border-radius:17px; box-shadow:0 8px 24px rgba(80,48,31,.055); }.help-card { padding:22px; }.help-card > span { width:40px; height:40px; display:grid; place-items:center; margin-bottom:14px; color:#8f5b3f; background:#f4e5dc; border-radius:11px; font-size:20px; }.help-card h4 { margin:0 0 7px; color:var(--app-text); font-size:14px; font-weight:800; }.help-card p { margin:0 0 12px; color:var(--app-muted); font-size:10.5px; line-height:1.65; }.help-card a { color:#8f5b3f!important; font-size:10px; font-weight:800; text-decoration:none!important; }
.support-updates { margin-top:18px; padding:22px; }.support-updates-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }.support-updates-head h4 { margin:0; color:var(--app-text); font-size:15px; font-weight:800; }.support-updates-head > span { padding:5px 8px; background:var(--app-surface-soft); border-radius:99px; font-size:9px; }.support-update { display:flex; gap:10px; padding:12px 0; border-top:1px solid var(--app-border); }.support-update > i { color:#a96846; font-size:19px; }.support-update strong { color:var(--app-text); font-size:11px; }.support-update p { margin:3px 0; color:var(--app-muted); font-size:10px; }.support-update small { color:var(--app-muted); font-size:8.5px; }.support-empty { padding:35px; color:var(--app-muted); text-align:center; font-size:10.5px; }.support-empty i { display:block; margin-bottom:7px; font-size:28px; }
.installation-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; margin-top:18px; padding:22px; }.installation-step { display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--app-border); }.installation-step > span { width:31px; height:31px; flex:0 0 31px; display:grid; place-items:center; color:#8f5b3f; background:#f4e5dc; border-radius:9px; font-size:10px; font-weight:800; }.installation-step h4 { margin:0 0 4px; color:var(--app-text); font-size:12px; font-weight:800; }.installation-step p { margin:0; color:var(--app-muted); font-size:9.5px; line-height:1.55; }.installation-note { display:flex; align-items:center; gap:11px; margin-top:18px; padding:16px 18px; }.installation-note > i { color:#a96849; font-size:22px; }.installation-note p { flex:1; margin:0; color:var(--app-muted); font-size:10px; line-height:1.6; }.installation-note a { color:#8f5b3f!important; font-size:10px; font-weight:800; white-space:nowrap; }
@media(max-width:700px){.help-hero-icon,.installation-device{display:none}.help-grid,.installation-steps{grid-template-columns:1fr}.installation-note{align-items:flex-start;flex-wrap:wrap}}

/* Installation video guide */
.installation-guide-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:18px; padding:24px 26px; color:#fff; background:linear-gradient(135deg,#3c2920,#9d6343); border-radius:18px; box-shadow:0 12px 30px rgba(80,48,31,.13); }
.installation-guide-head > div { max-width:680px; }.installation-guide-head h2 { margin:0 0 7px; color:#fff; font-size:25px; font-weight:800; letter-spacing:-.035em; }.installation-guide-head p { margin:0; color:rgba(255,255,255,.75); font-size:11px; line-height:1.65; }.installation-guide-head .btn { flex:0 0 auto; }
.installation-phone-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.installation-phone-card { min-width:0; display:flex; align-items:center; gap:11px; padding:15px; color:var(--app-text); background:var(--app-surface); border:1px solid var(--app-border); border-radius:14px; box-shadow:0 6px 18px rgba(80,48,31,.05); text-align:left; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.installation-phone-card:hover { transform:translateY(-2px); border-color:#d3a58c; box-shadow:0 10px 22px rgba(80,48,31,.1); }.installation-phone-card.active { background:linear-gradient(145deg,var(--app-surface),#f7e8df); border-color:#bd7c59; box-shadow:0 9px 24px rgba(112,69,47,.13); }
.installation-phone-icon { width:39px; height:39px; flex:0 0 39px; display:grid; place-items:center; color:#8f5b3f; background:#f3e1d7; border-radius:11px; font-size:20px; }.installation-phone-card > span:nth-child(2) { min-width:0; display:flex; flex:1; flex-direction:column; }.installation-phone-card strong { overflow:hidden; font-size:10.5px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.installation-phone-card small { margin-top:3px; color:var(--app-muted); font-size:8.5px; }.installation-phone-card > i { color:#a96846; font-size:19px; }
.installation-video-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(240px,.72fr); gap:18px; align-items:start; }.installation-player-card,.installation-checklist { background:var(--app-surface); border:1px solid var(--app-border); border-radius:17px; box-shadow:0 8px 24px rgba(80,48,31,.06); }.installation-player-card { overflow:hidden; }.installation-player-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 19px; }.installation-player-heading span { color:var(--app-muted); font-size:8.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.installation-player-heading h3 { margin:3px 0 0; color:var(--app-text); font-size:14px; font-weight:800; }.installation-player-heading a { display:inline-flex; align-items:center; gap:5px; color:#a0443e!important; font-size:9.5px; font-weight:800; white-space:nowrap; }.installation-player-heading a i { font-size:18px; }
.installation-video-player { position:relative; aspect-ratio:16/9; overflow:hidden; background:#17120f; }.installation-video-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.installation-checklist { padding:21px; }.installation-checklist h3 { margin:0 0 16px; color:var(--app-text); font-size:15px; font-weight:800; }.installation-checklist ul { margin:0; padding:0; list-style:none; }.installation-checklist li { display:flex; align-items:flex-start; gap:8px; padding:10px 0; color:var(--app-muted); border-top:1px solid var(--app-border); font-size:10px; line-height:1.55; }.installation-checklist li i { width:19px; height:19px; flex:0 0 19px; display:grid; place-items:center; color:#fff; background:#a96846; border-radius:50%; font-size:13px; }
html.dark-theme .installation-phone-card.active { background:linear-gradient(145deg,var(--app-surface),#173043); }html.dark-theme .installation-phone-icon { color:#e3bba5; background:#1b3444; }
@media(max-width:1050px){.installation-phone-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.installation-video-layout{grid-template-columns:1fr}.installation-checklist ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}}
@media(max-width:600px){.installation-guide-head{align-items:flex-start;flex-direction:column;padding:20px}.installation-phone-grid{grid-template-columns:1fr}.installation-player-heading{align-items:flex-start;flex-direction:column}.installation-checklist ul{display:block}}

.devices-page h2,.devices-page h3,.devices-page h4,.devices-page h5 { letter-spacing:-.02em; }
.devices-page > .d-flex h4 { color:var(--app-text); font-size:18px; font-weight:800; }.devices-page > .d-flex p,.devices-page .device-detail,.devices-page .pricing-feature { font-size:11px; line-height:1.55; }
.devices-page .device-card { border:1px solid var(--app-border)!important; box-shadow:0 7px 22px rgba(80,48,31,.055); }.devices-page .device-card:hover { border-color:#d7af99!important; box-shadow:0 13px 28px rgba(112,69,47,.12); }.devices-page .device-icon { width:54px; height:54px; color:#8f5b3f; background:#f4e5dc; border:1px solid #e6cec0; font-size:27px; }
.devices-page .device-card h5 { margin-bottom:10px!important; color:var(--app-text)!important; font-size:14px; font-weight:800; }.devices-page .license-row { color:var(--app-text); background:var(--app-surface-soft); border-color:var(--app-border); font-size:11px; }
.unused-license-section { padding:24px; background:var(--app-surface); border:1px solid var(--app-border); border-radius:20px; box-shadow:0 10px 30px rgba(80,48,31,.065); }
.unused-license-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:20px; }.license-eyebrow { display:block; margin-bottom:5px; color:#a16849; font-size:8.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }.unused-license-head h4 { margin:0 0 5px; color:var(--app-text); font-size:17px; font-weight:800; }.unused-license-head p { margin:0; color:var(--app-muted); font-size:10.5px; }.unused-license-count { flex:0 0 auto; padding:7px 11px; color:var(--app-muted); background:var(--app-surface-soft); border:1px solid var(--app-border); border-radius:999px; font-size:9.5px; }.unused-license-count strong { color:#8f5b3f; font-size:11px; }
.unused-license-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }.unused-license-card { min-width:0; padding:17px; background:linear-gradient(145deg,var(--app-surface),var(--app-surface-soft)); border:1px solid var(--app-border); border-radius:14px; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }.unused-license-card:hover { transform:translateY(-2px); border-color:#d3a68d; box-shadow:0 9px 20px rgba(112,69,47,.1); }.unused-license-card.is-expired { opacity:.76; }
.license-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }.license-key-icon { width:34px; height:34px; display:grid; place-items:center; color:#8f5b3f; background:#f4e5dc; border-radius:10px; font-size:17px; }.license-status { display:inline-flex; align-items:center; gap:4px; padding:5px 7px; border-radius:999px; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }.license-status.available { color:#287052; background:#e4f5ec; }.license-status.expired { color:#a13d48; background:#fae7e9; }.unused-license-card h5 { margin:0 0 14px!important; color:var(--app-text)!important; font-size:13px!important; font-weight:800; }
.license-expiry { display:flex; align-items:center; gap:8px; color:var(--app-muted); }.license-expiry > i { font-size:16px; }.license-expiry div { min-width:0; display:flex; flex-direction:column; }.license-expiry span { font-size:8px; text-transform:uppercase; letter-spacing:.06em; }.license-expiry strong { overflow:hidden; color:var(--app-text); font-size:9.5px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }.license-use-link { display:inline-flex; align-items:center; gap:4px; margin-top:15px; color:#8f5b3f!important; font-size:9.5px; font-weight:800; text-decoration:none!important; }.license-use-link:hover { gap:7px; }
html.dark-theme .license-key-icon { color:#e1b9a3; background:#172d3c; }html.dark-theme .license-status.available { color:#9fdfbd; background:#17372f; }html.dark-theme .license-status.expired { color:#ffadb6; background:#3b252d; }
@media(max-width:1050px){.unused-license-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}@media(max-width:600px){.unused-license-section{padding:17px}.unused-license-grid{grid-template-columns:1fr}.unused-license-head{align-items:flex-start}.unused-license-count{margin-top:3px}}
.devices-page .start-card h3,.add-device-page h2 { font-size:20px; font-weight:800; }.devices-page .start-card h5,.add-device-page h4 { font-size:15px; font-weight:800; }.add-device-page .card-body > p { max-width:700px; margin-right:auto; margin-left:auto; font-size:11.5px; line-height:1.65; }
.empty-device-card { min-height:390px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); align-items:center; gap:35px; padding:clamp(34px,6vw,72px); overflow:hidden; background:linear-gradient(135deg,var(--app-surface) 0%,#fbf5f1 100%); border:1px solid var(--app-border); border-radius:22px; box-shadow:0 16px 42px rgba(80,48,31,.08); }
.empty-device-copy { max-width:570px; }.empty-device-eyebrow { display:inline-flex; align-items:center; gap:6px; margin-bottom:17px; padding:7px 10px; color:#70452f; background:#f4e5dc; border:1px solid #e4c9ba; border-radius:999px; font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }.empty-device-copy h2 { margin:0 0 13px; color:var(--app-text); font-size:clamp(27px,3.2vw,40px); font-weight:800; line-height:1.14; letter-spacing:-.045em; }.empty-device-copy p { max-width:525px; margin:0 0 25px; color:var(--app-muted); font-size:12.5px; line-height:1.75; }.empty-device-actions { display:flex; align-items:center; flex-wrap:wrap; gap:15px; }.empty-device-actions span { display:inline-flex; align-items:center; gap:5px; color:var(--app-muted); font-size:10px; }
.empty-device-visual { position:relative; min-height:245px; display:grid; place-items:center; }.empty-device-visual::before,.empty-device-visual::after { content:''; position:absolute; border:1px solid #ead7cc; border-radius:50%; }.empty-device-visual::before { width:230px; height:230px; }.empty-device-visual::after { width:180px; height:180px; border-style:dashed; }
.empty-device-phone { position:relative; z-index:2; width:112px; height:180px; display:grid; place-items:center; color:#fff; background:linear-gradient(155deg,#6b422e,#b97a57); border:7px solid #fff; border-radius:27px; box-shadow:0 20px 36px rgba(112,69,47,.22); }.empty-device-phone i { font-size:53px; }.empty-device-phone span { position:absolute; bottom:9px; width:28px; height:3px; background:rgba(255,255,255,.6); border-radius:99px; }.empty-device-orbit { position:absolute; z-index:3; width:39px; height:39px; display:grid; place-items:center; color:#8f5b3f; background:#fff; border:1px solid #e6cfc2; border-radius:12px; box-shadow:0 8px 20px rgba(80,48,31,.12); font-size:19px; }.orbit-one { top:31px; right:17%; }.orbit-two { left:15%; bottom:32px; }
html.dark-theme .empty-device-card { background:linear-gradient(135deg,var(--app-surface),#102533); }html.dark-theme .empty-device-eyebrow,html.dark-theme .empty-device-orbit { color:#e2b8a1; background:#172d3c; border-color:#294252; }html.dark-theme .empty-device-phone { border-color:#172d3c; }
@media(max-width:800px){.empty-device-card{grid-template-columns:1fr;padding:35px 25px}.empty-device-copy{text-align:center;margin:auto}.empty-device-actions{justify-content:center}.empty-device-visual{min-height:220px}}
.transfer-device-page .card-header { padding:15px 19px; }.transfer-device-page .card-header h5 { font-size:14px; }.transfer-device-page .lead { font-size:13px; line-height:1.65; }.transfer-device-page label { color:var(--app-text); font-size:11px; line-height:1.65; }
html.dark-theme .devices-page .device-icon { color:#e2b8a1; background:#172d3c; border-color:#294252; }

.data-management-page { --management-danger:#b7434e; --management-warning:#ae7226; }
.management-device-bar { display:flex; align-items:center; gap:12px; margin-bottom:20px; padding:13px 16px; background:var(--app-surface); border:1px solid var(--app-border); border-radius:15px; box-shadow:0 5px 16px rgba(80,48,31,.045); }
.management-device-icon { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; color:#8f5b3f; background:#f4e5dc; border-radius:11px; font-size:20px; }
.management-device-bar > div { min-width:0; display:flex; flex-direction:column; }.management-device-bar > div span { color:var(--app-muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }.management-device-bar > div strong { overflow:hidden; color:var(--app-text); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.management-package { margin-left:auto; padding:6px 10px; color:#754c35; background:var(--app-surface-soft); border:1px solid var(--app-border); border-radius:999px; font-size:9.5px; font-weight:800; }
.management-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.management-action-card { position:relative; min-height:290px; display:flex; flex-direction:column; align-items:flex-start; padding:25px; overflow:hidden; background:var(--app-surface); border:1px solid var(--app-border); border-radius:18px; box-shadow:0 9px 26px rgba(80,48,31,.065); }
.management-action-card::after { content:''; position:absolute; width:130px; height:130px; right:-55px; top:-55px; background:currentColor; border-radius:50%; opacity:.045; }
.management-action-card .management-icon { width:46px; height:46px; display:grid; place-items:center; margin-bottom:20px; color:#8f5b3f; background:#f4e5dc; border:1px solid #e9d2c5; border-radius:13px; font-size:23px; }
.management-danger .management-icon { color:var(--management-danger); background:#fbeaec; border-color:#f1cbd0; }.management-warning .management-icon { color:var(--management-warning); background:#fff3df; border-color:#eed9b4; }
.management-copy { flex:1; }.management-eyebrow { display:block; margin-bottom:7px; color:var(--app-muted); font-size:8.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.management-copy h4 { margin:0 0 10px; color:var(--app-text); font-size:17px; font-weight:800; letter-spacing:-.02em; text-transform:none; }.management-copy p { margin:0 0 20px; color:var(--app-muted); font-size:11px; line-height:1.65; }
.management-action-card form { width:100%; }.management-action-card .btn { width:100%; }
.management-summary-card { margin-top:20px; padding:23px; background:var(--app-surface); border:1px solid var(--app-border); border-radius:18px; box-shadow:0 9px 26px rgba(80,48,31,.055); }
.management-summary-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }.management-summary-head h5 { margin:0 0 4px; color:var(--app-text); font-size:15px; font-weight:800; }.management-summary-head p { margin:0; color:var(--app-muted); font-size:10.5px; }.management-total { flex:0 0 auto; padding:7px 11px; color:#754c35; background:#f5e9e2; border-radius:999px; font-size:9.5px; font-weight:800; }
.management-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }.management-summary-item { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; background:var(--app-surface-soft); border:1px solid var(--app-border); border-radius:10px; }.management-summary-item span { overflow:hidden; color:var(--app-muted); font-size:9.5px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }.management-summary-item strong { color:#8f5b3f; font-size:10.5px; }
.management-empty { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:8px; padding:30px; color:var(--app-muted); font-size:11px; }.management-empty i { font-size:23px; }
.management-confirm-device { display:flex; align-items:center; gap:14px; margin-bottom:17px; padding:15px; background:var(--app-surface-soft); border:1px solid var(--app-border); border-radius:13px; }.management-confirm-device > i { color:#a16849; font-size:35px; }.management-confirm-device div { display:flex; flex-direction:column; }.management-confirm-device span,.management-confirm-device small { color:var(--app-muted); font-size:10px; }.management-confirm-device strong { color:var(--app-text); font-size:14px; }
html.dark-theme .management-device-icon,html.dark-theme .management-action-card .management-icon { background:#172d3c; border-color:#294252; }html.dark-theme .management-total { color:#e1bdab; background:#172d3c; }
@media(max-width:1100px){.management-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.management-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:700px){.management-grid{grid-template-columns:1fr}.management-action-card{min-height:0}.management-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.management-summary-head{align-items:flex-start;}.management-device-bar{align-items:flex-start;flex-wrap:wrap}.management-package{margin-left:50px;margin-top:-8px}}
@media(max-width:420px){.management-summary-grid{grid-template-columns:1fr}.management-summary-card{padding:17px}}

.media-gallery-wrap { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; padding:20px; }
.media-gallery-card { min-width:0; overflow:hidden; background:var(--app-surface); border:1px solid var(--app-border); border-radius:15px; box-shadow:0 5px 16px rgba(80,48,31,.06); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.media-gallery-card:hover { transform:translateY(-3px); border-color:#d5aa92; box-shadow:0 12px 26px rgba(112,69,47,.14); }
.media-gallery-preview { position:relative; aspect-ratio:4/3; display:block; overflow:hidden; background:var(--app-surface-soft); }
.media-gallery-preview img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .28s ease; }
.media-gallery-card:hover .media-gallery-preview img { transform:scale(1.035); }
.media-gallery-view { position:absolute; right:9px; bottom:9px; width:30px; height:30px; display:grid; place-items:center; color:#fff; background:rgba(35,25,20,.72); border-radius:9px; font-size:16px; opacity:0; transform:translateY(4px); transition:opacity .2s ease,transform .2s ease; backdrop-filter:blur(5px); }
.media-gallery-card:hover .media-gallery-view { opacity:1; transform:none; }
.media-gallery-missing { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:var(--app-muted); font-size:10px; }
.media-gallery-missing i { color:#c59a82; font-size:30px; }
.media-gallery-info { padding:11px 12px 12px; }
.media-gallery-info h6 { margin:0 0 7px; overflow:hidden; color:var(--app-text); font-size:11px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.media-gallery-info > div { display:flex; justify-content:space-between; gap:8px; color:var(--app-muted); font-size:8.5px; }
.media-gallery-info time { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-gallery-download { display:inline-flex; align-items:center; gap:4px; margin-top:9px; color:#8f5b3f!important; font-size:9.5px; font-weight:750; text-decoration:none!important; }
.media-gallery-actions { display:grid!important; grid-template-columns:1fr 1fr; gap:6px!important; margin-top:10px; }
.media-gallery-actions a { min-width:0; height:29px; display:inline-flex; align-items:center; justify-content:center; gap:4px; color:#70452f!important; background:#f8eee8; border:1px solid #e7cfc1; border-radius:8px; font-size:8.5px; font-weight:800; text-decoration:none!important; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.media-gallery-actions a:hover { background:#edd8cc; border-color:#d2a78e; transform:translateY(-1px); }
.media-gallery-actions a:last-child { color:#fff!important; background:linear-gradient(135deg,#a96846,#c58b6b); border-color:transparent; }
html.dark-theme .media-gallery-actions a:first-child { color:#e5c7b7!important; background:#172d3c; border-color:#294252; }
.media-gallery-empty { grid-column:1/-1; padding:75px 20px; text-align:center; color:var(--app-muted); }
.media-gallery-empty i { color:#c18a6b; font-size:48px; }.media-gallery-empty h5 { margin:12px 0 5px; color:var(--app-text); }.media-gallery-empty p { margin:0; font-size:11px; }
@media(max-width:1199px){.media-gallery-wrap{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:991px){.media-gallery-wrap{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:650px){.media-gallery-wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding:12px;}}
@media(max-width:380px){.media-gallery-wrap{grid-template-columns:1fr;}}

.blocked-feature-card { overflow: hidden; }
.blocked-feature-title { justify-content: space-between; gap: 16px; }
.blocked-feature-title > div { min-width: 0; }
.blocked-feature-description {
    margin: 4px 0 0;
    color: var(--app-muted);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.45;
}
.blocked-feature-heading { display: flex; align-items: center; gap: 14px; }
.blocked-feature-heading p { color: var(--app-muted); font-size: 11.5px; }
.blocked-feature-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; color: #8f5b3f; background: #f6e9e2; border: 1px solid #ead3c6; border-radius: 13px; font-size: 21px; }
.blocked-feature-count { margin-left: auto; padding: 6px 10px; color: #76513d; background: var(--app-surface-soft); border: 1px solid var(--app-border); border-radius: 999px; font-size: 10px; font-weight: 750; }
.blocked-feature-table th { color: var(--app-muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.blocked-feature-table td { color: var(--app-text); font-size: 11.5px; }
.blocked-number-column { width: 55px; }
.blocked-feature-value { font-weight: 650; overflow-wrap: anywhere; }
.blocked-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; color: #a33a3a; background: #fff0f0; border-radius: 999px; font-size: 10px; font-weight: 750; }
.blocked-feature-empty { padding: 68px 20px; text-align: center; }
.blocked-feature-empty > i { color: #b97a57; font-size: 48px; }
.blocked-feature-empty h5 { margin: 12px 0 6px; }
.blocked-feature-empty p { margin: 0; color: var(--app-muted); font-size: 11.5px; }
html.dark-theme .blocked-feature-icon { color: #e4b69d; background: #172b3a; border-color: #294252; }
html.dark-theme .blocked-feature-count { color: #c9d6de; }
html.dark-theme .blocked-status { color: #ffaaaa; background: rgba(190, 55, 55, .14); }
@media(max-width:575px){
    .blocked-feature-heading { align-items: flex-start; flex-wrap: wrap; }
    .blocked-feature-count { width: max-content; margin-left: 58px; margin-top: -10px; }
}

.recent-notifications-card .dashboard-countries-list {
    max-height: 410px;
    overflow-y: auto;
}
.recent-notifications-card .list-group-item {
    padding: 11px 4px;
    background: transparent;
    border-color: var(--app-border);
}
.recent-notification-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.recent-notification-number {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    display: grid;
    place-items: center;
    margin-top: 1px;
    color: #8f5b3f;
    background: #f6e9e2;
    border: 1px solid #ead3c6;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
}
.recent-notification-message {
    color: var(--app-text);
    font-size: 11.5px;
    font-weight: 550;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
html.dark-theme .recent-notification-number {
    color: #e4b69d;
    background: #172b3a;
    border-color: #294252;
}

.live-stream-panel {
    width: min(760px, 100%) !important;
    min-height: 330px;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden;
    color: var(--app-text) !important;
    background: linear-gradient(145deg, var(--app-surface) 0%, var(--app-surface-soft) 100%) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--app-shadow) !important;
    margin: 0 auto !important;
}
.live-stream-panel .card-body { padding: clamp(24px, 4vw, 44px); }
.live-stream-panel [data-view="message"] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-left: 6px;
    padding: 5px 12px;
    color: #111;
    background: #efe0d7;
    border: 1px solid #ddbeaC;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}
.live-stream-panel .carimg { width: 78px !important; height: 78px !important; object-fit: contain; margin: 10px auto 18px; }
.live-stream-panel audio { width: min(520px, 100%); margin: 12px auto; accent-color: #b97a57; }
.live-stream-panel video {
    display: block;
    width: min(680px, 100%) !important;
    min-height: 280px;
    max-height: 520px;
    margin: 12px auto 22px;
    object-fit: contain;
    background: #15110f;
    border: 1px solid #3f271b;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(63,39,27,.18);
}
.live-stream-panel .live-start-btn,
.live-stream-panel .live-stop-btn { min-width: 168px; margin: 5px; padding: 11px 20px; font-weight: 800; border-radius: 12px !important; }
.live-stream-panel .live-start-btn { color: #111 !important; background: var(--cloud-gradient) !important; border: 0; }
.live-stream-panel .live-stop-btn { color: #111 !important; background: transparent !important; border: 1px solid #b97a57 !important; box-shadow: none; }
.live-stream-panel .live-stop-btn:hover { color: #111 !important; background: #efe0d7 !important; transform: translateY(-1px); }
.live-stream-note { color: var(--app-muted); line-height: 1.65; }
.live-info-alert { color: #2d211b; background: linear-gradient(135deg,#f7ece6,#efe0d7); border: 1px solid #ddbeac; }

.live-command-grid .carhw,
.page-content:has(h6.text-uppercase) .carhw {
    color: #111 !important;
    background: linear-gradient(145deg,#fff 0%,#f8eee8 100%) !important;
    border: 1px solid #ead6ca !important;
    box-shadow: 0 8px 22px rgba(80,48,31,.08) !important;
    display: block;
    margin-right: auto !important;
    margin-left: auto !important;
}
.live-command-grid .row { justify-content: center; }
.live-command-grid [class*="col-"] { text-align: center; }
.live-command-grid form { width: 100%; text-align: center; }
.live-command-grid .carhw:hover,
.page-content:has(h6.text-uppercase) .carhw:hover { border-color: #b97a57 !important; box-shadow: 0 13px 28px rgba(185,122,87,.18) !important; transform: translateY(-3px); }

html.dark-theme .live-stream-panel [data-view="message"] { color: #f8f1ed; background: #5a3928; border-color: #8f5b3f; }
html.dark-theme .live-stream-panel .live-stop-btn { color: #f8f1ed !important; }
@media (max-width: 576px) {
    .live-stream-panel { min-height: 0; }
    .live-stream-panel video { min-height: 210px; }
    .live-stream-panel .live-start-btn, .live-stream-panel .live-stop-btn { width: 100%; min-width: 0; margin: 5px 0; }
}

/* Conversation workspace */
.conversation-app { --social-primary:#b97a57; --social-secondary:#d2a185; --social-soft:#ead2c4; --social-ink:#111; --social-gradient:linear-gradient(135deg,var(--social-primary),var(--social-secondary)); display:grid; grid-template-columns:340px minmax(0,1fr); height:calc(100vh - 190px); min-height:570px; overflow:hidden; background:var(--app-surface); border:1px solid var(--app-border); border-radius:20px; box-shadow:var(--app-shadow); }
.conversation-app.platform-whatsapp { --social-primary:#128c7e; --social-secondary:#25d366; --social-soft:#d9fdd3; --social-ink:#073b34; }
.conversation-app.platform-whatsapp-business { --social-primary:#075e54; --social-secondary:#00a884; --social-soft:#d7f7ee; --social-ink:#063c35; }
.conversation-app.platform-facebook { --social-primary:#0866ff; --social-secondary:#4b9cff; --social-soft:#dceaff; --social-ink:#082b62; }
.conversation-app.platform-instagram { --social-primary:#833ab4; --social-secondary:#fd1d1d; --social-soft:#f8dce9; --social-ink:#4d1645; --social-gradient:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); }
.conversation-app.platform-telegram { --social-primary:#168acd; --social-secondary:#54b7e8; --social-soft:#dff3fd; --social-ink:#073e5d; }
.conversation-app.platform-signal { --social-primary:#3a76f0; --social-secondary:#6b9cff; --social-soft:#dfe9ff; --social-ink:#18376f; }
.conversation-app.platform-snapchat { --social-primary:#f1dc00; --social-secondary:#fff45c; --social-soft:#fffbd1; --social-ink:#111; }
.conversation-app.platform-linkedin { --social-primary:#0a66c2; --social-secondary:#48a2dc; --social-soft:#dceefa; --social-ink:#06355f; }
.conversation-app.platform-skype { --social-primary:#00aff0; --social-secondary:#64d5ff; --social-soft:#dcf6ff; --social-ink:#06465d; }
.conversation-app.platform-viber { --social-primary:#7360f2; --social-secondary:#9c8fff; --social-soft:#e8e4ff; --social-ink:#30266f; }
.conversation-app.platform-line { --social-primary:#06c755; --social-secondary:#5ee58f; --social-soft:#dcf9e7; --social-ink:#075f2b; }
.conversation-app.platform-tinder { --social-primary:#fd267a; --social-secondary:#ff6036; --social-soft:#ffe0e9; --social-ink:#721236; --social-gradient:linear-gradient(135deg,#fd267a,#ff6036); }
.conversation-app.platform-kik { --social-primary:#68b42e; --social-secondary:#98d663; --social-soft:#e5f5d9; --social-ink:#28530c; }
.conversation-app.platform-imo { --social-primary:#1976d2; --social-secondary:#56a7ed; --social-soft:#dcecff; --social-ink:#123b65; }
.conversation-app.platform-hangouts,.conversation-app.platform-hike { --social-primary:#0f9d58; --social-secondary:#57c889; --social-soft:#dcf4e7; --social-ink:#0b4c2e; }
.conversation-app.platform-badoo { --social-primary:#783bf9; --social-secondary:#ff4a73; --social-soft:#eee3ff; --social-ink:#3b176d; --social-gradient:linear-gradient(135deg,#783bf9,#ff4a73); }
.conversation-sidebar { min-width:0; display:flex; flex-direction:column; border-right:1px solid var(--app-border); background:var(--app-surface); }
.conversation-sidebar-head,.conversation-thread-head { min-height:76px; display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--app-border); background:var(--app-surface-soft); }
.conversation-sidebar-head h5,.conversation-thread-head h5 { margin:0; color:var(--app-text); font-size:15px; font-weight:800; }
.conversation-sidebar-head span,.conversation-thread-head span { color:var(--app-muted); font-size:11px; }
.conversation-brand-icon,.conversation-avatar { flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:var(--social-ink); background:var(--social-gradient); font-size:18px; font-weight:800; }
.conversation-brand-icon { border-radius:14px; font-size:23px; }
.conversation-search { position:relative; padding:12px 14px; border-bottom:1px solid var(--app-border); }
.conversation-search i { position:absolute; top:50%; left:28px; transform:translateY(-50%); color:var(--app-muted); font-size:18px; }
.conversation-search input { width:100%; height:42px; padding:0 15px 0 42px; color:var(--app-text); background:var(--app-surface-soft); border:1px solid var(--app-border); border-radius:12px; outline:0; }
.conversation-search input:focus { border-color:#b97a57; box-shadow:0 0 0 3px rgba(185,122,87,.12); }
.conversation-list { min-height:0; overflow-y:auto; }
.conversation-contact { width:100%; display:flex; align-items:center; gap:11px; padding:13px 14px; color:var(--app-text); text-align:left; background:transparent; border:0; border-bottom:1px solid var(--app-border); }
.conversation-contact:hover,.conversation-contact.active { background:color-mix(in srgb,var(--social-primary) 14%,transparent); }
.conversation-contact.active { box-shadow:inset 3px 0 var(--social-primary); }
.conversation-contact-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }
.conversation-contact-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.conversation-contact-copy small { overflow:hidden; color:var(--app-muted)!important; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.conversation-contact-meta { align-self:stretch; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; }
.conversation-contact-meta time { max-width:76px; color:var(--app-muted); font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conversation-contact-meta b { min-width:20px; height:20px; display:grid; place-items:center; padding:0 5px; color:var(--social-ink); background:var(--social-secondary); border-radius:999px; font-size:9px; }
.conversation-main { min-width:0; position:relative; background-color:#f4eee9; background-image:radial-gradient(rgba(112,69,47,.09) 1px,transparent 1px); background-size:18px 18px; }
.conversation-thread { height:100%; display:none; flex-direction:column; }
.conversation-thread.active { display:flex; }
.conversation-thread-head { background:var(--app-surface); }
.conversation-thread-head .conversation-avatar { width:42px; height:42px; flex-basis:42px; }
.conversation-thread-head>i { color:var(--app-muted); font-size:19px; }
.conversation-back { display:none; padding:5px; color:var(--app-text); background:transparent; border:0; font-size:22px; }
.conversation-messages { flex:1; min-height:0; overflow-y:auto; padding:28px clamp(18px,5vw,70px); }
.conversation-date { display:flex; justify-content:center; margin-bottom:22px; }
.conversation-date span { padding:6px 12px; color:#5d4c42; background:#fff8f4; border:1px solid #ead6ca; border-radius:8px; font-size:10px; box-shadow:0 2px 5px rgba(63,39,27,.06); }
.message-row { display:flex; margin:7px 0; }
.message-row.outgoing { justify-content:flex-end; }
.message-bubble { position:relative; max-width:min(68%,620px); padding:10px 12px 7px; color:#17110e; background:#fff; border-radius:5px 14px 14px 14px; box-shadow:0 2px 5px rgba(63,39,27,.09); }
.message-row.outgoing .message-bubble { background:var(--social-soft); border-radius:14px 5px 14px 14px; }
.message-bubble p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.55; }
.message-bubble footer { display:flex; align-items:center; justify-content:flex-end; gap:4px; margin:4px 0 0 20px; color:#75665e; font-size:9px; }
.message-bubble footer i { color:var(--social-primary); font-size:15px; }
.conversation-readonly { min-height:56px; display:flex; align-items:center; justify-content:center; gap:7px; color:var(--app-muted); background:var(--app-surface); border-top:1px solid var(--app-border); font-size:11px; }
.conversation-empty,.conversation-placeholder { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:35px; color:var(--app-muted); text-align:center; }
.conversation-empty i,.conversation-placeholder i { font-size:48px; color:#b97a57; }
.conversation-placeholder h4 { color:var(--app-text); margin:14px 0 5px; }
html.dark-theme .conversation-main { background-color:#0a1823; background-image:radial-gradient(rgba(207,154,123,.12) 1px,transparent 1px); }
html.dark-theme .message-bubble { color:#f6eee9; background:#172c3a; }
html.dark-theme .message-row.outgoing .message-bubble { color:#f8f8f8; background:color-mix(in srgb,var(--social-primary) 55%,#142532); }

.youtube-history { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px; }
.youtube-history-card { display:grid; grid-template-columns:52px minmax(0,1fr) 38px; align-items:center; gap:13px; padding:16px; background:var(--app-surface); border:1px solid var(--app-border); border-radius:16px; box-shadow:0 6px 18px rgba(50,20,20,.06); transition:.2s ease; }
.youtube-history-card:hover { transform:translateY(-2px); border-color:#ff8c8c; box-shadow:0 12px 28px rgba(255,0,0,.12); }
.youtube-play { width:50px; height:50px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#ff0000,#cc0000); border-radius:15px; font-size:24px; }
.youtube-copy { min-width:0; }.youtube-copy h6 { margin:0 0 7px; overflow:hidden; color:var(--app-text); font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.youtube-copy span { display:flex; align-items:center; gap:5px; color:var(--app-muted); font-size:10px; }
.youtube-history-card>a { width:38px; height:38px; display:grid; place-items:center; color:#d60000!important; background:#ffe5e5; border-radius:10px; font-size:18px; }

/* Professional directory and recordings */
.content-toolbar { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:20px; padding:2px 0; }
.content-toolbar-copy h4 { margin:0 0 4px; color:var(--app-text); font-weight:800; }
.content-toolbar-copy p { margin:0; color:var(--app-muted); font-size:12px; }
.content-toolbar-actions { display:flex; flex-wrap:wrap; gap:8px; }
.directory-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:15px; }
.directory-card { display:flex; align-items:center; gap:14px; padding:18px; background:var(--app-surface); border:1px solid var(--app-border); border-radius:16px; box-shadow:0 6px 18px rgba(80,48,31,.06); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.directory-card:hover { transform:translateY(-2px); border-color:#cf9a7b; box-shadow:0 10px 26px rgba(185,122,87,.14); }
.directory-avatar { flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; color:#111; background:var(--cloud-gradient); border-radius:15px; font-size:18px; font-weight:800; }
.directory-info { min-width:0; flex:1; }
.directory-info h6 { margin:0 0 5px; overflow:hidden; color:var(--app-text); font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.directory-info a { display:block; overflow:hidden; color:var(--app-muted)!important; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.directory-action { width:37px; height:37px; display:grid; place-items:center; color:#70452f!important; background:#f5e9e2; border-radius:10px; font-size:19px; }
.recording-list { --recording-accent:#b97a57; display:flex; flex-direction:column; gap:12px; }
.recording-list--whatsapp,.recording-list--whatsapp-audio,.recording-list--whatsapp-voice { --recording-accent:#25a968; }
.recording-list--facebook { --recording-accent:#1877f2; }.recording-list--skype { --recording-accent:#00aff0; }.recording-list--hangouts { --recording-accent:#34a853; }.recording-list--truecaller { --recording-accent:#3385ff; }
.recording-item { position:relative; display:grid; grid-template-columns:52px minmax(180px,1fr) minmax(220px,1.3fr) auto; align-items:center; gap:15px; overflow:hidden; padding:17px 18px; background:var(--app-surface); border:1px solid var(--app-border); border-radius:17px; box-shadow:0 5px 16px rgba(80,48,31,.05); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.recording-item::before { content:''; position:absolute; inset:12px auto 12px 0; width:3px; background:var(--recording-accent); border-radius:0 5px 5px 0; opacity:.75; }
.recording-item:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--recording-accent) 45%,var(--app-border)); box-shadow:0 12px 28px rgba(80,48,31,.11); }
.recording-icon { width:46px; height:46px; display:grid; place-items:center; color:#111; background:color-mix(in srgb,var(--recording-accent) 22%,#fff); border:1px solid color-mix(in srgb,var(--recording-accent) 28%,transparent); border-radius:14px; font-size:22px; transition:transform .2s ease; }
.recording-item:hover .recording-icon { transform:scale(1.04); }
.recording-icon.is-incoming { color:#17633d; }.recording-icon.is-outgoing { color:#70452f; }
.recording-person h6 { margin:0 0 4px; color:var(--app-text); font-weight:800; }.recording-person span,.recording-meta span { display:block; color:var(--app-muted); font-size:11px; }
.recording-meta { display:flex; flex-wrap:wrap; gap:6px 15px; }.recording-meta span { display:inline-flex; align-items:center; gap:5px; }
.recording-controls { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:7px; }
.recording-controls form { margin:0; }
.recording-controls .icon-action { min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:0 10px; color:var(--app-text)!important; background:var(--app-surface-soft)!important; border:1px solid var(--app-border)!important; border-radius:10px; box-shadow:none; font-size:12px; font-weight:750; transition:transform .18s ease,background .18s ease,border-color .18s ease; }
.recording-controls .icon-action:hover { transform:translateY(-1px); border-color:var(--recording-accent)!important; }
.recording-controls .icon-action:not(.play-button):not(.pause-button):not(.waiting-button) { width:38px; padding:0; }
.recording-controls .play-button,.recording-controls .pause-button { min-width:72px; color:#111!important; background:linear-gradient(135deg,color-mix(in srgb,var(--recording-accent) 82%,#fff),var(--recording-accent))!important; border:0!important; }
.recording-controls .waiting-button { min-width:86px; }
.recording-controls .is-danger:hover { color:#a62b2b!important; background:#fff0f0!important; border-color:#e9aaaa!important; }
.recording-unavailable { display:inline-flex; align-items:center; gap:5px; padding:7px 10px; color:var(--app-muted); background:var(--app-surface-soft); border:1px dashed var(--app-border); border-radius:9px; font-size:10px; font-weight:700; }
.recording-empty { min-height:330px; background:var(--app-surface); border:1px dashed var(--app-border); border-radius:18px; }
html.dark-theme .recording-icon { color:#f5eee9; background:color-mix(in srgb,var(--recording-accent) 25%,#112a3d); }

/* Call recording table shared by phone and WhatsApp */
.recording-table-card { margin-top: 4px; }
.recording-table-card .table-responsive { overflow-x: auto; }
.recording-data-table th,
.recording-data-table td { text-align: center !important; white-space: nowrap; }
.recording-data-table .recording-table-name { min-width: 130px; color: var(--app-text); font-weight: 650; }
.direction-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 82px;
    padding: 6px 10px;
    color: #17633d;
    background: #ddf5e9;
    border: 1px solid #c6ead9;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
}
.direction-pill.is-incoming { color: #9a3943; background: #fbe8ea; border-color: #f1cfd3; }
.direction-pill i { font-size: 13px; }
.table-audio-actions { display: flex; align-items: center; justify-content: center; gap: 6px; }
.table-audio-button {
    min-width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 9px;
    color: #111 !important;
    background: linear-gradient(135deg,#d6a98f,#b97a57) !important;
    border: 0 !important;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(185,122,87,.18);
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none !important;
    transition: transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.table-audio-button:hover { color:#111 !important; transform:translateY(-1px); filter:saturate(1.08); box-shadow:0 7px 14px rgba(185,122,87,.27); }
.table-audio-button:active { transform:scale(.96); }
.table-audio-button i { font-size: 14px; }
html.dark-theme .direction-pill { color:#9ce0bb; background:#173a31; border-color:#275848; }
html.dark-theme .direction-pill.is-incoming { color:#ffc1c7; background:#3b252d; border-color:#68404a; }
@media(max-width:700px){
    .recording-table-card .table-responsive { padding-right:12px !important; padding-left:12px !important; }
    .recording-data-table th,.recording-data-table td { font-size:10px !important; }
}

/* Consistent refresh and destructive actions */
.page-content .btn,
.modal-footer .btn,
.modal-footer a.btn,
.modal-footer a > button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 17px;
    border-radius: 12px !important;
    font-size: 11.5px;
    font-weight: 750;
    letter-spacing: .005em;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease !important;
}
.page-content .btn:hover,
.modal-footer .btn:hover,
.modal-footer a > button:hover { transform: translateY(-1px); }
.page-content .btn:active,
.modal-footer .btn:active,
.modal-footer a > button:active { transform: translateY(0) scale(.98); }

/* Refresh / neutral actions */
.page-content .btn-light-secondary,
.page-content .btn-outline-primary,
.page-content a.btn-light,
.content-toolbar-actions .btn-outline-primary {
    color: #70452f !important;
    background: linear-gradient(135deg,#fbf5f1,#f4e4da) !important;
    border: 1px solid #dfc1b0 !important;
    box-shadow: 0 5px 14px rgba(112,69,47,.08) !important;
}
.page-content .btn-light-secondary:hover,
.page-content .btn-outline-primary:hover,
.page-content a.btn-light:hover,
.content-toolbar-actions .btn-outline-primary:hover {
    color: #3f271b !important;
    background: linear-gradient(135deg,#f4e4da,#ead0c1) !important;
    border-color: #c99273 !important;
    box-shadow: 0 8px 18px rgba(112,69,47,.16) !important;
}

/* Delete actions remain visually distinct from primary theme buttons */
.page-content button.btn-light-danger,
.page-content .btn-outline-danger,
.content-toolbar-actions .btn-outline-danger {
    color: #a23b45 !important;
    background: linear-gradient(135deg,#fff8f8,#fbe9eb) !important;
    border: 1px solid #efc1c6 !important;
    box-shadow: 0 5px 14px rgba(162,59,69,.07) !important;
}
.page-content button.btn-light-danger:hover,
.page-content .btn-outline-danger:hover,
.content-toolbar-actions .btn-outline-danger:hover {
    color: #7f222c !important;
    background: linear-gradient(135deg,#fcebed,#f6d5d9) !important;
    border-color: #dc8e97 !important;
    box-shadow: 0 8px 18px rgba(162,59,69,.15) !important;
}
.modal-footer .btn-danger,
.modal-footer a > .btn-danger {
    color: #fff !important;
    background: linear-gradient(135deg,#c94f5a,#a9323d) !important;
    border: 0 !important;
    box-shadow: 0 7px 17px rgba(169,50,61,.22) !important;
}
.modal-footer .btn-danger:hover,
.modal-footer a > .btn-danger:hover {
    color: #fff !important;
    background: linear-gradient(135deg,#b63f4a,#8f2731) !important;
    box-shadow: 0 9px 21px rgba(169,50,61,.3) !important;
}
.modal-footer a { text-decoration: none !important; }
.radius-30,.small-btn-tag { border-radius: 12px !important; }
html.dark-theme .page-content .btn-light-secondary,
html.dark-theme .page-content .btn-outline-primary,
html.dark-theme .page-content a.btn-light {
    color: #f1d7c8 !important;
    background: linear-gradient(135deg,#172f40,#1d3647) !important;
    border-color: #365264 !important;
}
html.dark-theme .page-content button.btn-light-danger,
html.dark-theme .page-content .btn-outline-danger {
    color: #ffb8bf !important;
    background: linear-gradient(135deg,#321f29,#3d232d) !important;
    border-color: #70404a !important;
}

/* Modern data lists - shared by every legacy table page */
.page-content > .card:not(.live-stream-panel) {
    overflow: hidden;
    border: 1px solid var(--app-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(80,48,31,.07) !important;
}
.page-content > .card:not(.live-stream-panel) > .card-body:has(> .card-title) { padding: 0; }
.page-content > .card:not(.live-stream-panel) .card-title {
    display: flex;
    align-items: center;
    min-height: 72px;
    margin: 0 !important;
    padding: 18px 22px;
    background: linear-gradient(135deg,rgba(185,122,87,.12),rgba(210,161,133,.035));
    border-bottom: 1px solid var(--app-border);
}
.page-content > .card:not(.live-stream-panel) .card-title h4 {
    margin: 0;
    line-height: 1.35;
    color: var(--app-text);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.page-content > .card:not(.live-stream-panel) .card-title h4::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 22px;
    margin-right: 10px;
    vertical-align: -4px;
    background: var(--cloud-gradient);
    border-radius: 999px;
}
.page-content > .card:not(.live-stream-panel) .card-title + hr { display: none; }
.page-content > .card:not(.live-stream-panel) > .card-body > :is(h1,h2,h3,h4,h5,h6):first-child,
.page-content > .card:not(.live-stream-panel) > .card-body > .d-flex:first-child :is(h1,h2,h3,h4,h5,h6) {
    line-height: 1.35;
}
.page-content > .card:not(.live-stream-panel) .table-responsive { padding: 8px 20px 20px; border: 0 !important; }

.dataTables_wrapper { color: var(--app-text); padding-top: 10px; }
.dataTables_wrapper .row:first-child,
.dataTables_wrapper .row:last-child { align-items: center; padding: 10px 2px; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info { color: var(--app-muted); font-size: 12px; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.dataTables_wrapper .dataTables_filter label { justify-content: flex-end; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    height: 40px;
    margin: 0 !important;
    padding: 7px 12px;
    color: var(--app-text);
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    outline: none;
}
.dataTables_wrapper .dataTables_filter input { width: min(230px,50vw); padding-left: 14px; }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus { border-color: #b97a57; box-shadow: 0 0 0 3px rgba(185,122,87,.13); }

.page-content table.dataTable,
.page-content table.table { margin: 8px 0 10px !important; border: 0 !important; border-collapse: separate !important; border-spacing: 0 7px !important; }
.page-content table.dataTable thead th,
.page-content table.table thead th {
    padding: 12px 14px !important;
    color: #4b3930;
    background: #f5ebe5;
    border: 0 !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
}
.page-content table.dataTable thead th:first-child,
.page-content table.table thead th:first-child { border-radius: 10px 0 0 10px; }
.page-content table.dataTable thead th:last-child,
.page-content table.table thead th:last-child { border-radius: 0 10px 10px 0; }
.page-content table.dataTable tbody tr,
.page-content table.table tbody tr { background: var(--app-surface) !important; box-shadow: 0 2px 9px rgba(80,48,31,.045); transition: transform .18s ease,box-shadow .18s ease; }
.page-content table.dataTable tbody tr:hover,
.page-content table.table tbody tr:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(185,122,87,.12); }
.page-content table.dataTable tbody td,
.page-content table.table tbody td {
    padding: 13px 14px !important;
    color: var(--app-text);
    background: transparent !important;
    border-top: 1px solid var(--app-border) !important;
    border-bottom: 1px solid var(--app-border) !important;
    border-right: 0 !important;
    border-left: 0 !important;
    vertical-align: middle;
    font-size: 12px;
}
.page-content table.dataTable tbody td:first-child,
.page-content table.table tbody td:first-child { border-left: 1px solid var(--app-border) !important; border-radius: 11px 0 0 11px; }
.page-content table.dataTable tbody td:last-child,
.page-content table.table tbody td:last-child { border-right: 1px solid var(--app-border) !important; border-radius: 0 11px 11px 0; }
.page-content table.dataTable tfoot,
.page-content table.table tfoot { display: none; }
.page-content table.dataTable tbody td.dataTables_empty {
    height: 170px;
    color: var(--app-muted) !important;
    background: linear-gradient(135deg,var(--app-surface),var(--app-surface-soft)) !important;
    border: 1px dashed #d7b8a6 !important;
    border-radius: 14px !important;
    font-size: 13px;
    font-weight: 600;
}
.page-content table.dataTable tbody td.dataTables_empty::before {
    content: '\e9f7';
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    color: #8f5b3f;
    background: linear-gradient(135deg,#f5e9e2,#fbf5f1);
    border: 1px solid #e6cec0;
    border-radius: 16px;
    font-family: boxicons !important;
    font-size: 27px;
    font-weight: 400;
    box-shadow: 0 7px 18px rgba(112,69,47,.09);
}
html.dark-theme .page-content table.dataTable tbody td.dataTables_empty::before {
    color: #e1b9a3;
    background: var(--app-surface-soft);
    border-color: var(--app-border);
}
.app-usage-icon { width:38px; height:38px; display:inline-grid; place-items:center; overflow:hidden; vertical-align:middle; background:linear-gradient(135deg,#f5e9e2,#fff); border:1px solid #e7d2c6; border-radius:11px; box-shadow:0 4px 11px rgba(80,48,31,.08); }
.app-usage-icon img { width:28px; height:28px; display:block; object-fit:contain; border-radius:7px; }
.app-usage-icon-fallback { width:100%; height:100%; place-items:center; color:#8f5b3f; font-size:20px; }
html.dark-theme .app-usage-icon { background:var(--app-surface-soft); border-color:var(--app-border); }
.keylogger-label { min-width:150px; display:flex; align-items:center; gap:10px; }
.keylogger-label > span:last-child { max-width:180px; overflow:hidden; color:var(--app-text); font-size:11px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }

/* Dashboard workspace */
.dashboard-page { padding-top:24px; }
.dashboard-page > .row { row-gap:18px; margin-bottom:2px; }
.dashboard-page .card {
    background:var(--app-surface) !important;
    border:1px solid var(--app-border) !important;
    border-radius:18px !important;
    box-shadow:0 8px 24px rgba(80,48,31,.065) !important;
}
.dashboard-page .card1 { transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease !important; }
.dashboard-page .card1:hover { transform:translateY(-3px) !important; border-color:#d2a58c !important; box-shadow:0 15px 32px rgba(80,48,31,.13) !important; }
.dashboard-page > .row:first-child .card {
    height:104px;
    overflow:hidden;
    background:linear-gradient(145deg,var(--app-surface),#f8eee8) !important;
    border-color:#e4cfc3 !important;
}
.dashboard-page > .row:first-child .card::before { content:''; position:absolute; inset:0 auto 0 0; width:4px; background:var(--cloud-gradient); }
.dashboard-page > .row:first-child .card a { display:block; height:100%; color:inherit !important; }
.dashboard-page > .row:first-child .card .card-body { height:100%; padding:14px 18px; }
.dashboard-shortcuts > [class*="col-"] { display:flex; }
.dashboard-shortcuts { margin-bottom:18px !important; }
.dashboard-shortcuts .card { width:100%; margin-bottom:0; }
.dashboard-shortcuts .card-body > .d-flex { position:relative; height:100%; }
.dashboard-shortcuts .card-body > .d-flex > div:first-child { min-width:0; }
.dashboard-page > .row:first-child .card h1 { width:38px; height:38px; display:grid; place-items:center; margin-top:6px; color:#70452f !important; background:#f1ded3; border-radius:11px; font-size:20px; }
.dashboard-page > .row:first-child .card p:first-child { overflow:hidden; color:var(--app-text) !important; font-size:11.5px; line-height:1.35; font-weight:800 !important; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-page > .row:first-child .card .ms-auto { position:absolute; right:0; bottom:4px; }
.dashboard-page > .row:first-child .card .ms-auto p { display:inline-flex; align-items:center; gap:4px; color:#8f5b3f !important; font-size:10px !important; font-weight:700; white-space:nowrap; }
.dashboard-page > .row:first-child .card:hover .ms-auto p { transform:translateX(2px); }

.dashboard-page .card > .card-body h5 { color:var(--app-text); font-size:15px; font-weight:800; letter-spacing:-.015em; }
.dashboard-page .card > .card-body h5::before { content:''; display:inline-block; width:4px; height:17px; margin-right:8px; vertical-align:-3px; background:var(--cloud-gradient); border-radius:99px; }
.dashboard-page .list-group-item { min-height:48px; padding:12px 18px; color:var(--app-text); border-color:var(--app-border) !important; transition:background .18s ease,padding-left .18s ease; }
.dashboard-page .list-group-item:hover { padding-left:21px; background:var(--app-surface-soft) !important; }
.dashboard-page .list-group-item strong { color:#554b45; font-size:11px; font-weight:750; }
.dashboard-page .list-group-item span { max-width:55%; color:var(--app-muted); font-size:11px; text-align:right; overflow-wrap:anywhere; }

.dashboard-page .card .card .card-body { padding:20px 12px; }
.dashboard-page .card .card .widgets-icons { width:50px; height:50px; display:grid; place-items:center; color:#111 !important; background:var(--cloud-gradient) !important; border:0; border-radius:15px !important; box-shadow:0 7px 16px rgba(185,122,87,.21); font-size:22px; }
.dashboard-page .card .card p.text-black { color:var(--app-text) !important; font-size:11px; font-weight:750; }
.dashboard-page .card .card:hover .widgets-icons { transform:scale(1.05); }

.dashboard-social-list { max-height:500px; overflow-y:auto; padding-right:4px; }
.dashboard-countries-list { max-height:455px; overflow-y:auto; padding-right:4px; }
.dashboard-social-list::-webkit-scrollbar,.dashboard-countries-list::-webkit-scrollbar { width:5px; }
.dashboard-social-list::-webkit-scrollbar-thumb,.dashboard-countries-list::-webkit-scrollbar-thumb { background:#d9b7a4; border-radius:99px; }
.dashboard-social-list .list-group-item { margin-bottom:6px; padding:10px 12px; background:var(--app-surface-soft) !important; border:1px solid var(--app-border) !important; border-radius:12px !important; }
.dashboard-social-list .widgets-social { width:38px; height:38px; display:grid; place-items:center; box-shadow:0 4px 10px rgba(80,48,31,.1); font-size:17px; }
.dashboard-social-list h6 { color:var(--app-text); font-size:11px; font-weight:750; }
.dashboard-social-list .ms-auto a { display:inline-flex; align-items:center; min-height:31px; padding:0 10px; color:#70452f !important; background:#f4e4da; border-radius:9px; font-size:9.5px; font-weight:750; }
.dashboard-social-list .ms-auto a:hover { background:#ead0c1; }

.dashboard-page .table-responsive { border:0 !important; border-radius:12px; }
.dashboard-page .table { margin:0; }
.dashboard-page .table thead th { color:#6f5c51; background:#f6ece6 !important; font-size:9px; letter-spacing:.055em; text-transform:uppercase; }
.dashboard-page .table tbody td { color:var(--app-text); font-size:10.5px; }
.dashboard-page .text-center:not(td):not(th) { color:var(--app-muted); font-size:11px; }
html.dark-theme .dashboard-page > .row:first-child .card { background:linear-gradient(145deg,var(--app-surface),#162b3a) !important; border-color:var(--app-border) !important; }
html.dark-theme .dashboard-page > .row:first-child .card h1 { color:#e8c6b3 !important; background:#263c4a; }
html.dark-theme .dashboard-page .list-group-item strong { color:#d8e3e9; }
html.dark-theme .dashboard-social-list .ms-auto a { color:#e8c6b3 !important; background:#243b4a; }
html.dark-theme .dashboard-page .table thead th { color:#d4c0b5; background:#172d3c !important; }
@media(max-width:767px){
    .dashboard-page { padding-top:18px; }
    .dashboard-shortcuts { margin-bottom:14px !important; }
    .dashboard-page > .row:first-child .card { height:100px; }
    .dashboard-page .card { border-radius:15px !important; }
}
.contact-data-table th,.contact-data-table td { text-align:center !important; vertical-align:middle !important; }
.contact-list-person { min-width:180px; display:inline-flex; align-items:center; gap:10px; text-align:left; }
.contact-list-avatar { width:34px; height:34px; display:grid; flex:0 0 34px; place-items:center; color:#111; background:var(--cloud-gradient); border-radius:10px; font-size:12px; font-weight:800; box-shadow:0 4px 10px rgba(185,122,87,.16); }
.contact-list-person strong { max-width:260px; overflow:hidden; color:var(--app-text); font-size:12px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.contact-list-number { color:var(--app-muted); font-size:12px; }
.contact-call-action { min-width:65px; height:34px; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:0 11px; color:#111 !important; background:var(--cloud-gradient); border-radius:10px; box-shadow:0 5px 12px rgba(185,122,87,.18); font-size:10.5px; font-weight:750; transition:transform .18s ease,box-shadow .18s ease; }
.contact-call-action:hover { color:#111 !important; transform:translateY(-1px); box-shadow:0 8px 16px rgba(185,122,87,.27); }
@media(max-width:700px){.contact-list-person{min-width:145px}.contact-list-person strong{max-width:160px}}
.dataTables_wrapper .pagination { gap: 5px; justify-content: flex-end; }
.dataTables_wrapper .page-link {
    min-width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0 10px;
    color: #70452f;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 9px !important;
    font-size: 11px;
}
.dataTables_wrapper .page-item.active .page-link { color: #111 !important; background: var(--cloud-gradient); box-shadow: 0 5px 13px rgba(185,122,87,.22); }
.dataTables_wrapper .page-item.disabled .page-link { color: var(--app-muted); opacity: .55; background: var(--app-surface-soft); }
.page-content .custom-btn-small { display: inline-flex; align-items: center; justify-content: center; min-width: 78px; padding: 6px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.page-content .btn-light-success,.page-content .btn-light-info { color: #23543e; background: #def3e7; }
.page-content .btn-light-danger { color: #8b3340; background: #f9e1e4; }
.page-content .btn-light-warning { color: #715415; background: #f8edcd; }
.page-content .btn-light-dark { color: #34302d; background: #e9e5e2; }
html.dark-theme .page-content table.dataTable thead th,
html.dark-theme .page-content table.table thead th { color: #eaded7; background: #263947; }
html.dark-theme .page-content table.dataTable tbody td.dataTables_empty { border-color: #634936 !important; }
@media(max-width:767px){
    .page-content > .card:not(.live-stream-panel) .table-responsive { padding: 5px 12px 15px; }
    .dataTables_wrapper .dataTables_filter label { justify-content: flex-start; margin-top: 9px; }
    .dataTables_wrapper .dataTables_filter input { flex:1; width:auto; }
    .dataTables_wrapper .dataTables_info { margin-bottom: 10px; text-align:left!important; }
    .dataTables_wrapper .pagination { justify-content:flex-start; }
}
@media(max-width:900px){.conversation-app{grid-template-columns:300px minmax(0,1fr)}.recording-item{grid-template-columns:48px 1fr auto}.recording-meta{grid-column:2/4}}
@media(max-width:700px){.conversation-app{display:block;height:calc(100vh - 155px);min-height:520px}.conversation-sidebar{height:100%;border:0}.conversation-main{display:none;height:100%}.conversation-app.thread-open .conversation-sidebar{display:none}.conversation-app.thread-open .conversation-main{display:block}.conversation-back{display:block}.message-bubble{max-width:84%}.content-toolbar{align-items:flex-start;flex-direction:column}.recording-item{grid-template-columns:44px 1fr}.recording-meta,.recording-controls{grid-column:1/3}.recording-controls{justify-content:flex-start}}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }