:root { font-family: Inter, "Segoe UI", Arial, sans-serif; color: rgb(35, 51, 77); background: rgb(243, 246, 251); font-synthesis: none; font-size: 14px; --kyo-muted: #728099; --kyo-border: #e1e7f0; --kyo-shadow: 0 3px 6px rgba(0,0,0,.10),0 10px 18px -8px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.9); }

* { box-sizing: border-box; }

body { margin: 0px; }

button, input, select, textarea { font: inherit; }

button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

button, a { touch-action: manipulation; }

button { cursor: pointer; }

button:disabled { cursor: not-allowed; opacity: 0.5; }

a { color: var(--kyo-blue); text-decoration: none; }

a:hover { text-decoration: underline; }

button:focus-visible, a:focus-visible { outline: rgb(138, 185, 255) solid 3px; outline-offset: 3px; }

button svg { pointer-events: none; }

h1, h2, h3, p { margin-top: 0px; }

h1 { font-size: 27px; letter-spacing: -0.8px; margin-bottom: 7px; }

h2 { font-size: 17px; letter-spacing: -0.25px; }

h3 { font-size: 14px; }

small { font-size: 12px; }

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }

input, select, textarea { width: 100%; background: rgb(255, 255, 255); border: 1px solid rgb(216, 224, 236); border-radius: 8px; padding: 11px 12px; color: rgb(36, 54, 79); min-height: 42px; outline: none; }

input::placeholder, textarea::placeholder { color: rgb(153, 165, 182); }

textarea { resize: vertical; min-height: 84px; }

input[type="checkbox"] { min-height: 0px; width: 17px; height: 17px; accent-color: rgb(38, 91, 181); }

input[type="date"], input[type="datetime-local"] { color-scheme: light; }

input[type="number"] { max-width: 110px; }

hr { border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--kyo-border); margin: 20px 0px; }

.kyo-loading { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; color: var(--kyo-muted); }

.kyo-shell { display: grid; grid-template-columns: 230px minmax(0px, 1fr); min-height: 100dvh; }

.kyo-sidebar { background: linear-gradient(rgb(16, 41, 78) 0%, rgb(21, 54, 99) 50%, rgb(16, 41, 78) 100%); color: rgb(198, 212, 232); position: fixed; inset: 0px auto 0px 0px; width: 230px; display: flex; flex-direction: column; padding: 28px 15px 18px; z-index: 20; border-right: 1px solid rgb(31, 65, 111); }

.kyo-brand { display: flex; align-items: center; gap: 11px; padding: 0px 13px 29px; color: white; }

.kyo-brand img { width: 42px; height: 42px; }

.kyo-brand strong { font-size: 24px; letter-spacing: -0.8px; }

.kyo-brand small { display: block; font-size: 10px; letter-spacing: 1.6px; color: rgb(159, 184, 216); margin-top: 4px; }

.kyo-nav-label { font-size: 10px; letter-spacing: 1.5px; font-weight: 600; color: rgb(127, 154, 188); margin: 17px 14px 11px; }

.kyo-nav { display: flex; flex-direction: column; gap: 5px; }

.kyo-nav button { display: flex; align-items: center; gap: 11px; width: 100%; border: 0px; color: rgb(189, 204, 226); background: transparent; text-align: left; border-radius: 9px; padding: 11px 13px; font-weight: 500; min-height: 45px; }

.kyo-nav button:hover { background: rgb(35, 67, 108); color: rgb(255, 255, 255); }

.kyo-nav button.kyo-active { background: linear-gradient(90deg, rgb(29, 75, 152) 0%, rgb(50, 105, 186) 50%, rgb(29, 75, 152) 100%); color: rgb(255, 255, 255); box-shadow: rgba(7, 23, 46, 0.25) 0px 3px 6px, rgba(255, 255, 255, 0.17) 0px 1px 0px inset; }

.kyo-icon { width: 25px; height: 25px; flex-shrink: 0; overflow: visible; }

.kyo-sidebar-bottom { margin-top: auto; padding: 24px 12px 0px; }

.kyo-plan { background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 10px; padding: 12px; font-size: 12px; line-height: 1.6; }

.kyo-plan strong { color: rgb(213, 232, 255); display: block; font-weight: 600; }

.kyo-plan span { color: rgb(142, 171, 205); font-size: 11px; }

.kyo-status-dot { display: inline-block; width: 6px; height: 6px; background: rgb(97, 212, 169); border-radius: 50%; margin-right: 6px; }

.kyo-sidebar-footer { margin: 18px 2px 0px; color: rgb(120, 147, 182); font-size: 10px; letter-spacing: 1.2px; }

.kyo-main { grid-column: 2; min-width: 0px; }

.kyo-topbar { height: 60px; background: rgba(255, 255, 255, 0.918); border-bottom: 1px solid var(--kyo-border); display: flex; align-items: center; justify-content: space-between; padding: 0px 36px; gap: 20px; }

