/* ==========================================================
   KEYDEV Dark Console UI v3
   UI/UX only: no login, key, API, or database logic changed.
   Thai + English interface, responsive desktop/mobile layout.
   ========================================================== */

:root,
html[data-ui-theme="dark"]{
  --bc-bg:#070910;
  --bc-bg-2:#0b0e16;
  --bc-bg-3:#111520;
  --bc-panel:#0f131d;
  --bc-panel-2:#141925;
  --bc-panel-3:#1a2030;
  --bc-card:#0d111a;
  --bc-text:#f4f7fb;
  --bc-soft:#d7ddea;
  --bc-muted:#8f99ad;
  --bc-faint:#5f687a;
  --bc-line:rgba(255,255,255,.08);
  --bc-line-2:rgba(255,255,255,.14);
  --bc-purple:#7c3cff;
  --bc-purple-2:#a855f7;
  --bc-cyan:#22d3ee;
  --bc-blue:#38bdf8;
  --bc-green:#22c55e;
  --bc-amber:#f6c445;
  --bc-red:#ff4d5e;
  --bc-white:#ffffff;
  --bc-black:#05070c;
  --bc-radius:18px;
  --bc-radius-lg:28px;
  --bc-shadow:0 24px 80px rgba(0,0,0,.42);
  --bc-glow:0 0 0 1px rgba(124,60,255,.22),0 0 44px rgba(124,60,255,.12);
  --ui-bg:var(--bc-bg);
  --ui-card:var(--bc-panel);
  --ui-card-2:var(--bc-panel-2);
  --ui-text:var(--bc-text);
  --ui-heading:var(--bc-text);
  --ui-muted:var(--bc-muted);
  --ui-border:var(--bc-line);
  --ui-accent:var(--bc-purple);
  color-scheme:dark;
}

html[data-ui-theme="light"]{
  --bc-bg:#f4f6fb;
  --bc-bg-2:#ffffff;
  --bc-bg-3:#eef2ff;
  --bc-panel:#ffffff;
  --bc-panel-2:#f7f8fc;
  --bc-panel-3:#eef2f8;
  --bc-card:#ffffff;
  --bc-text:#101522;
  --bc-soft:#253044;
  --bc-muted:#667085;
  --bc-faint:#8b95a8;
  --bc-line:rgba(16,24,40,.10);
  --bc-line-2:rgba(16,24,40,.18);
  --bc-purple:#6d28d9;
  --bc-purple-2:#8b5cf6;
  --bc-cyan:#0891b2;
  --bc-blue:#2563eb;
  --bc-green:#16a34a;
  --bc-amber:#d97706;
  --bc-red:#dc2626;
  --bc-white:#0f172a;
  --bc-black:#ffffff;
  --bc-shadow:0 24px 80px rgba(15,23,42,.10);
  --bc-glow:0 0 0 1px rgba(109,40,217,.20),0 18px 46px rgba(109,40,217,.10);
  color-scheme:light;
}

