:root {
    --ui-primary: #4f46e5;
    --ui-primary-dark: #4338ca;
    --ui-primary-soft: #eef2ff;
    --ui-accent: #0ea5e9;
    --ui-success: #16a34a;
    --ui-warning: #d97706;
    --ui-danger: #dc2626;
    --ui-info: #0284c7;
    --ui-bg: #f6f7fb;
    --ui-surface: #ffffff;
    --ui-surface-2: #f8fafc;
    --ui-border: #e7eaf1;
    --ui-text: #172033;
    --ui-muted: #6b7280;
    --ui-sidebar: 272px;
    --ui-header: 72px;
    --ui-radius: 18px;
    --ui-radius-sm: 12px;
    --ui-shadow: 0 12px 30px rgba(32, 41, 74, .07);
    --ui-shadow-sm: 0 5px 16px rgba(32, 41, 74, .06);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--ui-primary); text-decoration: none; transition: .2s ease; }
a:hover { color: var(--ui-primary-dark); text-decoration: none; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1,h2,h3,h4,h5,h6,p { margin-top: 0; }
h1,h2,h3,h4,h5,h6 { color: var(--ui-text); line-height: 1.25; }

/* Core layout */
.page, .page-main { min-height: 100vh; }
.app-content {
    margin-left: var(--ui-sidebar);
    padding: calc(var(--ui-header) + 28px) 28px 30px;
    min-height: calc(100vh - 70px);
    transition: margin-left .25s ease;
}
.side-app { width: 100%; max-width: 1500px; margin: 0 auto; }
.container, .container-fluid { width: 100%; margin: 0 auto; padding: 0 18px; }
.container { max-width: 1180px; }

.app-header {
    position: fixed;
    z-index: 1040;
    top: 0;
    right: 0;
    left: var(--ui-sidebar);
    height: var(--ui-header);
    background: rgba(255,255,255,.94) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--ui-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 18px rgba(32,41,74,.025);
    transition: left .25s ease;
}
.app-header .container-fluid, .app-header .d-flex { height: 100%; }
.app-header .d-flex { align-items: center; gap: 12px; }
#particles-js { display: none !important; }
.header-brand { display: none; }
.app-sidebar__toggle {
    width: 42px; height: 42px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ui-text); background: var(--ui-surface-2); border: 1px solid var(--ui-border);
    flex: 0 0 auto;
}
.app-sidebar__toggle::before { content: "\f479"; font-family: "bootstrap-icons"; font-size: 21px; line-height: 1; }
.app-sidebar__toggle:hover { background: var(--ui-primary-soft); color: var(--ui-primary); border-color: #dfe3ff; }
.topbar-title { min-width: 0; }
.topbar-title strong { display:block; font-size: 15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-title small { color: var(--ui-muted); font-size: 12px; }
.topbar-balance {
    display: flex; align-items: center; gap: 8px; margin-left: auto;
    background: var(--ui-primary-soft); color: var(--ui-primary-dark);
    border: 1px solid #dfe3ff; border-radius: 12px; padding: 8px 12px; font-weight: 700;
}
.topbar-balance i { font-size: 17px; }
.topbar-profile { margin-left: 2px; position: relative; }
.topbar-profile > a {
    min-height: 44px; display:flex; align-items:center; gap:10px; padding:4px 8px;
    border-radius: 12px; color: var(--ui-text);
}
.topbar-profile > a:hover { background: var(--ui-surface-2); }
.avatar {
    width: 38px; height: 38px; display:inline-flex; align-items:center; justify-content:center;
    border-radius: 50%; background-position:center; background-size:cover; background-color:#eef0f5;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ui-border);
}
.avatar-md { width: 40px; height: 40px; }
.brround { border-radius: 50%; }

/* Sidebar */
.app-sidebar {
    position: fixed; z-index: 1050; inset: 0 auto 0 0;
    width: var(--ui-sidebar); background: #fff; border-right: 1px solid var(--ui-border);
    padding: 18px 14px 22px; overflow-y: auto; overscroll-behavior: contain;
    transition: transform .25s ease;
}
.sidebar-brand {
    display:flex; align-items:center; gap:11px; min-height: 46px; padding: 0 8px 18px;
    border-bottom: 1px solid var(--ui-border); margin-bottom: 14px;
}
.sidebar-brand-mark {
    width: 38px; height: 38px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    border-radius: 12px; color:#fff; font-size:20px;
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-accent));
    box-shadow: 0 8px 18px rgba(79,70,229,.22);
}
.sidebar-brand-text { min-width:0; }
.sidebar-brand-text strong { display:block; color:var(--ui-text); font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-brand-text span { display:block; color:var(--ui-muted); font-size:11px; margin-top:1px; }
.app-sidebar__user { margin: 8px 0 16px; padding: 10px; border-radius: 14px; background: var(--ui-surface-2); border: 1px solid var(--ui-border); }
.app-sidebar__user .nav-link { display:flex; align-items:center; color: var(--ui-text); }
.app-sidebar__user .app-sidebar__user-name { color: var(--ui-text) !important; }
.app-sidebar__user .text-muted { color: var(--ui-muted) !important; }
.side-menu { list-style:none; padding:0; margin:0; }
.side-menu > li { margin: 3px 0; }
.side-menu__item {
    width:100%; min-height:44px; display:flex; align-items:center; gap:12px; padding: 10px 12px;
    color:#4b5563; border-radius: 12px; font-weight:600; position:relative;
}
.side-menu__item:hover, .side-menu__item.active { background: var(--ui-primary-soft); color: var(--ui-primary-dark); }
.side-menu__icon { width:22px; font-size:18px; text-align:center; color:#7b8496; }
.side-menu__item:hover .side-menu__icon, .side-menu__item.active .side-menu__icon { color:var(--ui-primary); }
.side-menu__label { flex:1; min-width:0; }
.angle { margin-left:auto; font-size:13px; transition: transform .2s ease; }
.slide.is-open > .side-menu__item .angle { transform: rotate(90deg); }
.slide-menu { list-style:none; margin:4px 0 8px 43px; padding:0; display:none; }
.slide.is-open > .slide-menu { display:block; }
.slide-item { display:block; color:#687084; padding:8px 10px; border-radius:9px; font-size:13px; font-weight:500; }
.slide-item:hover, .slide-item.active { color:var(--ui-primary-dark); background:#f4f5ff; }
.app-sidebar__overlay { display:none; position:fixed; inset:0; z-index:1045; background:rgba(15,23,42,.38); backdrop-filter:blur(2px); }

/* Page heading */
.page-header { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:24px; }
.page-title { margin:0; font-size:25px; font-weight:800; letter-spacing:-.025em; }
.page-subtitle { color:var(--ui-muted); margin:5px 0 0; font-size:13px; }
.breadcrumb { list-style:none; display:flex; align-items:center; gap:7px; padding:0; margin:0; color:var(--ui-muted); font-size:12px; }
.breadcrumb-item { display:flex; align-items:center; gap:7px; }
.breadcrumb-item + .breadcrumb-item::before { content:"/"; color:#c0c5d0; margin-right:1px; }
.breadcrumb-item a { color:var(--ui-muted); }
.breadcrumb-item.active { color:var(--ui-text); }

/* Grid */
.row { display:flex; flex-wrap:wrap; margin-left:-8px; margin-right:-8px; }
.row > [class*="col-"] { width:100%; padding-left:8px; padding-right:8px; }
.col, .col-12 { width:100%; }
.col-6 { width:50% !important; }
.col-4 { width:33.333333% !important; }
.col-3 { width:25% !important; }
.row-cards > [class*="col-"] { margin-bottom:16px; }
@media (min-width:576px) {
    .col-sm-5{width:41.666667%!important}.col-sm-6{width:50%!important}.col-sm-7{width:58.333333%!important}.col-sm-12{width:100%!important}
}
@media (min-width:768px) {
    .col-md-2{width:16.666667%!important}.col-md-3{width:25%!important}.col-md-4{width:33.333333%!important}.col-md-5{width:41.666667%!important}.col-md-6{width:50%!important}.col-md-7{width:58.333333%!important}.col-md-8{width:66.666667%!important}.col-md-9{width:75%!important}.col-md-10{width:83.333333%!important}.col-md-12{width:100%!important}
}
@media (min-width:992px) {
    .col-lg-3{width:25%!important}.col-lg-4{width:33.333333%!important}.col-lg-6{width:50%!important}.col-lg-7{width:58.333333%!important}.col-lg-9{width:75%!important}.col-lg-12{width:100%!important}
    .col-lg-offset-1{margin-left:8.333333%}
}

/* Cards */
.card, .card-page {
    position:relative; background:var(--ui-surface); border:1px solid var(--ui-border);
    border-radius:var(--ui-radius); box-shadow:var(--ui-shadow-sm); margin-bottom:16px; overflow:hidden;
}
.card-header { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 20px; border-bottom:1px solid var(--ui-border); }
.card-title { margin:0; font-size:16px; font-weight:750; letter-spacing:-.01em; }
.card-body { padding:20px; }
.card-footer { padding:16px 20px; border-top:1px solid var(--ui-border); background:#fbfcfe; }
.card-options { display:flex; align-items:center; gap:4px; }
.card-options a { width:32px; height:32px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; color:var(--ui-muted); }
.card-options a:hover { background:var(--ui-surface-2); color:var(--ui-text); }
.card-collapsed .card-body, .card-collapsed .card-footer { display:none; }
.card-status { height:3px; position:absolute; z-index:2; top:0; left:0; right:0; }
.bg-green{background:var(--ui-success)!important}.bg-danger{background:var(--ui-danger)!important}.bg-orange{background:#f59e0b!important}.bg-primary{background:var(--ui-primary)!important}
.br-tr-3,.br-tl-3 { border-radius:0; }

/* Modern stat cards */
.ui-stats { margin-bottom: 8px; }
.ui-stat-card { height:100%; padding:18px; display:flex; align-items:center; gap:14px; }
.ui-stat-icon { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:21px; background:var(--ui-primary-soft); color:var(--ui-primary); flex:0 0 auto; }
.ui-stat-icon.success { background:#ecfdf3; color:#15803d; }
.ui-stat-icon.warning { background:#fff7ed; color:#c2410c; }
.ui-stat-icon.info { background:#eff8ff; color:#0369a1; }
.ui-stat-copy { min-width:0; }
.ui-stat-label { color:var(--ui-muted); font-size:12px; font-weight:600; margin-bottom:4px; }
.ui-stat-value { color:var(--ui-text); font-size:22px; font-weight:800; line-height:1.15; letter-spacing:-.025em; word-break:break-word; }
.ui-stat-note { color:var(--ui-muted); font-size:11px; margin-top:5px; }
.ui-balance-card { padding:22px; color:#fff; border:0; background:linear-gradient(135deg,#4f46e5 0%,#6366f1 48%,#0ea5e9 120%); box-shadow:0 18px 38px rgba(79,70,229,.18); }
.ui-balance-card h2,.ui-balance-card h3,.ui-balance-card p,.ui-balance-card a { color:#fff; }
.ui-balance-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.ui-balance-icon { width:48px;height:48px;border-radius:15px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:22px; }
.ui-balance-label { opacity:.78; font-size:12px; font-weight:600; }
.ui-balance-value { font-size:30px; font-weight:850; letter-spacing:-.04em; margin:6px 0 0; }
.ui-balance-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.ui-balance-actions .btn { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.22); }
.ui-balance-actions .btn:hover { background:#fff; color:var(--ui-primary); }

/* Quick actions */
.ui-quick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.ui-quick-link { padding:14px 10px; min-height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; border:1px solid var(--ui-border); border-radius:14px; color:#4b5563; background:#fff; font-weight:650; font-size:12px; text-align:center; }
.ui-quick-link i { width:36px;height:36px;border-radius:11px;background:var(--ui-primary-soft);color:var(--ui-primary);display:flex;align-items:center;justify-content:center;font-size:18px; }
.ui-quick-link:hover { transform:translateY(-2px); border-color:#d9dcff; box-shadow:var(--ui-shadow-sm); color:var(--ui-primary-dark); }

/* Forms */
.form-group { margin-bottom:16px; }
.form-label, .control-label, label { display:inline-block; margin-bottom:7px; color:#3f485a; font-size:12px; font-weight:700; }
.form-control {
    display:block; width:100%; min-height:44px; padding:10px 13px;
    border:1px solid #dfe3eb; border-radius:11px; background:#fff; color:var(--ui-text);
    outline:none; box-shadow:none; transition:border-color .18s,box-shadow .18s,background .18s;
}
.form-control::placeholder { color:#a1a8b5; }
.form-control:focus { border-color:#a9a5ff; box-shadow:0 0 0 3px rgba(79,70,229,.10); }
.form-control[readonly], .form-control:disabled { background:#f5f7fa; color:#697386; }
textarea.form-control { min-height:96px; resize:vertical; }
select.form-control { appearance:auto; }
.form-text, .help-block { display:block; margin-top:6px; color:var(--ui-muted); font-size:11px; }
.form-horizontal .form-group { align-items:center; }
.col-form-label { padding-top:10px; }
.input-group { display:flex; width:100%; align-items:stretch; }
.input-group .form-control { flex:1 1 auto; min-width:0; }
.input-group-prepend,.input-group-append { display:flex; }
.input-group-prepend .btn { border-top-left-radius:0; border-bottom-left-radius:0; margin-left:-1px; }
.input-group-append .btn { border-top-right-radius:0; border-bottom-right-radius:0; margin-left:-1px; }
.input-group > .form-control:not(:last-child) { border-top-right-radius:0; border-bottom-right-radius:0; }

/* Buttons */
.btn { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 14px; border:1px solid transparent; border-radius:11px; font-weight:700; font-size:12px; line-height:1.2; transition:.18s ease; user-select:none; vertical-align:middle; }
.btn:hover { transform:translateY(-1px); box-shadow:0 6px 14px rgba(32,41,74,.08); }
.btn:active { transform:translateY(0); }
.btn-primary { color:#fff; background:var(--ui-primary); border-color:var(--ui-primary); }
.btn-primary:hover { color:#fff; background:var(--ui-primary-dark); border-color:var(--ui-primary-dark); }
.btn-secondary { color:#4b5563; background:#fff; border-color:var(--ui-border); }
.btn-secondary:hover { color:var(--ui-text); background:#f8fafc; }
.btn-success { color:#fff; background:var(--ui-success); border-color:var(--ui-success); }
.btn-danger { color:#fff; background:var(--ui-danger); border-color:var(--ui-danger); }
.btn-warning { color:#fff; background:var(--ui-warning); border-color:var(--ui-warning); }
.btn-info { color:#fff; background:var(--ui-info); border-color:var(--ui-info); }
.btn-light { color:#4b5563; background:#f8fafc; border-color:var(--ui-border); }
.btn-sm { min-height:32px; padding:6px 10px; border-radius:9px; font-size:11px; }
.btn-lg { min-height:48px; padding:12px 18px; font-size:13px; }
.btn-block { display:flex; width:100%; }
.btn-icon { width:40px; padding:0; flex:0 0 auto; }

/* Alerts */
.alert { position:relative; padding:13px 44px 13px 42px; border:1px solid transparent; border-radius:13px; margin-bottom:16px; font-size:12px; }
.alert::before { position:absolute; left:14px; top:13px; font-family:"bootstrap-icons"; font-size:17px; }
.alert-success { color:#166534; background:#f0fdf4; border-color:#d5f5df; }
.alert-success::before { content:"\f26a"; }
.alert-danger { color:#991b1b; background:#fef2f2; border-color:#fee2e2; }
.alert-danger::before { content:"\f33a"; }
.alert-warning { color:#92400e; background:#fffbeb; border-color:#fde9b8; }
.alert-warning::before { content:"\f33b"; }
.alert-info,.alert-primary { color:#1e40af; background:#eff6ff; border-color:#dbeafe; }
.alert-info::before,.alert-primary::before { content:"\f431"; }
.alert .close { position:absolute; right:11px; top:9px; border:0; background:transparent; color:inherit; font-size:20px; opacity:.6; padding:4px 7px; }
.alert h4 { color:inherit; font-size:14px; margin-bottom:4px; }

/* Tables */
.table-responsive, .ui-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:13px; }
table.table { width:100%; border-collapse:separate; border-spacing:0; margin:0; background:#fff; border:1px solid var(--ui-border) !important; border-radius:13px; overflow:hidden; }
.table th, .table td { padding:12px 13px; border-bottom:1px solid #eef0f4; text-align:left; vertical-align:middle !important; white-space:nowrap; }
.table th { background:#f8fafc; color:#60697b; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.035em; }
.table td { color:#3f485a; font-size:12px; }
.table tr:last-child td { border-bottom:0; }
.table-striped tbody tr:nth-child(even) td { background:#fcfcfd; }
.table-hover tbody tr:hover td { background:#f8f9ff; }
.table-bordered th,.table-bordered td { border-right:0; border-left:0; }
.table .form-control { min-width:160px; min-height:36px; padding:7px 10px; }

/* Badges */
.badge { display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:5px 9px; border-radius:999px; font-size:10px; line-height:1; font-weight:800; white-space:nowrap; }
.badge-primary{background:#eef2ff;color:#4338ca}.badge-success,.badge-green{background:#ecfdf3;color:#15803d}.badge-danger,.badge-red{background:#fef2f2;color:#b91c1c}.badge-warning,.badge-orange{background:#fff7ed;color:#c2410c}.badge-info,.badge-blue{background:#eff6ff;color:#0369a1}.badge-secondary{background:#f3f4f6;color:#4b5563}.badge-pill{border-radius:999px}

/* Dropdown */
.dropdown { position:relative; }
.dropdown-menu { display:none; position:absolute; z-index:1100; top:calc(100% + 9px); right:0; min-width:190px; padding:7px; background:#fff; border:1px solid var(--ui-border); border-radius:13px; box-shadow:0 16px 40px rgba(15,23,42,.12); }
.dropdown-menu.show { display:block; }
.dropdown-item { display:flex; align-items:center; gap:9px; padding:9px 10px; color:#4b5563; border-radius:9px; font-size:12px; }
.dropdown-item:hover { color:var(--ui-primary-dark); background:var(--ui-primary-soft); }
.dropdown-icon { width:18px; color:#818899; }

/* Modal compatible with Bootstrap 4 JS */
.modal { position:fixed; inset:0; z-index:1070; display:none; overflow-x:hidden; overflow-y:auto; outline:0; background:rgba(15,23,42,.42); padding:20px; }
.modal.show { display:block; }
.modal-dialog { position:relative; width:auto; max-width:620px; margin:5vh auto; pointer-events:none; }
.modal-content { position:relative; display:flex; flex-direction:column; width:100%; pointer-events:auto; background:#fff; border:1px solid var(--ui-border); border-radius:18px; box-shadow:0 24px 70px rgba(15,23,42,.2); overflow:hidden; }
.modal-header,.modal-footer { display:flex; align-items:center; gap:10px; padding:15px 18px; }
.modal-header { justify-content:space-between; border-bottom:1px solid var(--ui-border); }
.modal-footer { justify-content:flex-end; border-top:1px solid var(--ui-border); }
.modal-title { margin:0; font-size:16px; }
.modal-body { padding:18px; }
.modal .close { border:0; background:#f3f4f6; border-radius:9px; width:34px; height:34px; color:#4b5563; font-size:20px; line-height:1; }
.modal-backdrop { display:none !important; }
.modal-open { overflow:hidden; }

/* Tabs / panels */
.nav { list-style:none; padding:0; margin:0; display:flex; }
.nav-tabs { gap:6px; border-bottom:1px solid var(--ui-border); margin-bottom:18px; overflow-x:auto; }
.nav-tabs .nav-link { display:block; padding:10px 13px; color:var(--ui-muted); font-weight:700; border-bottom:2px solid transparent; white-space:nowrap; }
.nav-tabs .nav-link.active { color:var(--ui-primary); border-bottom-color:var(--ui-primary); }
.tab-content>.tab-pane { display:none; }
.tab-content>.active { display:block; }
.panel { background:#fff; border:1px solid var(--ui-border); border-radius:13px; margin-bottom:10px; overflow:hidden; }
.panel-heading { padding:14px 16px; background:#fafbfc; }
.panel-title { margin:0; font-size:13px; }
.panel-body { padding:16px; }
.collapse { display:none; }
.collapse.show { display:block; }

/* Timeline */
.ui-timeline { position:relative; padding-left:26px; }
.ui-timeline::before { content:""; position:absolute; top:6px; bottom:8px; left:8px; width:2px; background:#e7e9f4; }
.ui-timeline-item { position:relative; padding:0 0 18px; }
.ui-timeline-item:last-child { padding-bottom:0; }
.ui-timeline-dot { position:absolute; left:-26px; top:2px; width:18px; height:18px; border-radius:50%; background:#fff; border:4px solid var(--ui-primary); box-shadow:0 0 0 3px #eef2ff; }
.ui-timeline-meta { color:var(--ui-muted); font-size:10px; margin-bottom:4px; }
.ui-timeline-title { font-size:13px; font-weight:750; margin-bottom:4px; }
.ui-timeline-text { color:#626b7c; font-size:12px; margin:0; white-space:normal; }

/* Simple 7-day chart */
.ui-chart { height:240px; display:flex; align-items:flex-end; gap:10px; padding:18px 4px 2px; border-bottom:1px solid var(--ui-border); }
.ui-chart-col { flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:8px; }
.ui-chart-bar-wrap { width:100%; flex:1; display:flex; align-items:flex-end; justify-content:center; }
.ui-chart-bar { width:min(34px,70%); min-height:6px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,#6366f1,#4f46e5); position:relative; transition:.2s; }
.ui-chart-bar:hover { filter:brightness(1.04); transform:translateY(-2px); }
.ui-chart-label { color:var(--ui-muted); font-size:10px; white-space:nowrap; }
.ui-chart-value { color:#4b5563; font-size:9px; font-weight:700; }

/* Profile / media */
.card-profile { overflow:hidden; }
.card-profile-img { width:82px; height:82px; object-fit:cover; border-radius:50%; border:4px solid rgba(255,255,255,.9); box-shadow:0 8px 20px rgba(15,23,42,.12); }
.media-list { display:flex; flex-direction:column; }
.media { display:flex; align-items:flex-start; gap:12px; }
.mediaicon { width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:var(--ui-primary-soft);color:var(--ui-primary);flex:0 0 auto; }
.media-body { flex:1; min-width:0; }
.mediafont { margin:0 0 2px; }
.about-img { border-radius:18px; background:linear-gradient(135deg,#4338ca,#0ea5e9) !important; background-image:none !important; margin-bottom:18px; overflow:hidden; }
.about-img .card-body { background:transparent !important; }

/* Ticket messages */
.ui-message { max-width:78%; padding:10px 12px; border-radius:14px; margin-bottom:10px; background:#f3f4f6; color:#394255; }
.ui-message.self { margin-left:auto; background:var(--ui-primary-soft); color:#3730a3; }

/* Auth pages */
.login-img, .bg-gradient { background:#f5f6fb !important; }
.auth-page { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,540px); background:#f5f6fb; }
.auth-visual { position:relative; padding:54px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; color:#fff; background:linear-gradient(145deg,#3730a3,#4f46e5 54%,#0ea5e9); }
.auth-visual::before,.auth-visual::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.08); }
.auth-visual::before { width:420px;height:420px;right:-160px;top:-130px; }
.auth-visual::after { width:300px;height:300px;left:-100px;bottom:-120px; }
.auth-brand { position:relative; z-index:1; display:flex; align-items:center; gap:11px; color:#fff; font-size:18px; font-weight:800; }
.auth-brand-mark { width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:20px;border:1px solid rgba(255,255,255,.14); }
.auth-visual-content { position:relative; z-index:1; max-width:560px; }
.auth-visual-content h1 { color:#fff; font-size:42px; letter-spacing:-.045em; margin-bottom:14px; }
.auth-visual-content p { color:rgba(255,255,255,.78); font-size:15px; max-width:490px; }
.auth-feature-list { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:11px; }
.auth-feature-list li { display:flex; gap:9px; align-items:center; color:rgba(255,255,255,.9); font-size:13px; }
.auth-feature-list i { width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,.12); }
.auth-panel { display:flex; align-items:center; justify-content:center; padding:34px; background:#fff; }
.auth-card { width:100%; max-width:420px; }
.auth-card .auth-kicker { display:inline-flex; align-items:center; gap:7px; padding:6px 9px; border-radius:999px; background:var(--ui-primary-soft); color:var(--ui-primary-dark); font-weight:800; font-size:10px; margin-bottom:14px; text-transform:uppercase; letter-spacing:.05em; }
.auth-card h2 { font-size:28px; letter-spacing:-.035em; margin-bottom:8px; }
.auth-card .auth-copy { color:var(--ui-muted); font-size:13px; margin-bottom:24px; }
.auth-bottom { text-align:center; color:var(--ui-muted); margin-top:18px; font-size:12px; }
.auth-security { display:flex; align-items:center; gap:7px; color:#7b8496; font-size:10px; margin-top:16px; }
.auth-security i { color:var(--ui-success); }
.password-wrap { position:relative; }
.password-wrap .form-control { padding-right:44px; }
.password-toggle { position:absolute; right:7px; top:50%; transform:translateY(-50%); width:34px;height:34px;border:0;background:transparent;border-radius:8px;color:#858d9d;display:flex;align-items:center;justify-content:center; }
.password-toggle:hover { background:#f3f4f6;color:var(--ui-text); }

/* Landing */
.landing-page { background:#fff; color:#243047; }
.landing-nav { position:sticky; top:0; z-index:50; height:72px; border-bottom:1px solid rgba(231,234,241,.85); background:rgba(255,255,255,.9); backdrop-filter:blur(14px); }
.landing-nav-inner { max-width:1180px; height:100%; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:26px; }
.landing-brand { display:flex; align-items:center; gap:10px; font-weight:850; color:var(--ui-text); font-size:16px; }
.landing-brand i { width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--ui-primary),var(--ui-accent)); }
.landing-links { display:flex; gap:22px; margin-left:auto; align-items:center; }
.landing-links a { color:#596277; font-size:12px; font-weight:650; }
.landing-links a:hover { color:var(--ui-primary); }
.landing-actions { display:flex; gap:8px; }
.landing-menu-btn { display:none; margin-left:auto; width:40px;height:40px;border:1px solid var(--ui-border);border-radius:11px;background:#fff;color:var(--ui-text); }
.landing-hero { position:relative; overflow:hidden; padding:86px 20px 74px; background:linear-gradient(180deg,#fbfcff,#f7f8ff); }
.landing-hero::before { content:"";position:absolute;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(79,70,229,.12),transparent 67%);right:-250px;top:-320px; }
.landing-hero-inner { max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;position:relative; }
.landing-kicker { display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #dfe3ff;background:#f4f5ff;color:var(--ui-primary-dark);border-radius:999px;font-size:10px;font-weight:850;letter-spacing:.04em;text-transform:uppercase;margin-bottom:18px; }
.landing-hero h1 { font-size:54px;line-height:1.02;letter-spacing:-.055em;margin-bottom:18px;max-width:650px; }
.landing-hero h1 span { color:var(--ui-primary); }
.landing-hero p { font-size:16px;color:#697386;max-width:610px;margin-bottom:26px; }
.landing-hero-actions { display:flex;gap:10px;flex-wrap:wrap; }
.landing-trust { display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px;color:#747d8e;font-size:11px; }
.landing-trust span { display:flex;align-items:center;gap:6px; }
.landing-trust i { color:var(--ui-success); }
.landing-preview { background:#fff;border:1px solid var(--ui-border);border-radius:24px;box-shadow:0 30px 80px rgba(55,48,163,.13);padding:16px;transform:rotate(1deg); }
.preview-top { display:flex;align-items:center;gap:7px;padding:4px 2px 14px;border-bottom:1px solid var(--ui-border); }
.preview-dot{width:8px;height:8px;border-radius:50%;background:#d7dbe5}.preview-dot:nth-child(1){background:#fb7185}.preview-dot:nth-child(2){background:#fbbf24}.preview-dot:nth-child(3){background:#34d399}
.preview-body{padding:16px 2px 2px;display:grid;gap:12px}.preview-balance{padding:20px;border-radius:18px;background:linear-gradient(135deg,#4f46e5,#0ea5e9);color:#fff}.preview-balance small{opacity:.75}.preview-balance strong{display:block;font-size:26px;margin-top:4px}.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.preview-box{padding:13px;border:1px solid var(--ui-border);border-radius:13px}.preview-box i{font-size:18px;color:var(--ui-primary)}.preview-box strong{display:block;font-size:12px;margin-top:8px}.preview-box span{display:block;color:var(--ui-muted);font-size:9px;margin-top:2px}.preview-list{display:grid;gap:7px}.preview-row{display:flex;align-items:center;gap:9px;padding:9px;border-radius:11px;background:#f8fafc}.preview-row i{width:30px;height:30px;border-radius:9px;background:#eef2ff;color:var(--ui-primary);display:flex;align-items:center;justify-content:center}.preview-row div{flex:1}.preview-row strong{display:block;font-size:10px}.preview-row span{color:var(--ui-muted);font-size:9px}.preview-row b{font-size:9px;color:var(--ui-success)}
.landing-section { padding:78px 20px; }
.landing-section.alt { background:#f8f9fc; }
.landing-container { max-width:1180px;margin:0 auto; }
.section-heading { max-width:650px;margin:0 auto 38px;text-align:center; }
.section-heading .eyebrow { color:var(--ui-primary);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px; }
.section-heading h2 { font-size:34px;letter-spacing:-.04em;margin-bottom:10px; }
.section-heading p { color:var(--ui-muted);font-size:14px; }
.feature-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
.feature-card { padding:22px;border:1px solid var(--ui-border);border-radius:18px;background:#fff;box-shadow:0 8px 20px rgba(15,23,42,.025); }
.feature-card i { width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--ui-primary-soft);color:var(--ui-primary);font-size:20px;margin-bottom:16px; }
.feature-card h3 { font-size:15px;margin-bottom:7px; }.feature-card p{color:var(--ui-muted);font-size:12px;margin:0;}
.landing-cta { padding:42px;border-radius:24px;background:linear-gradient(135deg,#312e81,#4f46e5 55%,#0284c7);display:flex;align-items:center;justify-content:space-between;gap:24px;color:#fff; }
.landing-cta h2{color:#fff;font-size:28px;margin-bottom:7px}.landing-cta p{color:rgba(255,255,255,.76);margin:0;max-width:580px}.landing-cta .btn{background:#fff;color:#3730a3;border-color:#fff;}
.landing-footer{padding:28px 20px;border-top:1px solid var(--ui-border);background:#fff}.landing-footer-inner{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:18px;color:var(--ui-muted);font-size:11px;}

/* Loader */
#global-loader { position:fixed; inset:0; z-index:99999; background:rgba(248,250,252,.94); display:flex; align-items:center; justify-content:center; transition:opacity .25s ease,visibility .25s ease; }
#global-loader.loader-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.showbox { display:flex;align-items:center;justify-content:center; }
.lds-ring { position:relative;width:46px;height:46px; }
.lds-ring div { box-sizing:border-box;display:block;position:absolute;width:46px;height:46px;border:4px solid var(--ui-primary);border-radius:50%;animation:ui-ring 1s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--ui-primary) transparent transparent transparent; }
.lds-ring div:nth-child(1){animation-delay:-.45s}.lds-ring div:nth-child(2){animation-delay:-.3s}.lds-ring div:nth-child(3){animation-delay:-.15s}
@keyframes ui-ring { 0%{transform:rotate(0)}100%{transform:rotate(360deg)} }

/* Utilities */
.d-flex{display:flex!important}.d-block{display:block!important}.d-none{display:none!important}.align-items-center{align-items:center!important}.justify-content-between{justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse!important}
.text-center{text-align:center!important}.text-right{text-align:right!important}.text-left{text-align:left!important}.text-white{color:#fff!important}.text-dark{color:var(--ui-text)!important}.text-muted{color:var(--ui-muted)!important}.text-danger{color:var(--ui-danger)!important}.text-success{color:var(--ui-success)!important}
.font-weight-bold{font-weight:800!important}.font-weight-semibold{font-weight:700!important}.small,.text-sm{font-size:11px!important}.font-30{font-size:30px!important}
.w-100{width:100%!important}.h-100{height:100%!important}.float-right{float:right!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}
.mt-1{margin-top:4px!important}.mt-2{margin-top:8px!important}.mt-3{margin-top:12px!important}.mt-4{margin-top:16px!important}.mt-5{margin-top:20px!important}.mt-lg-0{margin-top:0!important}.mb-3{margin-bottom:12px!important}.mb-4{margin-bottom:16px!important}.mb-6{margin-bottom:24px!important}.ml-2{margin-left:8px!important}.ml-5{margin-left:20px!important}.mr-2{margin-right:8px!important}.p-0{padding:0!important}.p-5{padding:20px!important}.p-6{padding:24px!important}.p-8{padding:32px!important}.pt-7{padding-top:28px!important}.pb-2{padding-bottom:8px!important}.m-b-3{margin-bottom:16px!important}
.fa-3x,.bi.fa-3x{font-size:2.4rem!important}.fa-4x,.bi.fa-4x{font-size:3rem!important}
.hidden-xs { display:block; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

.footer { margin-left:var(--ui-sidebar); padding:18px 28px 24px; color:#8a92a2; font-size:11px; text-align:center; transition:margin-left .25s ease; }
.footer a { color:#626b7c; font-weight:700; }

/* Responsive */
@media (max-width:991.98px) {
    :root { --ui-header:64px; }
    .app-sidebar { transform:translateX(-102%); box-shadow:16px 0 45px rgba(15,23,42,.16); }
    body.sidebar-open .app-sidebar { transform:translateX(0); }
    body.sidebar-open .app-sidebar__overlay { display:block; }
    .app-header { left:0; }
    .app-content { margin-left:0; padding:calc(var(--ui-header) + 20px) 18px 22px; }
    .footer { margin-left:0; padding-left:18px;padding-right:18px; }
    .topbar-balance { margin-left:auto; }
    .auth-page { grid-template-columns:1fr; }
    .auth-visual { display:none; }
    .auth-panel { min-height:100vh; padding:26px 18px; }
    .landing-hero-inner { grid-template-columns:1fr; gap:40px; }
    .landing-hero-copy { text-align:center; }
    .landing-hero p { margin-left:auto;margin-right:auto; }.landing-hero-actions,.landing-trust{justify-content:center}
    .landing-preview { max-width:650px;margin:0 auto; transform:none; }
}
@media (max-width:767.98px) {
    .page-header { align-items:flex-start; flex-direction:column; margin-bottom:18px; gap:7px; }
    .page-title { font-size:22px; }
    .breadcrumb { display:none; }
    .card-header,.card-body { padding:16px; }
    .ui-stat-value { font-size:19px; }
    .ui-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .topbar-title small { display:none; }
    .topbar-profile .profile-copy { display:none; }
    .topbar-balance { padding:8px 10px; }
    .topbar-balance span { display:none; }
    .table th,.table td{padding:10px 11px}
    .landing-nav-inner{padding:0 16px}.landing-links{display:none;position:absolute;top:72px;left:12px;right:12px;padding:12px;background:#fff;border:1px solid var(--ui-border);border-radius:14px;box-shadow:var(--ui-shadow);flex-direction:column;align-items:stretch}.landing-links.is-open{display:flex}.landing-links a{padding:9px 10px}.landing-menu-btn{display:flex;align-items:center;justify-content:center}.landing-actions .btn-secondary{display:none}
    .landing-hero{padding:62px 18px 56px}.landing-hero h1{font-size:40px}.landing-section{padding:58px 18px}.feature-grid{grid-template-columns:1fr}.landing-cta{padding:28px;flex-direction:column;align-items:flex-start}.section-heading h2{font-size:28px}
}
@media (max-width:575.98px) {
    body { font-size:13px; }
    .app-content { padding-left:12px;padding-right:12px; }
    .app-header .container-fluid { padding:0 12px; }
    .topbar-title strong { max-width:135px; }
    .ui-balance-value { font-size:26px; }
    .row { margin-left:-5px;margin-right:-5px; }.row > [class*="col-"]{padding-left:5px;padding-right:5px}
    .col-6 { width:100%!important; }
    .auth-card h2{font-size:25px}.auth-panel{padding:22px 16px}
    .landing-hero h1{font-size:34px}.landing-hero p{font-size:14px}.preview-grid{grid-template-columns:1fr 1fr}.landing-footer-inner{flex-direction:column;text-align:center}
    .hidden-xs { display:none!important; }
}
/* Lightweight dialog used as SweetAlert-compatible confirmation */
.ui-dialog-layer{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(15,23,42,.46);backdrop-filter:blur(3px)}
.ui-dialog{width:min(420px,100%);background:#fff;border:1px solid var(--ui-border);border-radius:20px;box-shadow:0 28px 80px rgba(15,23,42,.25);padding:22px;animation:uiDialogIn .18s ease}
.ui-dialog-icon{width:48px;height:48px;border-radius:15px;background:var(--ui-primary-soft);color:var(--ui-primary);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.ui-dialog h3{font-size:18px;margin-bottom:7px}.ui-dialog p{color:var(--ui-muted);font-size:12px;margin-bottom:17px}.ui-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.ui-dialog .form-control{margin-top:12px}
@keyframes uiDialogIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.ml-auto{margin-left:auto!important}.mr-auto{margin-right:auto!important}.justify-content-center{justify-content:center!important}.my-3{margin-top:12px!important;margin-bottom:12px!important}.leading-none{line-height:1!important}
@media (min-width:992px){.d-lg-block{display:block!important}.my-md-5{margin-top:20px!important;margin-bottom:20px!important}}
.input-group-text{display:flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid #dfe3eb;background:#f8fafc;color:#667085;font-size:12px;font-weight:700;white-space:nowrap;border-radius:11px 0 0 11px}.input-group-prepend+.form-control{border-top-left-radius:0;border-bottom-left-radius:0}.form-horizontal .form-group.row{display:block;margin-left:0;margin-right:0}.form-horizontal .form-group.row>[class*="col-"]{width:100%!important;padding-left:0;padding-right:0}.form-horizontal .form-group.row>.control-label,.form-horizontal .form-group.row>.col-form-label{width:100%!important;padding:0;margin-bottom:7px}hr{border:0;border-top:1px solid var(--ui-border);margin:16px 0}ul,ol{line-height:1.65}.card-body>ul{padding-left:20px}.display-5{font-size:2rem}.alert-white{box-shadow:none}

/* Conversation / ticket */
.ui-chat{display:grid;gap:12px;margin-bottom:18px;padding:4px 0}.ui-chat-row{display:flex;justify-content:flex-start}.ui-chat-row.mine{justify-content:flex-end}.ui-chat-bubble{width:min(650px,88%);padding:13px 15px;border:1px solid var(--ui-border);border-radius:16px 16px 16px 5px;background:#f8fafc}.ui-chat-row.mine .ui-chat-bubble{border-color:#dcdafe;background:var(--ui-primary-soft);border-radius:16px 16px 5px 16px}.ui-chat-name{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:850;color:#4c5566;margin-bottom:6px}.ui-chat-row.mine .ui-chat-name{color:var(--ui-primary-dark)}.ui-chat-text{font-size:12px;line-height:1.65;color:#30394a;overflow-wrap:anywhere}.ui-chat-time{display:flex;align-items:center;gap:5px;margin-top:8px;color:#8d95a4;font-size:9px}.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive>.table{min-width:720px}.table .btn{margin:1px}.alert-dismissible{padding-right:42px;position:relative}.alert-dismissible .close{position:absolute;right:10px;top:9px;border:0;background:transparent;color:inherit;opacity:.65}.card-options a{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:#8a92a2}.card-options a:hover{background:#f2f4f8;color:var(--ui-primary)}