.kyo-breadcrumb { color: rgb(138, 150, 169); font-size: 12px; }

.kyo-breadcrumb span { color: rgb(61, 80, 108); margin-left: 10px; }

.kyo-topbar-right { display: flex; align-items: center; gap: 16px; }

.kyo-free-pill { font-size: 10px; letter-spacing: 0.8px; color: rgb(35, 117, 79); background: rgb(233, 246, 238); border: 1px solid rgb(214, 236, 222); border-radius: 5px; padding: 5px 8px; font-weight: 700; white-space: nowrap; }

.kyo-account { display: flex; align-items: center; gap: 10px; }

.kyo-avatar { height: 35px; width: 35px; display: grid; place-items: center; background: linear-gradient(135deg, rgb(30, 79, 159), rgb(96, 147, 220), rgb(30, 79, 159)); color: white; font-weight: 700; border-radius: 11px; box-shadow: rgba(24, 60, 108, 0.145) 0px 2px 4px; }

.kyo-account small { display: block; color: var(--kyo-muted); font-size: 10px; margin-top: 3px; }

.kyo-logout { border: 0px; background: transparent; color: rgb(139, 152, 171); font-size: 12px; }

.kyo-content { max-width: none; padding: 31px 36px 24px; margin: 0;  width: 100%; }

.kyo-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 26px; }

.kyo-page-heading p { font-size: 13px; color: var(--kyo-muted); margin: 0px; line-height: 1.7; }

.kyo-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.8px; color: rgb(130, 148, 175); margin-bottom: 10px; }

.kyo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-width: 1px; border-style: solid; border-image: none; min-height: 40px; line-height: 1.2; white-space: nowrap; text-decoration: none !important; }

.kyo-btn-sm { min-height: 30px; }

.kyo-btn-plain { border: 0px; background: none; color: rgb(102, 123, 153); padding: 5px 0px; font-size: 12px; }

.kyo-btn-plain:hover { color: rgb(33, 88, 181); }

.kyo-card { background: white; border: 1px solid rgb(226, 231, 240); border-radius: 12px; box-shadow: var(--kyo-shadow); min-width: 0px; }

.kyo-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 21px 23px 0px; }

.kyo-card-head h2 { margin: 0px; }

.kyo-card-body { padding: 21px 23px; }

.kyo-metrics { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 17px; margin-bottom: 23px; }

.kyo-metric { padding: 20px 22px; position: relative; overflow: hidden; }

.kyo-metric-label { font-size: 12px; color: rgb(114, 129, 154); margin-bottom: 13px; }

.kyo-metric-value { font-size: 29px; font-weight: 650; letter-spacing: -1px; color: rgb(33, 57, 89); font-variant-numeric: tabular-nums; }

.kyo-metric-foot { color: rgb(154, 165, 181); font-size: 10px; margin-top: 10px; }

.kyo-metric-mark { position: absolute; right: 20px; top: 20px; width: 29px; height: 29px; display: grid; place-items: center; background: rgb(237, 243, 254); color: rgb(92, 133, 203); border-radius: 9px; font-size: 18px; }

.kyo-two-columns { display: grid; grid-template-columns: minmax(0px, 1.8fr) minmax(280px, 1fr); gap: 22px; margin-bottom: 23px; }

.kyo-chart { width: 100%; height: 220px; display: block; overflow: visible; }

.kyo-chart-labels { display: flex; justify-content: space-between; color: rgb(148, 161, 180); font-size: 10px; gap: 4px; margin-top: 6px; }

.kyo-chart-caption { display: flex; align-items: center; gap: 7px; color: rgb(130, 144, 165); font-size: 11px; }

.kyo-legend-dot { height: 7px; width: 7px; border-radius: 50%; background: rgb(57, 120, 216); display: inline-block; }

.kyo-chart-empty { height: 200px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; color: rgb(152, 165, 184); font-size: 12px; border-bottom: 1px solid rgb(231, 237, 246); background: repeating-linear-gradient(0deg, transparent, transparent 49px, rgb(242, 245, 250) 49px, rgb(242, 245, 250) 50px); }

.kyo-chart-empty strong { font-weight: 500; color: rgb(104, 123, 152); }

.kyo-source-row { display: grid; grid-template-columns: minmax(0px, 1fr) 52px; gap: 6px; margin: 10px 0; }

.kyo-source-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kyo-source-value { text-align: right; font-size: 12px; font-weight: 600; color: rgb(75, 99, 131); }

.kyo-progress { height: 5px; background: rgb(238, 242, 248); border-radius: 4px; margin-top: 0; overflow: hidden; grid-column: 1 / -1; }

.kyo-progress span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, rgb(31, 79, 156), rgb(109, 157, 227), rgb(59, 112, 189)); }

.kyo-muted { color: var(--kyo-muted); }

.kyo-small { font-size: 12px; line-height: 1.65; }