html[data-ui-theme],
html[data-ui-theme] body{
  min-height:100%;
  color:var(--bc-text)!important;
  background:var(--bc-bg)!important;
  letter-spacing:.01em;
}
html[data-ui-theme] body{
  background:
    radial-gradient(circle at 16% 0%, rgba(124,60,255,.15), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(34,211,238,.08), transparent 30%),
    linear-gradient(180deg, var(--bc-bg), var(--bc-bg-2) 45%, var(--bc-bg))!important;
  overflow-x:hidden;
}
html[data-ui-theme] *{scrollbar-width:thin;scrollbar-color:rgba(124,60,255,.55) transparent;}
html[data-ui-theme] ::-webkit-scrollbar{width:10px;height:10px;}
html[data-ui-theme] ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--bc-purple),var(--bc-blue));border-radius:999px;border:3px solid transparent;background-clip:padding-box;}
html[data-ui-theme] ::selection{background:rgba(124,60,255,.36);color:#fff;}

html[data-ui-theme] #main-wrapper{background:transparent!important;}
html[data-ui-theme] .content-body{
  min-height:100vh;
  padding-top:100px;
  background:transparent!important;
}
html[data-ui-theme] .container-fluid{max-width:1580px;padding-left:28px;padding-right:28px;}
html[data-ui-theme] a{text-decoration:none;color:var(--bc-text)!important;}
html[data-ui-theme] p,html[data-ui-theme] small,html[data-ui-theme] label,html[data-ui-theme] span{color:inherit;}
html[data-ui-theme] h1,html[data-ui-theme] h2,html[data-ui-theme] h3,html[data-ui-theme] h4,html[data-ui-theme] h5,html[data-ui-theme] h6,
html[data-ui-theme] .card-title,html[data-ui-theme] .text-black{color:var(--bc-text)!important;}
html[data-ui-theme] .text-muted{color:var(--bc-muted)!important;}

/* Desktop app header */
html[data-ui-theme] .nav-header,
html[data-ui-theme] .header,
html[data-ui-theme] .deznav{
  background:rgba(8,11,17,.84)!important;
  border-color:var(--bc-line)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
html[data-ui-theme="light"] .nav-header,
html[data-ui-theme="light"] .header,
html[data-ui-theme="light"] .deznav{background:rgba(255,255,255,.86)!important;}
html[data-ui-theme] .nav-header{
  min-height:86px;
  border-right:1px solid var(--bc-line)!important;
  border-bottom:1px solid var(--bc-line)!important;
  padding:24px 16px 12px!important;
  display:flex!important;
  align-items:center;
}
html[data-ui-theme] .header{
  min-height:86px;
  border-bottom:1px solid var(--bc-line)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.03)!important;
}
html[data-ui-theme] .header .header-content,
html[data-ui-theme] .header .navbar{height:86px;}
html[data-ui-theme] .header .navbar{padding:0 28px!important;}
html[data-ui-theme] .header-left{min-width:0;width:100%;}

.ui-traffic-lights{position:absolute;top:10px;left:16px;z-index:50;display:flex;gap:10px;align-items:center;}
.ui-traffic-lights span{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 0 rgba(255,255,255,0);animation:uiDotPulse 1.7s ease-in-out infinite;border:1px solid rgba(0,0,0,.24);}
.ui-traffic-lights .ui-dot-red{background:#ff5f57;animation-delay:0s;}
.ui-traffic-lights .ui-dot-yellow{background:#ffbd2e;animation-delay:.18s;}
.ui-traffic-lights .ui-dot-green{background:#29d37d;animation-delay:.36s;}
@keyframes uiDotPulse{0%,100%{opacity:.58;transform:scale(.86)}50%{opacity:1;transform:scale(1.08);box-shadow:0 0 14px currentColor}}

.ui-brand-logo{display:flex!important;align-items:center;gap:13px;width:100%;padding:0!important;color:var(--bc-text)!important;}
.ui-brand-mark{width:48px;height:48px;min-width:48px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(124,60,255,.95),rgba(62,95,255,.65));box-shadow:0 12px 40px rgba(124,60,255,.25);overflow:hidden;}
.ui-brand-mark img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.1);}
.ui-brand-copy{display:grid;gap:2px;min-width:0;}
.ui-brand-copy strong{font-size:18px;font-weight:950;letter-spacing:.02em;color:var(--bc-text)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ui-brand-copy small{font-size:12px;font-weight:800;color:var(--bc-muted)!important;}
html[data-ui-theme] .nav-control{margin-left:auto;}
html[data-ui-theme] .nav-control .hamburger{padding:8px;border:1px solid var(--bc-line);border-radius:14px;background:var(--bc-panel-2);}
html[data-ui-theme] .nav-control .hamburger .line{height:2px;border-radius:999px;background:var(--bc-soft)!important;}

.ui-top-identity{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;}
.ui-top-title{display:grid;gap:3px;min-width:0;}
.ui-top-title .ui-kicker{display:inline-flex;width:max-content;padding:4px 10px;border:1px solid var(--bc-line);border-radius:999px;background:rgba(255,255,255,.03);color:var(--bc-muted)!important;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;}
.ui-top-title strong{font-size:21px;line-height:1.1;font-weight:950;color:var(--bc-text)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ui-header-tools,.ui-top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ui-control-btn{min-height:38px;padding:0 15px;border-radius:999px!important;border:1px solid var(--bc-line)!important;background:var(--bc-panel-2)!important;color:var(--bc-soft)!important;font-weight:950;box-shadow:none!important;transition:.18s ease;}
.ui-control-btn:hover{border-color:rgba(124,60,255,.7)!important;color:#fff!important;background:linear-gradient(135deg,rgba(124,60,255,.4),rgba(34,211,238,.12))!important;transform:translateY(-1px);}
.ui-header-status{align-items:center;margin-right:10px;}
.ui-user-chip{height:52px;display:flex;align-items:center;gap:12px;padding:6px 13px 6px 7px;border:1px solid var(--bc-line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));color:var(--bc-text);}
.ui-user-chip img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(124,60,255,.4);}
.ui-user-chip span{font-weight:950;line-height:1;color:var(--bc-text)!important;}
.ui-user-chip small{display:flex;align-items:center;gap:6px;margin-top:3px;color:var(--bc-muted)!important;font-size:11px;font-weight:800;}
.ui-user-chip small i{width:7px;height:7px;border-radius:50%;background:var(--bc-green);box-shadow:0 0 0 4px rgba(34,197,94,.14);}
html[data-ui-theme] .header-profile img{width:54px;height:54px;border-radius:50%;border:2px solid rgba(124,60,255,.45);box-shadow:0 0 0 5px rgba(124,60,255,.08)!important;}

/* Sidebar */
html[data-ui-theme] .deznav{border-right:1px solid var(--bc-line)!important;box-shadow:none!important;}
html[data-ui-theme] .deznav .deznav-scroll{padding:18px 14px 20px;}
.ui-sidebar-section{margin:0 0 14px;}
.ui-sidebar-title{display:block;margin:16px 10px 8px;color:var(--bc-faint)!important;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;}
html[data-ui-theme] .deznav .metismenu{padding:0!important;}
html[data-ui-theme] .deznav .metismenu>li{margin:5px 0!important;}
html[data-ui-theme] .deznav .metismenu>li>a,
html[data-ui-theme] .deznav .metismenu ul a{
  min-height:46px;border-radius:14px!important;padding:12px 14px!important;margin:0!important;color:var(--bc-muted)!important;background:transparent!important;border:1px solid transparent!important;font-weight:900;display:flex;align-items:center;gap:12px;transition:.16s ease;
}
html[data-ui-theme] .deznav .metismenu>li>a i,
html[data-ui-theme] .deznav .metismenu ul a i{width:19px;text-align:center;color:var(--bc-muted)!important;}
html[data-ui-theme] .deznav .metismenu>li>a:hover,
html[data-ui-theme] .deznav .metismenu>li>a.active,
html[data-ui-theme] .deznav .metismenu>li.mm-active>a,
html[data-ui-theme] .deznav .metismenu ul a:hover{
  color:var(--bc-text)!important;background:linear-gradient(135deg,rgba(124,60,255,.34),rgba(124,60,255,.12))!important;border-color:rgba(124,60,255,.24)!important;box-shadow:0 8px 26px rgba(124,60,255,.08)!important;transform:none!important;
}
html[data-ui-theme] .deznav .metismenu>li>a:hover i,
html[data-ui-theme] .deznav .metismenu>li>a.active i{color:#fff!important;}
html[data-ui-theme] .deznav .metismenu ul{background:rgba(255,255,255,.02)!important;border:1px solid var(--bc-line);border-radius:16px;padding:8px;margin:6px 0 12px 8px;}
.ui-sidebar-card{margin:18px 0 0;padding:14px;border:1px solid var(--bc-line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));}
.ui-sidebar-profile{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.ui-sidebar-profile img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid rgba(124,60,255,.45);}
.ui-sidebar-profile strong{display:block;color:var(--bc-text);font-weight:950;}
.ui-sidebar-profile small{display:block;color:var(--bc-muted);font-weight:800;font-size:11px;}
.ui-sidebar-meter{height:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:8px 0;}
.ui-sidebar-meter i{display:block;height:100%;width:62%;background:linear-gradient(90deg,var(--bc-purple),var(--bc-blue));border-radius:999px;}
.ui-sidebar-meta{display:flex;justify-content:space-between;color:var(--bc-muted);font-size:11px;font-weight:800;}
.ui-sidebar-logout{width:100%;margin-top:12px;min-height:42px;border-radius:13px!important;border:1px solid rgba(255,77,94,.22)!important;background:rgba(255,77,94,.08)!important;color:#ff9aa5!important;font-weight:950;}
html[data-ui-theme] .copyright{display:none!important;}

/* Cards / forms / buttons */
html[data-ui-theme] .card,
html[data-ui-theme] .modal-content,
html[data-ui-theme] .authincation-content,
html[data-ui-theme] .dropdown-menu,
html[data-ui-theme] .swal2-popup{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;border:1px solid var(--bc-line)!important;color:var(--bc-text)!important;border-radius:var(--bc-radius)!important;box-shadow:none!important;
}
html[data-ui-theme] .card{overflow:hidden;}
html[data-ui-theme] .card-header,
html[data-ui-theme] .modal-header,
html[data-ui-theme] .modal-footer{background:transparent!important;border-color:var(--bc-line)!important;}
html[data-ui-theme] .dropdown-item{color:var(--bc-text)!important;}
html[data-ui-theme] .dropdown-item:hover{background:var(--bc-panel-2)!important;}
html[data-ui-theme] .form-control,
html[data-ui-theme] .select2-selection,
html[data-ui-theme] .nice-select,
html[data-ui-theme] textarea,
html[data-ui-theme] input,
html[data-ui-theme] select{
  min-height:46px;background:rgba(4,7,12,.72)!important;color:var(--bc-text)!important;border:1px solid var(--bc-line)!important;border-radius:13px!important;box-shadow:none!important;
}
html[data-ui-theme="light"] .form-control,
html[data-ui-theme="light"] input,
html[data-ui-theme="light"] select,
html[data-ui-theme="light"] textarea{background:#fff!important;}
html[data-ui-theme] .form-control:focus,
html[data-ui-theme] input:focus,
html[data-ui-theme] textarea:focus,
html[data-ui-theme] select:focus{border-color:rgba(124,60,255,.78)!important;box-shadow:0 0 0 4px rgba(124,60,255,.14)!important;outline:0!important;}
html[data-ui-theme] .form-control::placeholder,html[data-ui-theme] input::placeholder,html[data-ui-theme] textarea::placeholder{color:var(--bc-faint)!important;}
html[data-ui-theme] label,.form-label{color:var(--bc-soft)!important;font-weight:900;}
html[data-ui-theme] .btn,html[data-ui-theme] button{border-radius:13px!important;font-weight:950;box-shadow:none!important;}
html[data-ui-theme] .btn-primary,
html[data-ui-theme] .swal2-confirm{background:linear-gradient(135deg,var(--bc-purple),var(--bc-purple-2))!important;border-color:transparent!important;color:#fff!important;}
html[data-ui-theme] .btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px);}
html[data-ui-theme] .btn-light,html[data-ui-theme] .btn-secondary,html[data-ui-theme] .btn-outline-primary,html[data-ui-theme] .swal2-cancel{background:rgba(255,255,255,.04)!important;border-color:var(--bc-line)!important;color:var(--bc-text)!important;}
html[data-ui-theme] .btn-danger,html[data-ui-theme] .btn-danger.light{background:rgba(255,77,94,.12)!important;border-color:rgba(255,77,94,.32)!important;color:#ff9aa5!important;}
html[data-ui-theme] .badge{border-radius:999px!important;font-weight:950;padding:.48rem .7rem;}

/* DataTables */
html[data-ui-theme] .table-responsive{border-radius:18px;}
html[data-ui-theme] table.dataTable,
html[data-ui-theme] .table,
html[data-ui-theme] .dataTables_wrapper{color:var(--bc-text)!important;}
html[data-ui-theme] table.dataTable{border-collapse:separate!important;border-spacing:0!important;width:100%!important;}
html[data-ui-theme] table.dataTable thead th,
html[data-ui-theme] .table thead th{background:rgba(255,255,255,.025)!important;color:var(--bc-muted)!important;border-color:var(--bc-line)!important;font-size:12px;font-weight:950;letter-spacing:.03em;text-transform:none;padding:15px 14px!important;}
html[data-ui-theme] table.dataTable tbody tr{background:transparent!important;}
html[data-ui-theme] table.dataTable tbody td,
html[data-ui-theme] .table tbody td{border-color:var(--bc-line)!important;color:var(--bc-soft)!important;padding:15px 14px!important;vertical-align:middle;}
html[data-ui-theme] table.dataTable tbody tr:hover{background:rgba(124,60,255,.045)!important;}
html[data-ui-theme] .dataTables_wrapper .dataTables_info,
html[data-ui-theme] .dataTables_wrapper .dataTables_length,
html[data-ui-theme] .dataTables_wrapper .dataTables_filter,
html[data-ui-theme] .dataTables_wrapper .dataTables_paginate{color:var(--bc-muted)!important;font-weight:800;}
html[data-ui-theme] .dataTables_wrapper .dataTables_filter input,
html[data-ui-theme] .dataTables_wrapper .dataTables_length select{background:rgba(0,0,0,.2)!important;border:1px solid var(--bc-line)!important;color:var(--bc-text)!important;}
html[data-ui-theme] .dataTables_wrapper .dataTables_paginate .paginate_button{border-radius:10px!important;border:1px solid var(--bc-line)!important;background:rgba(255,255,255,.035)!important;color:var(--bc-soft)!important;margin:0 3px!important;}
html[data-ui-theme] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-ui-theme] .dataTables_wrapper .dataTables_paginate .paginate_button:hover{background:linear-gradient(135deg,var(--bc-purple),var(--bc-purple-2))!important;color:#fff!important;border-color:transparent!important;}

/* Dashboard */
.ui-dashboard-container{padding-bottom:44px;}
.ui-page-hero{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px;padding:28px;border:1px solid rgba(124,60,255,.20);border-radius:var(--bc-radius-lg);background:radial-gradient(circle at 80% 20%,rgba(124,60,255,.20),transparent 38%),linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:var(--bc-glow);overflow:hidden;}
.ui-page-hero:before{content:"";position:absolute;inset:auto -20% -58% 35%;height:220px;background:radial-gradient(circle,rgba(34,211,238,.13),transparent 64%);pointer-events:none;}
.ui-page-hero>div{position:relative;z-index:1;}
.ui-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--bc-line);border-radius:999px;background:rgba(255,255,255,.035);color:var(--bc-soft)!important;font-size:12px;font-weight:950;}
.ui-page-hero h1{margin:12px 0 6px;font-size:42px;line-height:1;font-weight:950;letter-spacing:-.045em;}
.ui-page-hero p{margin:0;color:var(--bc-muted)!important;font-weight:850;font-size:15px;}
.ui-hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
.ui-run-pill,.ui-action{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 17px;border-radius:15px;border:1px solid var(--bc-line);background:rgba(255,255,255,.035);color:var(--bc-text)!important;font-weight:950;}
.ui-action.primary{background:#fff!important;color:#151822!important;border-color:transparent!important;box-shadow:0 18px 48px rgba(255,255,255,.10);}
.ui-status-dot{width:10px;height:10px;border-radius:50%;background:var(--bc-green);box-shadow:0 0 0 6px rgba(34,197,94,.12),0 0 18px rgba(34,197,94,.45);}
.ui-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:18px;}
.ui-stat-card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;border-radius:20px!important;}
.ui-stat-card .card-body{min-height:126px;padding:20px!important;}
.ui-stat-card .menu span{color:var(--bc-muted)!important;font-size:13px!important;font-weight:950!important;}
.ui-stat-card h2{font-size:31px;font-weight:950;margin:7px 0 0;letter-spacing:-.03em;}
.ui-stat-sub{display:block;margin-top:8px;color:var(--bc-muted)!important;font-size:12px;font-weight:850;}
.ui-stat-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:22px;border:1px solid rgba(124,60,255,.26);background:radial-gradient(circle,rgba(124,60,255,.30),rgba(124,60,255,.06));color:var(--bc-purple-2);font-size:22px;box-shadow:0 0 24px rgba(124,60,255,.16);}
.ui-stat-icon.is-green{color:var(--bc-green);border-color:rgba(34,197,94,.24);background:rgba(34,197,94,.08);}
.ui-stat-icon.is-blue{color:var(--bc-blue);border-color:rgba(56,189,248,.24);background:rgba(56,189,248,.08);}
.ui-stat-icon.is-amber{color:var(--bc-amber);border-color:rgba(246,196,69,.24);background:rgba(246,196,69,.08);}
.ui-stat-icon.is-red{color:var(--bc-red);border-color:rgba(255,77,94,.24);background:rgba(255,77,94,.08);}
.ui-graph-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:16px;margin:18px 0;}
.ui-graph-card{border:1px solid var(--bc-line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.016));overflow:hidden;}
.ui-graph-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:19px 20px 0;}
.ui-graph-title{margin:0;color:var(--bc-text)!important;font-size:18px;font-weight:950;}
.ui-graph-sub{color:var(--bc-muted)!important;font-size:12px;font-weight:850;margin-top:4px;}
.ui-graph-chip{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--bc-line);background:rgba(255,255,255,.035);font-weight:950;color:var(--bc-soft);}
.ui-graph-body{padding:16px 20px 20px;}
.ui-graph-canvas{width:100%;min-height:280px;border:1px solid var(--bc-line);border-radius:18px;background:repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.035) 39px),rgba(0,0,0,.08);}
.ui-donut-wrap{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:center;}
.ui-donut-canvas{width:180px!important;height:180px!important;padding:9px;border:1px solid var(--bc-line);border-radius:22px;background:rgba(0,0,0,.10);}
.ui-graph-legend{display:grid;gap:10px;}
.ui-legend-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--bc-line);border-radius:14px;background:rgba(255,255,255,.03);color:var(--bc-soft);font-weight:850;}
.ui-legend-left{display:flex;align-items:center;gap:9px;}
.ui-legend-dot{width:10px;height:10px;border-radius:50%;background:var(--bc-purple);box-shadow:0 0 14px rgba(124,60,255,.45);}
.ui-legend-dot.is-muted{background:var(--bc-faint);box-shadow:none;}
.ui-legend-dot.is-line{background:var(--bc-blue);}
.ui-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}
.ui-panel .card-header{min-height:74px;padding:18px 20px!important;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ui-panel .card-header h4{margin:0 0 4px;font-weight:950;}
.ui-panel .card-header span{color:var(--bc-muted)!important;font-size:12px;font-weight:850;}
.ui-panel .card-body{padding:16px 20px 20px!important;}
.ui-list-stack{display:grid;gap:10px;}
.ui-list-row{display:flex;align-items:center;gap:13px;padding:13px;border:1px solid var(--bc-line);border-radius:16px;background:rgba(255,255,255,.03);}
.ui-list-row .num{width:38px;height:38px;min-width:38px;display:grid;place-items:center;border-radius:14px;background:rgba(124,60,255,.12);color:var(--bc-purple-2)!important;font-size:12px;font-weight:950;}
.ui-list-row h5{margin:0;font-size:14px;font-weight:950;}
.ui-list-row p{margin:3px 0 0;color:var(--bc-muted)!important;font-size:12px;font-weight:800;}
.ui-empty-state{padding:18px;border:1px dashed var(--bc-line-2);border-radius:16px;color:var(--bc-muted)!important;background:rgba(0,0,0,.08);font-weight:850;text-align:center;}

/* Key manager console page */
.ui-km-page{padding-bottom:46px;}
.ui-km-titlebar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;}
.ui-km-titlebar h1{margin:5px 0 0;font-size:30px;line-height:1.1;font-weight:950;letter-spacing:-.03em;}
.ui-km-titlebar p{margin:6px 0 0;color:var(--bc-muted)!important;font-weight:850;}
.ui-km-layout{display:grid;grid-template-columns:292px minmax(0,1fr);gap:20px;align-items:start;}
.ui-km-aside{position:sticky;top:104px;display:grid;gap:14px;}
.ui-km-box{border:1px solid var(--bc-line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));padding:16px;}
.ui-km-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.ui-km-tab{min-height:44px;border:1px solid var(--bc-line);border-radius:13px;background:rgba(255,255,255,.03);color:var(--bc-muted);font-weight:950;display:flex;align-items:center;justify-content:center;gap:7px;}
.ui-km-tab.is-active{color:#fff;background:linear-gradient(135deg,rgba(124,60,255,.58),rgba(124,60,255,.18));border-color:rgba(124,60,255,.36);}
.ui-km-upload{display:grid;gap:10px;}
.ui-km-upload .file-row{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--bc-muted);font-size:12px;font-weight:850;}
.ui-km-action-stack{display:grid;gap:10px;}
.ui-km-action-stack .btn{min-height:46px;display:flex;align-items:center;justify-content:center;gap:9px;}
.ui-km-action-stack .btn-success{background:rgba(34,197,94,.12)!important;border-color:rgba(34,197,94,.28)!important;color:#77f0a6!important;}
.ui-km-action-stack .btn-warning{background:rgba(246,196,69,.12)!important;border-color:rgba(246,196,69,.28)!important;color:#ffe07c!important;}
.ui-km-action-stack .btn-info{background:rgba(34,211,238,.12)!important;border-color:rgba(34,211,238,.28)!important;color:#8ef5ff!important;}
.ui-km-user-mini{display:flex;align-items:center;gap:12px;border-top:1px solid var(--bc-line);padding-top:14px;margin-top:4px;}
.ui-km-user-mini img{width:42px;height:42px;border-radius:14px;object-fit:cover;}
.ui-km-user-mini strong{display:block;font-weight:950;}
.ui-km-user-mini small{color:var(--bc-muted);font-weight:800;}
.ui-km-main{min-width:0;display:grid;gap:16px;}
.ui-km-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;}
.ui-km-summary-card{min-height:94px;padding:16px;border:1px solid var(--bc-line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));display:flex;align-items:center;gap:13px;}
.ui-km-summary-card .ico{width:48px;height:48px;min-width:48px;border-radius:18px;display:grid;place-items:center;border:1px solid rgba(124,60,255,.25);background:rgba(124,60,255,.10);color:var(--bc-purple-2);font-size:19px;}
.ui-km-summary-card .ico.green{color:var(--bc-green);background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.24);}
.ui-km-summary-card .ico.blue{color:var(--bc-blue);background:rgba(56,189,248,.08);border-color:rgba(56,189,248,.24);}
.ui-km-summary-card .ico.amber{color:var(--bc-amber);background:rgba(246,196,69,.08);border-color:rgba(246,196,69,.24);}
.ui-km-summary-card .ico.red{color:var(--bc-red);background:rgba(255,77,94,.08);border-color:rgba(255,77,94,.24);}
.ui-km-summary-card span{display:block;color:var(--bc-muted);font-size:12px;font-weight:950;}
.ui-km-summary-card b{display:block;color:var(--bc-text);font-size:24px;line-height:1.1;font-weight:950;margin-top:4px;}
.ui-km-toolbar{border:1px solid var(--bc-line);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.016));padding:14px;display:grid;grid-template-columns:minmax(260px,1fr) 170px 160px auto;gap:10px;align-items:end;}
.ui-km-field{position:relative;display:grid;gap:7px;}
.ui-km-field label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--bc-faint)!important;margin:0;}
.ui-km-field .fa-magnifying-glass{position:absolute;left:15px;bottom:15px;color:var(--bc-faint);}
.ui-km-field input.ui-km-search{padding-left:44px!important;border-color:rgba(124,60,255,.42)!important;}
.ui-km-duration{display:flex;gap:8px;align-items:center;justify-content:flex-start;flex-wrap:wrap;}
.ui-km-chip{min-height:38px;padding:0 14px;border-radius:12px;border:1px solid var(--bc-line);background:rgba(255,255,255,.035);color:var(--bc-muted);font-weight:950;}
.ui-km-chip.is-active,.ui-km-chip:hover{background:linear-gradient(135deg,rgba(124,60,255,.58),rgba(124,60,255,.18));border-color:rgba(124,60,255,.38);color:#fff;}
.ui-km-create{min-height:48px;min-width:156px;}
.ui-km-selected{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--bc-line);border-radius:18px;background:rgba(255,255,255,.025);padding:13px 15px;}
.ui-km-selected .left{display:flex;align-items:center;gap:12px;color:var(--bc-soft);font-weight:950;}
.ui-km-selected .check-dot{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;color:var(--bc-cyan);background:rgba(34,211,238,.10);border:1px solid rgba(34,211,238,.24);}
.ui-km-table-card{border:1px solid var(--bc-line);border-radius:22px;background:rgba(255,255,255,.018);overflow:hidden;}
.ui-key-cell{display:flex;align-items:center;gap:10px;min-width:220px;}
.ui-key-check{width:17px;height:17px;accent-color:var(--bc-purple);}
.ui-key-name{font-weight:950;color:var(--bc-text);letter-spacing:.01em;}
.ui-key-sub{margin-top:4px;color:var(--bc-muted);font-size:12px;font-weight:800;}
.ui-copy-mini{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--bc-line);border-radius:8px;background:rgba(255,255,255,.035);color:var(--bc-muted);}
.ui-status-badge{display:inline-flex;align-items:center;gap:7px;min-width:108px;justify-content:center;padding:7px 10px;border-radius:999px;border:1px solid rgba(34,197,94,.24);background:rgba(34,197,94,.10);color:#7bf2a5;font-weight:950;font-size:12px;}
.ui-status-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor;}
.ui-status-badge.wait{border-color:rgba(56,189,248,.24);background:rgba(56,189,248,.10);color:#7ddcff;}
.ui-status-badge.lock{border-color:rgba(255,77,94,.24);background:rgba(255,77,94,.10);color:#ff9aa5;}
.ui-device-wrap{min-width:130px;display:grid;gap:6px;}
.ui-device-line{display:flex;align-items:center;gap:8px;color:var(--bc-soft);font-weight:900;}
.ui-device-bar{height:5px;border-radius:999px;background:rgba(0,0,0,.5);overflow:hidden;}
.ui-device-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--bc-cyan),var(--bc-purple-2));}
.ui-expiry{display:grid;gap:2px;font-weight:950;color:var(--bc-soft);}
.ui-expiry small{font-weight:800;color:var(--bc-muted);}
.ui-row-actions{display:flex;gap:8px;justify-content:flex-end;min-width:178px;}
.ui-icon-btn{width:34px;height:34px;border-radius:11px!important;display:grid;place-items:center!important;border:1px solid var(--bc-line)!important;background:rgba(255,255,255,.035)!important;color:var(--bc-soft)!important;padding:0!important;}
.ui-icon-btn.view{color:var(--bc-cyan)!important;background:rgba(34,211,238,.08)!important;border-color:rgba(34,211,238,.20)!important;}
.ui-icon-btn.edit{color:#60a5fa!important;background:rgba(59,130,246,.08)!important;border-color:rgba(59,130,246,.20)!important;}
.ui-icon-btn.reload{color:var(--bc-amber)!important;background:rgba(246,196,69,.08)!important;border-color:rgba(246,196,69,.20)!important;}
.ui-icon-btn.del{color:var(--bc-red)!important;background:rgba(255,77,94,.08)!important;border-color:rgba(255,77,94,.20)!important;}
.ui-dt-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-top:1px solid var(--bc-line);}

/* Guide blocks */
.ui-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}
.ui-code-note{padding:14px;border:1px solid var(--bc-line);border-radius:16px;background:rgba(255,255,255,.03);color:var(--bc-muted);font-weight:850;}
html[data-ui-theme] .CodeMirror{background:#080b12!important;border:1px solid var(--bc-line);border-radius:16px;min-height:120px;}

/* Auth pages */
html[data-ui-theme] body.vh-100{background:radial-gradient(circle at 50% -10%,rgba(124,60,255,.20),transparent 34%),linear-gradient(180deg,var(--bc-bg),var(--bc-bg-2))!important;}
html[data-ui-theme] .authincation{background:transparent!important;}
html[data-ui-theme] .authincation-content{max-width:560px;margin:0 auto;border-radius:28px!important;overflow:hidden;box-shadow:var(--bc-glow)!important;}
html[data-ui-theme] .auth-form{padding:42px!important;}
html[data-ui-theme] .auth-form img{width:min(320px,100%);max-height:150px;object-fit:cover;border-radius:20px;border:1px solid var(--bc-line);filter:grayscale(100%) contrast(1.08) brightness(.85);}
html[data-ui-theme] .auth-form h4{font-size:25px;font-weight:950;}
html[data-ui-theme] .auth-form .btn-block{width:100%;min-height:50px;}

/* Small UI helpers */
.ui-scrollbar{position:fixed;top:0;left:0;z-index:9999;height:3px;background:linear-gradient(90deg,var(--bc-purple),var(--bc-cyan));box-shadow:0 0 18px rgba(124,60,255,.55);}
.ui-to-top{position:fixed;right:18px;bottom:18px;z-index:999;width:44px;height:44px;border:1px solid var(--bc-line)!important;background:var(--bc-panel-2)!important;color:var(--bc-text)!important;opacity:0;pointer-events:none;transform:translateY(12px);transition:.18s ease;}
.ui-to-top.is-show{opacity:1;pointer-events:auto;transform:translateY(0);}
.ui-toast{position:fixed;left:50%;bottom:24px;z-index:9999;transform:translate(-50%,18px);opacity:0;pointer-events:none;padding:12px 16px;border-radius:999px;background:#fff;color:#0b0e16;font-weight:950;box-shadow:var(--bc-shadow);transition:.18s ease;}
.ui-toast.is-show{opacity:1;transform:translate(-50%,0);}

/* Responsive */
@media (max-width:1399px){.ui-km-summary{grid-template-columns:repeat(3,minmax(0,1fr));}.ui-km-toolbar{grid-template-columns:1fr 150px 150px auto;}}
@media (max-width:1199px){.ui-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.ui-panel-grid,.ui-graph-grid{grid-template-columns:1fr;}.ui-km-layout{grid-template-columns:1fr;}.ui-km-aside{position:relative;top:auto;grid-template-columns:1fr 1fr;}.ui-guide-grid{grid-template-columns:1fr;}}
@media (max-width:991px){
  html[data-ui-theme] .content-body{padding-top:94px;margin-left:0!important;}
  html[data-ui-theme] .container-fluid{padding-left:18px;padding-right:18px;}
  html[data-ui-theme] .nav-header{width:100%!important;position:fixed!important;left:0!important;top:0!important;z-index:1100!important;border-right:0!important;padding-left:18px!important;}
  html[data-ui-theme] .header{left:0!important;margin-left:0!important;top:86px!important;height:0!important;min-height:0!important;border:0!important;background:transparent!important;box-shadow:none!important;}
  html[data-ui-theme] .header .header-content{height:0;overflow:visible;}
  html[data-ui-theme] .header .navbar{height:auto;padding:0 18px!important;}
  html[data-ui-theme] .ui-top-title{display:none;}
  html[data-ui-theme] .ui-header-tools{position:fixed;top:22px;right:88px;z-index:1200;}
  html[data-ui-theme] .header-right{position:fixed;top:16px;right:16px;z-index:1201;}
  html[data-ui-theme] .ui-header-status{display:none!important;}
  html[data-ui-theme] .header-profile img{width:52px;height:52px;}
  html[data-ui-theme] .deznav{position:fixed!important;z-index:1190!important;top:86px!important;left:0!important;bottom:0!important;width:292px!important;transform:translateX(-105%);transition:.25s ease;}
  html[data-ui-theme] body.ui-menu-open .deznav{transform:translateX(0);}
  html[data-ui-theme] body.ui-menu-open:before{content:"";position:fixed;z-index:1180;inset:86px 0 0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);}
  .ui-brand-copy strong{font-size:17px;}
  .ui-brand-copy small{font-size:11px;}
  .ui-page-hero{flex-direction:column;align-items:flex-start;padding:24px;}
  .ui-page-hero h1{font-size:38px;}
  .ui-hero-actions{justify-content:flex-start;}
  .ui-km-titlebar{flex-direction:column;align-items:flex-start;}
  .ui-km-summary{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ui-km-toolbar{grid-template-columns:1fr;}
  .ui-km-aside{grid-template-columns:1fr;}
}
@media (max-width:575px){
  html[data-ui-theme] .container-fluid{padding-left:14px;padding-right:14px;}
  html[data-ui-theme] .ui-header-tools{right:78px;gap:6px;}
  .ui-control-btn{min-height:36px;padding:0 12px;font-size:12px;}
  .ui-brand-mark{width:44px;height:44px;min-width:44px;}
  .ui-page-hero{padding:22px;border-radius:24px;}
  .ui-page-hero h1{font-size:34px;}
  .ui-page-hero p{font-size:14px;}
  .ui-run-pill,.ui-action{width:100%;min-height:48px;}
  .ui-stat-grid,.ui-km-summary{grid-template-columns:1fr;}
  .ui-stat-card .card-body{min-height:118px;}
  .ui-donut-wrap{grid-template-columns:1fr;text-align:center;}
  .ui-donut-canvas{margin:auto;}
  .ui-graph-head{flex-direction:column;}
  .ui-panel .card-header{flex-direction:column;align-items:flex-start;}
  .ui-km-tabs{grid-template-columns:1fr 1fr 1fr;}
  .ui-km-selected{flex-direction:column;align-items:stretch;}
  .ui-km-selected .right{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .ui-km-create{width:100%;}
  .ui-dt-footer{flex-direction:column;align-items:flex-start;}
  .table-responsive{overflow-x:auto;}
  .ui-row-actions{min-width:170px;}
}
@media (prefers-reduced-motion:reduce){html[data-ui-theme] *{animation-duration:1ms!important;transition-duration:1ms!important;}}


/* ==========================================================
   KEYDEV Dark Console UI v4.1 — final layout fixes
   - Removes the 3-line hamburger button completely
   - Fixes image/avatar sizing
   - Rebalances key-manager desktop layout
   - Adds true mobile card layout for the key table
   - Fixes modal sizing so it never overlaps the page awkwardly
   ========================================================== */
html[data-ui-theme] .nav-control,
html[data-ui-theme] .hamburger,
html[data-ui-theme] .hamburger span,
html[data-ui-theme] .nav-control .hamburger,
html[data-ui-theme] .nav-control .hamburger .line{display:none!important;visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;}

html[data-ui-theme] .nav-header{justify-content:flex-start!important;gap:0!important;overflow:hidden;}
html[data-ui-theme] .ui-brand-logo{min-width:0;max-width:100%;}
html[data-ui-theme] .ui-brand-mark{width:56px;height:56px;min-width:56px;border-radius:50%;border:2px solid rgba(124,60,255,.55);box-shadow:0 0 0 4px rgba(124,60,255,.08),0 18px 50px rgba(124,60,255,.22);}
html[data-ui-theme] .ui-brand-mark img{width:100%!important;height:100%!important;display:block;object-fit:cover;border-radius:50%;}
html[data-ui-theme] .ui-brand-copy strong{max-width:180px;font-size:19px;line-height:1.1;}
html[data-ui-theme] .ui-user-chip img{width:38px!important;height:38px!important;min-width:38px;border-radius:50%;object-fit:cover;}
html[data-ui-theme] .header-profile .nav-link{padding:0!important;display:flex;align-items:center;justify-content:center;}
html[data-ui-theme] .header-profile img{width:52px!important;height:52px!important;min-width:52px;object-fit:cover;}
html[data-ui-theme] .ui-sidebar-profile img,
html[data-ui-theme] .ui-km-user-mini img{width:44px!important;height:44px!important;min-width:44px;border-radius:50%;object-fit:cover;}

/* Stronger page organization */
.ui-km-page{--km-gap:18px;}
.ui-km-titlebar{position:relative;align-items:center!important;padding:26px 28px;border:1px solid rgba(124,60,255,.20);border-radius:28px;background:radial-gradient(circle at 86% 20%,rgba(124,60,255,.22),transparent 38%),radial-gradient(circle at 10% 0%,rgba(34,211,238,.07),transparent 36%),linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.018));box-shadow:var(--bc-glow);overflow:hidden;margin-bottom:22px!important;}
.ui-km-titlebar:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(124,60,255,.08),transparent 46%);pointer-events:none;}
.ui-km-titlebar>div{position:relative;z-index:1;}
.ui-km-titlebar h1{font-size:40px!important;margin-top:10px!important;letter-spacing:-.045em;}
.ui-km-titlebar p{max-width:620px;font-size:15px;}
.ui-km-titlebar .ui-eyebrow{background:rgba(124,60,255,.11);border-color:rgba(124,60,255,.30);color:#c9b7ff!important;letter-spacing:.08em;text-transform:uppercase;}
.ui-km-layout{grid-template-columns:minmax(276px,320px) minmax(0,1fr)!important;gap:18px!important;}
.ui-km-aside{top:108px!important;gap:14px!important;}
.ui-km-box{border-radius:24px!important;padding:18px!important;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03);}
.ui-km-tabs{gap:9px!important;}
.ui-km-tab{min-height:46px!important;}
.ui-km-summary{gap:12px!important;}
.ui-km-summary-card{min-height:106px!important;border-radius:22px!important;padding:17px!important;}
.ui-km-summary-card .ico{width:54px!important;height:54px!important;min-width:54px!important;border-radius:20px!important;}
.ui-km-summary-card b{font-size:28px!important;}
.ui-km-toolbar{border-radius:24px!important;padding:16px!important;grid-template-columns:minmax(260px,1.1fr) 180px 170px auto!important;}
.ui-km-selected{border-radius:22px!important;padding:15px 16px!important;}
.ui-km-table-card{border-radius:24px!important;}
.ui-km-table-card .table-responsive{border-radius:24px!important;}
.ui-row-actions{gap:7px!important;}
.ui-icon-btn{width:36px!important;height:36px!important;border-radius:12px!important;}