.kyo-empty { padding: 20px 12px; text-align: center; color: rgb(130, 145, 168); font-size: 12px; line-height: 1.8; }

.kyo-empty strong { display: block; color: rgb(83, 106, 137); font-size: 13px; font-weight: 600; margin-bottom: 4px; }

.kyo-quick { display: flex; gap: 10px; }

.kyo-quick input { min-height: 47px; background: rgb(249, 251, 254); }

.kyo-quick-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 11px; color: rgb(139, 153, 173); }

.kyo-platforms { display: flex; gap: 7px; }

.kyo-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; border-radius: 5px; padding: 4px 7px; white-space: nowrap; line-height: 1.3; }

.kyo-badge-shopee { background: rgb(255, 240, 232); color: rgb(207, 98, 44); }

.kyo-badge-tiktok { background: rgb(237, 240, 245); color: rgb(55, 70, 93); }

.kyo-badge-active { background: rgb(234, 246, 238); color: rgb(45, 135, 91); }

.kyo-badge-paused { background: rgb(255, 244, 223); color: rgb(162, 115, 36); }

.kyo-badge-archived, .kyo-badge-expired { background: rgb(240, 242, 247); color: rgb(125, 139, 161); }

.kyo-badge-pending { background: rgb(242, 245, 250); color: rgb(135, 150, 173); }

.kyo-toolbar { display: flex; align-items: center; gap: 10px; padding: 17px 21px; border-bottom: 1px solid var(--kyo-border); flex-wrap: wrap; }

.kyo-search { display: flex; position: relative; flex: 1 1 0%; min-width: 190px; }

.kyo-search input { padding-right: 32px; font-size: 12px; min-height: 36px; }

.kyo-search button { position: absolute; right: 7px; top: 6px; background: none; border: 0px; color: rgb(130, 144, 166); font-size: 17px; }

.kyo-toolbar select { width: auto; min-width: 120px; font-size: 12px; min-height: 36px; padding: 8px 26px 8px 10px; }

.kyo-count { font-size: 11px; color: rgb(140, 154, 176); white-space: nowrap; margin-left: auto; }

.kyo-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }

.kyo-table th { font-size: 10px; letter-spacing: 0.4px; background: rgb(248, 250, 253); color: rgb(138, 152, 173); text-transform: uppercase; font-weight: 600; padding: 8px 12px; border-bottom: 1px solid rgb(233, 237, 244); }

.kyo-table td { padding: 8px 12px; border-bottom: 1px solid rgb(237, 240, 246); vertical-align: middle;  line-height: 1.4; }

.kyo-table tr:last-child td { border-bottom: 0px; }

.kyo-table tbody tr:hover { background: rgb(251, 252, 255); }

.kyo-cell-left { text-align: left; }

.kyo-cell-center { text-align: center; }

.kyo-link-title { font-size: 12px; font-weight: 600; color: rgb(52, 73, 99); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; }

.kyo-link-url { font-size: 11px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(101, 132, 176); }

.kyo-link-note { font-size: 10px; color: rgb(154, 166, 182); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kyo-actions { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; }

.kyo-pagination { display: flex; align-items: center; justify-content: space-between; padding: 15px 21px; border-top: 1px solid var(--kyo-border); font-size: 11px; color: rgb(137, 152, 172); }

.kyo-pagination .kyo-actions { gap: 8px; }

.kyo-date { color: rgb(130, 145, 167); font-size: 11px; }

.kyo-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 25px; padding-top: 17px; border-top: 1px solid rgb(224, 230, 240); color: rgb(154, 166, 183); font-size: 10px; }

.kyo-date-range { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.kyo-date-range input { width: 141px; font-size: 11px; min-height: 36px; padding: 8px; }

.kyo-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 22px; margin-bottom: 23px; }

.kyo-info { padding: 12px 14px; border-radius: 8px; background: rgb(240, 245, 255); color: rgb(85, 114, 156); font-size: 12px; line-height: 1.7; border: 1px solid rgb(225, 234, 250); }

.kyo-info strong { color: rgb(51, 94, 155); }

.kyo-note { font-size: 11px; line-height: 1.7; color: rgb(139, 153, 175); margin: 8px 0 0; }

.kyo-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }

.kyo-field { min-width: 0px; }

.kyo-field-full { grid-column: 1 / -1; }

.kyo-field p { font-size: 11px; line-height: 1.65; color: rgb(142, 156, 176); margin: 7px 0px 0px; }

.kyo-field small { display: block; color: rgb(142, 156, 176); line-height: 1.65; margin-top: 6px; font-size: 11px; }

.kyo-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 9px; border-top: 1px solid var(--kyo-border); padding-top: 18px; margin-top: 21px; }

.kyo-dialog { width: min(440px, calc(100vw - var(--kyo-viewport-gap, 40px))); max-height: calc(100dvh - var(--kyo-viewport-gap, 40px)); border: 1px solid rgb(213, 222, 235); border-radius: 13px; padding: 0px; color: rgb(35, 51, 77); box-shadow: var(--kyo-shadow); overflow: auto; }