/* Modal fixes: keep forms readable on desktop and safe on mobile */
html[data-ui-theme] .modal{padding:18px!important;background:rgba(0,0,0,.62)!important;backdrop-filter:blur(6px);}
html[data-ui-theme] .modal-dialog{width:auto!important;max-width:min(720px,calc(100vw - 36px))!important;margin:24px auto!important;}
html[data-ui-theme] .modal-dialog.modal-lg{max-width:min(860px,calc(100vw - 36px))!important;}
html[data-ui-theme] .modal-content{border-radius:26px!important;overflow:hidden!important;box-shadow:0 28px 90px rgba(0,0,0,.55),0 0 0 1px rgba(124,60,255,.18)!important;}
html[data-ui-theme] .modal-header{padding:18px 22px!important;}
html[data-ui-theme] .modal-body{padding:22px!important;max-height:calc(100vh - 210px);overflow:auto;}
html[data-ui-theme] .modal-footer{padding:16px 22px!important;gap:10px;}
html[data-ui-theme] .modal .btn-close{filter:invert(1) grayscale(1);opacity:.8;box-shadow:none!important;}
html[data-ui-theme="light"] .modal .btn-close{filter:none;}
html[data-ui-theme] .modal-backdrop.show{opacity:.70!important;backdrop-filter:blur(5px);}

/* Clean Thai/English toggles and keep controls compact */
.ui-header-tools{flex-wrap:nowrap!important;}
.ui-control-btn{white-space:nowrap;}
.ui-theme-toggle{min-width:96px;}
.ui-lang-toggle{min-width:50px;}

/* Make DataTables footer less cramped */
.ui-dt-footer .dataTables_length label,
.ui-dt-footer .dataTables_info,
.ui-dt-footer .dataTables_paginate{margin:0!important;}
.ui-dt-footer{flex-wrap:wrap;}

@media (max-width:1399px){
  .ui-km-toolbar{grid-template-columns:1fr 160px 150px auto!important;}
}
@media (max-width:1199px){
  .ui-km-layout{grid-template-columns:1fr!important;}
  .ui-km-aside{position:relative!important;top:auto!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:start;}
  .ui-km-main{min-width:0;}
}

/* Tablet / phone: no hamburger and no drawer. Content becomes a clean app layout. */
@media (max-width:991px){
  html[data-ui-theme] body{padding-top:0!important;}
  html[data-ui-theme] .nav-header{height:82px!important;min-height:82px!important;width:100%!important;position:fixed!important;left:0!important;right:0!important;top:0!important;padding:22px 172px 12px 16px!important;border-right:0!important;z-index:1100!important;}
  html[data-ui-theme] .ui-traffic-lights{top:8px;left:16px;gap:8px;}
  html[data-ui-theme] .ui-traffic-lights span{width:10px;height:10px;}
  html[data-ui-theme] .ui-brand-mark{width:46px!important;height:46px!important;min-width:46px!important;}
  html[data-ui-theme] .ui-brand-copy strong{max-width:150px;font-size:18px;}
  html[data-ui-theme] .ui-brand-copy small{font-size:11px;}
  html[data-ui-theme] .header{position:fixed!important;left:0!important;right:0!important;top:0!important;height:82px!important;min-height:82px!important;margin-left:0!important;background:transparent!important;border:0!important;z-index:1120!important;pointer-events:none;}
  html[data-ui-theme] .header .header-content,
  html[data-ui-theme] .header .navbar{height:82px!important;padding:0!important;}
  html[data-ui-theme] .header-left{width:auto!important;}
  html[data-ui-theme] .ui-top-title{display:none!important;}
  html[data-ui-theme] .ui-top-identity{justify-content:flex-end!important;}
  html[data-ui-theme] .ui-header-tools{position:fixed!important;right:82px!important;top:20px!important;z-index:1220!important;gap:7px!important;pointer-events:auto;}
  html[data-ui-theme] .ui-theme-toggle{min-width:44px;width:44px;padding:0!important;font-size:0!important;}
  html[data-ui-theme] .ui-theme-toggle:before{content:"☾";font-size:16px;line-height:1;}
  html[data-ui-theme="light"] .ui-theme-toggle:before{content:"☀";}
  html[data-ui-theme] .ui-lang-toggle{min-width:46px;width:46px;padding:0!important;}
  html[data-ui-theme] .header-right{position:fixed!important;right:16px!important;top:15px!important;z-index:1221!important;pointer-events:auto;}
  html[data-ui-theme] .ui-header-status{display:none!important;}
  html[data-ui-theme] .header-profile img{width:50px!important;height:50px!important;min-width:50px!important;}
  html[data-ui-theme] .deznav{display:none!important;}
  html[data-ui-theme] .content-body{margin-left:0!important;padding-top:102px!important;}
  html[data-ui-theme] .container-fluid{max-width:none!important;padding-left:16px!important;padding-right:16px!important;}
  .ui-km-titlebar{padding:23px!important;border-radius:26px!important;align-items:flex-start!important;}
  .ui-km-titlebar h1{font-size:34px!important;}
  .ui-km-titlebar p{font-size:14px;}
  .ui-hero-actions{width:100%;display:grid!important;grid-template-columns:1fr 1fr;gap:10px;}
  .ui-run-pill,.ui-action{width:100%;}
  .ui-km-aside{grid-template-columns:1fr!important;order:2;}
  .ui-km-main{order:1;}
  .ui-km-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .ui-km-toolbar{grid-template-columns:1fr 1fr!important;}
  .ui-km-toolbar .ui-km-field:first-child{grid-column:1 / -1;}
  .ui-km-create{grid-column:1 / -1;width:100%;}
}