.kyo-dialog::backdrop { background: rgba(16, 36, 64, 0.396); backdrop-filter: blur(3px); }

.kyo-dialog-head { padding: 21px 24px 17px; border-bottom: 1px solid var(--kyo-border); display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.kyo-dialog-head h2 { margin: 0px; font-size: 17px; }

.kyo-close { border: 0px; background: rgb(241, 244, 249); border-radius: 6px; color: rgb(122, 141, 169); width: 29px; height: 29px; font-size: 23px; line-height: 24px; }

.kyo-dialog-body { padding: 21px 24px; }

.kyo-check { display: flex; align-items: flex-start; gap: 9px; font-weight: 400; font-size: 12px; line-height: 1.6; margin: 10px 0px; }

.kyo-check input { margin-top: 2px; flex-shrink: 0; }

.kyo-form-error { color: rgb(181, 43, 60); background: rgb(255, 240, 242); border-radius: 6px; font-size: 12px; line-height: 1.7; padding: 10px 12px; margin-bottom: 16px; }

.kyo-toasts { position: fixed; bottom: 24px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 10px; max-width: min(400px, -32px + 100vw); }

.kyo-toast { border-radius: 9px; padding: 13px 18px; background: rgb(23, 60, 112); color: rgb(255, 255, 255); box-shadow: var(--kyo-shadow); font-size: 12px; line-height: 1.65; }

.kyo-toast-error { background: rgb(161, 59, 71); }

.kyo-success-url { background: rgb(244, 248, 255); border: 1px solid rgb(220, 231, 248); padding: 8px 10px; border-radius: 8px; word-break: break-all; line-height: 1.5; font-size: 15px; font-weight: 600; }

.kyo-qr { display: block; width: 220px; height: 220px; margin: 10px auto; background: white; }

.kyo-result-list { max-height: 280px; overflow: auto; }

.kyo-result-row { padding: 10px 0px; border-bottom: 1px solid var(--kyo-border); font-size: 12px; overflow-wrap: anywhere; }

.kyo-auth-screen { min-height: 100dvh; display: grid; grid-template-columns: minmax(350px, 1fr) minmax(440px, 1fr); background: rgb(255, 255, 255); }

.kyo-auth-story { background: linear-gradient(140deg, rgb(16, 45, 93), rgb(36, 89, 163), rgb(16, 45, 93)); padding: 55px 12%; color: white; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }

.kyo-auth-story .kyo-brand { padding: 0px; position: absolute; top: 45px; left: 12%; }

.kyo-auth-story h1 { font-size: 40px; line-height: 1.3; letter-spacing: -1.4px; margin-top: 80px; }

.kyo-auth-story > p { color: rgb(184, 204, 233); line-height: 1.95; font-size: 14px; max-width: 390px; }

.kyo-auth-feature { margin-top: 30px; display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgb(213, 225, 243); }

.kyo-auth-feature .kyo-icon { width: 34px; height: 34px; }

.kyo-auth-caption { color: rgb(136, 169, 210); font-size: 11px; margin-top: 65px; line-height: 1.8; }

.kyo-auth-form-wrap { display: flex; align-items: center; justify-content: center; padding: 45px; }

.kyo-auth-form { width: 100%; max-width: 365px; }

.kyo-auth-form h2 { font-size: 25px; margin-bottom: 10px; }

.kyo-auth-form > p { color: rgb(138, 152, 173); line-height: 1.8; font-size: 13px; margin-bottom: 28px; }

.kyo-auth-form .kyo-field { margin-bottom: 18px; }

.kyo-auth-form .kyo-btn { width: 100%; margin-top: 8px; min-height: 45px; }

.kyo-auth-footer { font-size: 11px; color: rgb(156, 168, 184); text-align: center; margin-top: 27px; line-height: 1.8; }

.kyo-mobile-toggle { display: none; background: none; border: 0px; font-size: 22px; color: rgb(79, 101, 132); padding: 4px; }

.kyo-settings-list { display: grid; grid-template-columns: 160px 1fr; gap: 18px 25px; font-size: 12px; padding: 23px; }

.kyo-settings-list dt { color: rgb(130, 145, 167); }

.kyo-settings-list dd { margin: 0px; overflow-wrap: anywhere; }

.kyo-span-two { grid-column: span 2; }

.kyo-audit-entry { padding: 16px 23px; border-bottom: 1px solid var(--kyo-border); font-size: 12px; line-height: 1.8; }

.kyo-audit-entry:last-child { border: 0px; }

.kyo-audit-entry details { margin-top: 6px; color: rgb(123, 142, 168); }

.kyo-audit-entry pre { white-space: pre-wrap; word-break: break-word; font-size: 10px; background: rgb(246, 248, 252); padding: 10px; border-radius: 6px; max-height: 220px; overflow: auto; }







.kyo-hidden { display: none !important; }

.kyo-result-status { display: flex; gap: 8px; align-items: center; margin-top: 7px; }

.kyo-grid-note { margin-bottom: 20px; }

.kyo-flex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

@media (min-width: 1500px) {
.kyo-content { padding-top: 37px; }
.kyo-metrics { gap: 22px; }
.kyo-metric { padding: 24px; }
.kyo-chart { height: 240px; }
}

@media (max-width: 1150px) {
.kyo-shell { grid-template-columns: 204px minmax(0px, 1fr); }
.kyo-sidebar { width: 204px; }
.kyo-content { padding: 25px 23px; }
.kyo-topbar { padding: 0px 23px; }
.kyo-two-columns { grid-template-columns: minmax(0px, 1.5fr) minmax(230px, 1fr); }
.kyo-metrics { gap: 12px; }
.kyo-metric { padding: 17px; }
.kyo-metric-mark { display: none; }
.kyo-metric-value { font-size: 26px; }
.kyo-table td, .kyo-table th { padding-left: 10px; padding-right: 10px; }
.kyo-stats-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}

@media (max-width: 850px) {
.kyo-shell { grid-template-columns: 1fr; }
.kyo-sidebar { transform: translateX(-100%); transition: transform 0.18s; }
.kyo-sidebar.kyo-open { transform: translateX(0px); width: 230px; box-shadow: rgba(16, 39, 68, 0.25) 15px 0px 50px; }
.kyo-main { grid-column: 1; }
.kyo-mobile-toggle { display: block; }
.kyo-topbar { height: 65px; padding: 0px 19px; }
.kyo-breadcrumb { margin-right: auto; }
.kyo-topbar-right { gap: 10px; }
.kyo-content { padding: 24px 19px; }
.kyo-metrics { gap: 12px; }
.kyo-page-heading h1 { font-size: 24px; }
.kyo-auth-screen { grid-template-columns: 1fr; }
.kyo-auth-story { display: none; }
.kyo-auth-form-wrap { min-height: 0; padding: 30px; }
}

@media (max-width: 640px) {
.kyo-metrics { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 11px; }
.kyo-metric { padding: 18px; }
.kyo-metric-value { font-size: 28px; }
.kyo-metric-label { font-size: 11px; }
.kyo-two-columns, .kyo-stats-grid { grid-template-columns: 1fr; gap: 17px; }
.kyo-content { padding: 22px 14px; }
.kyo-topbar { padding: 0px 14px; }
.kyo-account div:not(.kyo-avatar) { display: none; }
.kyo-free-pill { font-size: 9px; }
.kyo-logout { font-size: 11px; }
.kyo-page-heading { align-items: flex-start; margin-bottom: 20px; }
.kyo-page-heading h1 { font-size: 23px; }
.kyo-page-heading p { font-size: 12px; }
.kyo-page-heading > .kyo-actions { flex-direction: column; align-items: stretch; }
.kyo-card-head { padding: 19px 17px 0px; }
.kyo-card-body { padding: 18px 17px; }
.kyo-quick { flex-direction: column; }
.kyo-quick .kyo-btn { min-height: 43px; }
.kyo-quick-foot { flex-direction: column; gap: 8px; }
.kyo-toolbar { padding: 13px; gap: 8px; }
.kyo-search { min-width: 100%; flex-basis: 100%; }
.kyo-toolbar select { flex: 1 1 0%; min-width: 0px; max-width: none; width: 100%; font-size: 11px; }
.kyo-count { font-size: 10px; }
.kyo-link-table thead { display: none; }
.kyo-link-table, .kyo-link-table tbody, .kyo-link-table tr, .kyo-link-table td { display: block; width: 100%; }
.kyo-link-table tr { display: grid; grid-template-columns: 32px minmax(0px, 1fr) auto; padding: 15px 16px; gap: 10px; border-bottom: 1px solid rgb(230, 236, 244); }
.kyo-link-table td { padding: 0px; border: 0px; text-align: left; }
.kyo-link-table td.kyo-serial { grid-area: 1 / 1 / 4 / 2; text-align: center; align-self: start; }
.kyo-link-table td.kyo-serial::before { content: "STT"; display: block; color: rgb(139, 155, 176); font-size: 10px; margin-bottom: 4px; }
.kyo-link-table td:nth-child(2) { grid-area: 1 / 2 / 2 / -1; }
.kyo-link-table td:nth-child(3) { grid-area: 2 / 2; }
.kyo-link-table td:nth-child(4) { grid-area: 3 / 2 / 4 / -1; font-size: 11px; }
.kyo-link-table td:nth-child(4)::before { content: "Lượt truy cập: "; color: rgb(139, 155, 176); }
.kyo-link-table td:nth-child(5) { grid-area: 2 / 3; }
.kyo-link-table td:nth-child(6) { grid-area: 4 / 2 / 5 / -1; }
.kyo-link-table td:nth-child(7) { grid-area: 5 / 2 / 6 / -1; }
.kyo-link-table .kyo-actions { justify-content: flex-start; gap: 7px; }
.kyo-link-title { font-size: 13px; }
.kyo-footer { line-height: 1.8; flex-direction: column; gap: 3px; }
.kyo-form-grid { grid-template-columns: 1fr; gap: 15px; }
.kyo-span-two { grid-column: auto; }
.kyo-dialog-head { padding: 18px; }
.kyo-dialog-body { padding: 18px; }
.kyo-date-range { gap: 6px; }
.kyo-date-range input { flex: 1 1 0%; width: 120px; }
.kyo-settings-list { grid-template-columns: 1fr; gap: 8px; padding: 20px; }
.kyo-settings-list dd { margin-bottom: 10px; }
.kyo-chart { height: 190px; }
.kyo-topbar-right { gap: 7px; }
.kyo-breadcrumb { font-size: 11px; }
.kyo-breadcrumb span { margin-left: 5px; }
.kyo-table.kyo-members-table th:nth-child(4), .kyo-table.kyo-members-table td:nth-child(4) { display: none; }
.kyo-toasts { right: 16px; bottom: 16px; }
.kyo-pagination { padding: 13px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
* { transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 640px) {
.kyo-toolbar select { flex: 1 1 calc(50% - 8px); min-width: 130px; }
}

.kyo-nav button.kyo-active { box-shadow: rgba(7, 23, 46, 0.25) 0px -3px 6px, rgba(255, 255, 255, 0.17) 0px -1px 0px inset; }

.kyo-metric { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

.kyo-metric-label, .kyo-metric-value, .kyo-metric-foot { width: 100%; text-align: center; }

.kyo-metric-label { line-height: 1.5; }

.kyo-metric-foot { line-height: 1.6; }

.kyo-page-heading h1, .kyo-card-head h2, .kyo-dialog-head h2 { display: flex; align-items: center; gap: 10px; min-width: 0px; }

.kyo-title-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: rgb(58, 108, 182); line-height: 0; filter: drop-shadow(rgba(21, 57, 107, 0.133) 0px 2px 1px); }

.kyo-title-icon .kyo-icon { width: 25px; height: 25px; }

.kyo-page-heading .kyo-title-icon .kyo-icon { width: 30px; height: 30px; }

.kyo-title-icon-members { color: rgb(107, 90, 155); }


.kyo-title-icon-security { color: rgb(57, 128, 102); }

.kyo-card-head { display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: center; }

.kyo-card-head h2 { justify-content: center; text-align: center; line-height: 1.5; }

.kyo-card-head h2:only-child { grid-column: 1 / -1; }

@media (max-width: 640px) {
.kyo-metric { padding: 18px 12px; }
.kyo-metric-label { min-height: 33px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.kyo-metric-foot { min-height: 34px; display: flex; align-items: center; justify-content: center; }
.kyo-card-head { grid-template-columns: 1fr; justify-items: center; gap: 10px; }
.kyo-card-head h2 { width: 100%; }
.kyo-page-heading h1 { gap: 8px; line-height: 1.35; }
.kyo-page-heading .kyo-title-icon .kyo-icon { width: 26px; height: 26px; }
.kyo-card-head .kyo-title-icon .kyo-icon { width: 23px; height: 23px; }
}

:root { --kyo-layout-gap: 20px; --kyo-panel-inset: 12px; --kyo-field-gap: 10px; }

.kyo-content { padding: var(--kyo-layout-gap); }

.kyo-page-heading { margin-bottom: var(--kyo-layout-gap); }

.kyo-metrics, .kyo-two-columns, .kyo-stats-grid { gap: var(--kyo-layout-gap); }
.kyo-form-grid { gap: var(--kyo-field-gap); }

.kyo-metrics, .kyo-two-columns, .kyo-stats-grid, .kyo-section-gap { margin-bottom: var(--kyo-layout-gap); }

.kyo-card-head { padding: var(--kyo-panel-inset) var(--kyo-panel-inset) 0; }

.kyo-card-head-table { padding-bottom: var(--kyo-panel-inset); }

.kyo-card-body, .kyo-metric, .kyo-dialog-head, .kyo-dialog-body { padding: var(--kyo-panel-inset); }

.kyo-card-body > .kyo-empty { padding: var(--kyo-panel-inset) 0; }

.kyo-group-top { margin-top: var(--kyo-layout-gap); }

.kyo-form-actions { padding-top: var(--kyo-panel-inset); margin-top: var(--kyo-layout-gap); }

.kyo-footer { padding-top: var(--kyo-panel-inset); margin-top: var(--kyo-layout-gap); }

.kyo-toolbar, .kyo-pagination, .kyo-audit-entry, .kyo-settings-list { padding: var(--kyo-panel-inset); }

.kyo-settings-list { gap: var(--kyo-layout-gap); }

.kyo-topbar { padding-left: var(--kyo-layout-gap); padding-right: var(--kyo-layout-gap); }

.kyo-grid-note { margin-bottom: var(--kyo-layout-gap); }

@media (max-width: 640px) {
:root { --kyo-layout-gap: 14px; --kyo-panel-inset: 10px; --kyo-field-gap: 8px; --kyo-viewport-gap: 28px; }
.kyo-card-head { gap: var(--kyo-layout-gap); }
.kyo-link-table tr { padding: var(--kyo-panel-inset); }
}

.kyo-btn { gap: 8px; }

.kyo-btn-sm { min-height: 32px; }

.kyo-nav .kyo-icon { width: 25px; height: 25px; }

.kyo-title-icon { filter: none; }

.kyo-page-heading h1 { font-weight: 650; color: rgb(32, 57, 92); letter-spacing: -0.65px; }

.kyo-page-heading p { color: rgb(113, 131, 156); }

.kyo-card-head h2 { font-size: 16px; font-weight: 600; color: rgb(41, 67, 99); }

.kyo-metric-label { font-weight: 600; color: rgb(100, 122, 151); line-height: 1.5; margin-bottom: 6px; }

.kyo-metric-value { font-weight: 650; color: rgb(35, 70, 113); line-height: 1.25; }

.kyo-metric-foot { margin-top: 6px; color: rgb(138, 153, 175); line-height: 1.6; }

.kyo-card-head { gap: var(--kyo-layout-gap); }

.kyo-create-panel .kyo-card-head { grid-template-columns: minmax(0px, 1fr) auto; }

.kyo-create-panel .kyo-card-head h2 { justify-content: flex-start; text-align: left; }

.kyo-quick { gap: var(--kyo-layout-gap); }

.kyo-quick input { background: rgb(250, 252, 255); border-color: rgb(220, 229, 242); }

.kyo-quick-foot { display: block; margin: 12px 0px 0px; line-height: 1.7; color: rgb(131, 148, 172); }

.kyo-chart-empty { height: 120px; gap: 6px; line-height: 1.7; }

.kyo-chart { height: 180px; }

.kyo-traffic-panels > .kyo-card { display: flex; flex-direction: column; }

.kyo-traffic-panels > .kyo-card > .kyo-card-body { flex: 1 1 0%; }

.kyo-traffic-panels > .kyo-card:nth-child(2) > .kyo-card-body:has(> .kyo-empty) { display: flex; align-items: center; justify-content: center; }

.kyo-traffic-panels .kyo-empty { width: 100%; line-height: 1.85; }

.kyo-actions, .kyo-pagination .kyo-actions, .kyo-form-actions { gap: 8px; }

@media (max-width: 1150px) and (min-width: 641px) {
.kyo-metrics { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.kyo-two-columns { grid-template-columns: minmax(0px, 1.5fr) minmax(240px, 1fr); }
}

@media (max-width: 640px) {
.kyo-page-heading { align-items: center; gap: var(--kyo-layout-gap); }
.kyo-page-heading h1 { font-size: 21px; letter-spacing: -0.5px; }
.kyo-page-heading .kyo-actions { flex-shrink: 0; }
.kyo-create-panel .kyo-card-head { grid-template-columns: 1fr; gap: 10px; }
.kyo-create-panel .kyo-card-head h2 { justify-content: center; text-align: center; }
.kyo-quick .kyo-btn { min-height: 44px; }
.kyo-quick-foot { text-align: center; font-size: 10px; margin-top: 10px; }
.kyo-metric-label { font-size: 11px; min-height: 0; margin-bottom: 6px; }
.kyo-metric-value { font-size: 27px; }
.kyo-metric-foot { font-size: 10px; min-height: 0; margin-top: 6px; }
.kyo-chart-empty { height: 100px; }
.kyo-chart { height: 160px; }
.kyo-traffic-panels > .kyo-card:nth-child(2) .kyo-empty { padding: var(--kyo-panel-inset) 0; }
.kyo-link-table .kyo-actions { gap: 8px; }
.kyo-dialog { max-height: calc(100dvh - var(--kyo-viewport-gap, 40px)); width: calc(100vw - var(--kyo-viewport-gap, 40px)); }
}

:root { --kyo-input-border: #d9e3ef; --kyo-input-surface: #fafcfe; --kyo-input-ink: #304765; --kyo-field-label-gap: 4px; }

input, select, textarea { font-size: 13px; line-height: 1.45; color: var(--kyo-input-ink); border-color: var(--kyo-input-border); background-color: var(--kyo-input-surface); border-radius: 8px; min-width: 0px; box-shadow: none; filter: none; transition: none; }

input:not([type="checkbox"]):not([type="radio"]), select { min-height: 40px; padding: 10px 12px; }

textarea { min-height: 88px; padding: 10px 12px; line-height: 1.65; overflow-wrap: anywhere; }

input::placeholder, textarea::placeholder { color: rgb(139, 155, 177); opacity: 1; font-weight: 400; }

.kyo-quick input { --kyo-input-border: #dce5f2; --kyo-input-surface: #fafcff; }

input:focus, select:focus, textarea:focus { border-color: var(--kyo-input-border); background-color: var(--kyo-input-surface); box-shadow: none; outline: none; }

input[readonly], textarea[readonly] { background-color: rgb(240, 243, 248); border-color: rgb(224, 230, 239); color: rgb(125, 141, 163); cursor: default; }

input[readonly]:focus, textarea[readonly]:focus { box-shadow: none; border-color: rgb(224, 230, 239); background-color: rgb(240, 243, 248); }

input:disabled, select:disabled, textarea:disabled { background-color: rgb(237, 241, 246); color: rgb(139, 152, 170); border-color: rgb(224, 230, 239); cursor: not-allowed; opacity: 0.75; }

input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: rgb(201, 121, 135); }

input:user-invalid:focus, select:user-invalid:focus, textarea:user-invalid:focus { border-color: rgb(201, 121, 135); box-shadow: none; }

select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%23758aa5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 12px 8px; background-position: right 12px center; background-repeat: no-repeat; }

.kyo-field select, .kyo-toolbar select { padding-right: 34px; }

.kyo-field label { margin-bottom: var(--kyo-field-label-gap); line-height: 1.5; color: rgb(80, 103, 131); }

.kyo-field small, .kyo-field p { margin-top: var(--kyo-field-label-gap); line-height: 1.7; color: rgb(131, 148, 170); }

.kyo-auth-form .kyo-field { margin-bottom: var(--kyo-layout-gap); }

.kyo-auth-form input:not([type="checkbox"]), .kyo-auth-form button[type="submit"] { min-height: 44px; }

.kyo-toolbar input, .kyo-toolbar select, .kyo-toolbar button[type="submit"], .kyo-date-range input { min-height: 36px; font-size: 12px; padding-top: 8px; padding-bottom: 8px; }
.kyo-date-range .kyo-btn { min-height: 36px; }

.kyo-quick input, .kyo-quick button[type="submit"] { min-height: 46px; }

.kyo-search input { padding-right: 36px; }

.kyo-search button { top: 50%; transform: translateY(-50%); right: 8px; width: 22px; height: 22px; padding: 0px; line-height: 22px; }

.kyo-check { align-items: flex-start; gap: 8px; }

.kyo-check input { margin-top: 2px; flex-shrink: 0; }

.kyo-form-error { margin-bottom: var(--kyo-layout-gap); line-height: 1.7; }

.kyo-form-actions .kyo-btn { min-height: 40px; }

.kyo-dialog-head h2 { line-height: 1.5; }

.kyo-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 29px; padding: 0px; line-height: 1; }

.kyo-sidebar { transition: none; }

@media (max-width: 640px) {
.kyo-field input:not([type="checkbox"]):not([type="radio"]), .kyo-field select { min-height: 44px; }
.kyo-form-actions .kyo-btn { min-height: 44px; }
.kyo-quick input, .kyo-quick button[type="submit"] { min-height: 44px; }
.kyo-date-range { display: grid; grid-template-columns: auto minmax(0px, 1fr) auto minmax(0px, 1fr); gap: 8px; }
.kyo-date-range input { width: 100%; font-size: 11px; padding-left: 7px; padding-right: 7px; }
.kyo-date-range button[type="submit"] { grid-column: 1 / 3; }
.kyo-dialog-body .kyo-form-grid { gap: var(--kyo-field-gap); }
}

.kyo-sidebar, .kyo-auth-story { background: var(--kyo-brand-navy); }

.kyo-avatar, .kyo-nav button.kyo-active { background: var(--kyo-action-create); }

.kyo-title-caption { display: block; min-width: 0px; }

.kyo-title-icon { transform: translateY(var(--kyo-title-ink-offset,0px)); }

.kyo-nav button { justify-content: flex-start; text-align: left; padding-left: 14px; padding-right: 14px; }

.kyo-nav-content { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; max-width: 100%; min-width: 0px; line-height: 1.5; }

.kyo-nav-content .kyo-title-caption { white-space: nowrap; text-align: left; }

.kyo-nav-content .kyo-title-icon { flex: 0 0 25px; }

.kyo-nav-content .kyo-icon { display: block; width: 25px; height: 25px; }

.kyo-nav button.kyo-active { position: relative; isolation: isolate; box-shadow: var(--kyo-button-shadow); }
.kyo-btn { position: relative; isolation: isolate; }

.kyo-nav button.kyo-active:hover { box-shadow: var(--kyo-button-hover-shadow); }

.kyo-nav button.kyo-active:active { box-shadow: var(--kyo-button-pressed-shadow); }

.kyo-link-title { white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }

.kyo-members-table td { overflow-wrap: anywhere; }