@media (max-width:767px){
  .ui-km-titlebar h1{font-size:30px!important;}
  .ui-km-summary{grid-template-columns:1fr 1fr!important;}
  .ui-km-summary-card{min-height:96px!important;padding:15px!important;}
  .ui-km-summary-card .ico{width:48px!important;height:48px!important;min-width:48px!important;}
  .ui-km-summary-card b{font-size:24px!important;}
  .ui-km-toolbar{grid-template-columns:1fr!important;}
  .ui-km-selected .right{display:grid!important;grid-template-columns:1fr 1fr!important;}
  .ui-km-table-card{padding:0 0 2px;overflow:visible!important;}
  .ui-km-table-card .table-responsive{overflow:visible!important;}
  #key-manager{display:block!important;width:100%!important;border-spacing:0!important;}
  #key-manager thead{display:none!important;}
  #key-manager tbody{display:block!important;width:100%!important;padding:8px;}
  #key-manager tbody tr{display:block!important;width:100%!important;margin:10px 0!important;padding:13px!important;border:1px solid var(--bc-line)!important;border-radius:20px!important;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018))!important;box-shadow:0 12px 40px rgba(0,0,0,.18);}
  #key-manager tbody td{display:flex!important;align-items:flex-start;justify-content:space-between;gap:14px;width:100%!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.055)!important;padding:9px 2px!important;text-align:right!important;white-space:normal!important;}
  #key-manager tbody td:last-child{border-bottom:0!important;}
  #key-manager tbody td:before{content:"";min-width:96px;text-align:left;color:var(--bc-faint);font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.04em;}
  #key-manager tbody td:nth-child(1){justify-content:flex-start;border-bottom:0!important;padding-bottom:0!important;}
  #key-manager tbody td:nth-child(1):before{display:none;}
  #key-manager tbody td:nth-child(2):before{content:"คีย์/ไลเซนส์";}
  #key-manager tbody td:nth-child(3):before{content:"สถานะ";}
  #key-manager tbody td:nth-child(4):before{content:"อุปกรณ์";}
  #key-manager tbody td:nth-child(5):before{content:"หมดอายุ";}
  #key-manager tbody td:nth-child(6):before{content:"หมายเหตุ";}
  #key-manager tbody td:nth-child(7){display:block!important;text-align:left!important;padding-top:12px!important;}
  #key-manager tbody td:nth-child(7):before{content:"การดำเนินการ";display:block;margin-bottom:8px;}
  .ui-key-cell{min-width:0;width:100%;justify-content:space-between;text-align:left;}
  .ui-key-name{word-break:break-all;}
  .ui-status-badge{min-width:104px;}
  .ui-device-wrap{min-width:150px;max-width:190px;}
  .ui-row-actions{justify-content:flex-start!important;min-width:0!important;flex-wrap:wrap;}
  .ui-dt-footer{padding:12px!important;display:grid!important;grid-template-columns:1fr;gap:12px!important;}
  .ui-dt-footer .dataTables_paginate{display:flex;flex-wrap:wrap;gap:4px;}
}

@media (max-width:575px){
  html[data-ui-theme] .nav-header{padding-right:150px!important;}
  html[data-ui-theme] .ui-brand-mark{width:42px!important;height:42px!important;min-width:42px!important;}
  html[data-ui-theme] .ui-brand-copy strong{max-width:116px;font-size:16px;}
  html[data-ui-theme] .ui-header-tools{right:74px!important;top:21px!important;}
  html[data-ui-theme] .header-right{right:12px!important;}
  html[data-ui-theme] .header-profile img{width:46px!important;height:46px!important;min-width:46px!important;}
  .ui-km-titlebar{padding:20px!important;}
  .ui-km-titlebar h1{font-size:28px!important;}
  .ui-hero-actions{grid-template-columns:1fr!important;}
  .ui-km-summary{grid-template-columns:1fr!important;}
  .ui-km-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .ui-km-tab{font-size:13px;}
  .ui-km-selected .right{grid-template-columns:1fr!important;}
  html[data-ui-theme] .modal{padding:8px!important;}
  html[data-ui-theme] .modal-dialog,
  html[data-ui-theme] .modal-dialog.modal-lg{max-width:calc(100vw - 16px)!important;margin:10px auto!important;}
  html[data-ui-theme] .modal-header{padding:15px 16px!important;}
  html[data-ui-theme] .modal-body{padding:16px!important;max-height:calc(100vh - 150px);}
  html[data-ui-theme] .modal-footer{padding:14px 16px!important;display:grid!important;grid-template-columns:1fr 1fr;}
}