:root{
    --ct-body-bg:#17191f;
    --ct-card-bg:#1d212b;
    --ct-body-color:#dbe6f7;
    --ct-secondary-color:#91a0b7;
    --ct-border-color:rgba(148,163,184,.16);
    --ct-tertiary-bg:#242934;
    --kayan-sidebar:232px;
    --kayan-topbar:54px;
    --kayan-primary:#7c6cff;
    --kayan-cyan:#22d3ee;
    --kayan-green:#22c55e;
    --kayan-red:#ef4444;
    --kayan-orange:#f97316;
}
*{box-sizing:border-box}
html,body{min-height:100%;scrollbar-color:#51586a #16191f}
body{
    margin:0;
    font-family:'Tajawal',Cairo,system-ui,-apple-system,"Segoe UI",sans-serif;
    color:var(--ct-body-color);
    background:#17191f;
    font-size:13px;
    font-weight:600;
    overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at 15% 15%,rgba(34,211,238,.055),transparent 28%),
        radial-gradient(circle at 82% 7%,rgba(124,108,255,.075),transparent 30%),
        linear-gradient(180deg,#15171d 0%,#17191f 100%);
    pointer-events:none;
    z-index:-1;
}

/* ===== Original-like dashboard wrapper ===== */
.kayan-wrapper{min-height:100vh;direction:rtl}
.app-topbar{
    position:fixed;top:0;right:0;left:0;height:var(--kayan-topbar);z-index:1040;
    background:#2a2e3a;border-bottom:1px solid rgba(148,163,184,.18);
    box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.topbar-menu{height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px 0 calc(var(--kayan-sidebar) + 18px)}
.kayan-topbar-start,.kayan-topbar-actions{display:flex;align-items:center;gap:10px}
.topbar-icon{
    width:32px;height:32px;border:1px solid rgba(148,163,184,.18);border-radius:7px;background:#252934;color:#aab7cc;
    display:inline-flex;align-items:center;justify-content:center;transition:.15s ease;padding:0;
}
.topbar-icon:hover{color:#fff;border-color:rgba(124,108,255,.40);background:#2e3341}
.topbar-icon svg{width:16px;height:16px}
.avatar-circle{
    width:31px;height:31px;border-radius:50%;background:linear-gradient(135deg,#4f8cff,#6d5dfc);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:900;
    box-shadow:0 6px 18px rgba(79,140,255,.22)
}
.notification-dot{position:relative;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;color:#aeb8c9}
.notification-dot svg{width:17px;height:17px}.notification-dot span{position:absolute;top:1px;left:1px;min-width:15px;height:15px;border-radius:20px;background:#e43f5a;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:900}
.language-pill{height:31px;border:1px solid rgba(148,163,184,.16);border-radius:8px;background:#252934;color:#dbe6f7;display:inline-flex;align-items:center;gap:6px;padding:0 8px;font-weight:800}
.language-pill img{width:18px;height:18px;border-radius:50%;object-fit:cover}.language-pill svg{width:13px;height:13px;color:#8b94aa}
.app-search{height:31px;min-width:240px;border:1px solid rgba(148,163,184,.28);border-radius:6px;background:#222733;display:flex;align-items:center;gap:8px;padding:0 10px;color:#8d9bb0}
.app-search svg{width:15px;height:15px;flex:0 0 auto}.app-search input{border:0;outline:0;background:transparent;color:#dbe6f7;width:100%;font-weight:700;font-size:12px}.app-search input::placeholder{color:#7f8da3}

.sidenav-menu{
    position:fixed;top:0;right:0;bottom:0;width:var(--kayan-sidebar);z-index:1050;background:#252934;border-left:1px solid rgba(148,163,184,.14);
    box-shadow:-6px 0 20px rgba(0,0,0,.16);display:flex;flex-direction:column;
}
.logo{height:var(--kayan-topbar);display:flex;align-items:center;padding:0 18px;border-bottom:1px solid rgba(148,163,184,.12);direction:ltr}
.kayan-logo-composite{display:inline-flex;align-items:center;gap:8px;font-weight:950;color:#fff}.kayan-logo-icon{width:28px;height:28px;object-fit:contain}.kayan-logo-text{font-size:15px;letter-spacing:.2px}
.sidebar-scroll{overflow:auto;padding:12px 0 20px;scrollbar-width:thin;flex:1}
.side-nav{list-style:none;margin:0;padding:0 8px}.side-nav-title{color:#8b96a8;font-size:10px;font-weight:900;padding:10px 14px 6px;text-transform:uppercase}
.side-nav-item{margin:2px 0}.side-nav-link{min-height:36px;border-radius:10px;display:flex;align-items:center;gap:9px;padding:8px 11px;color:#b7c1d3;font-size:12px;font-weight:700;transition:.14s ease;white-space:nowrap}
.side-nav-link:hover{background:rgba(124,108,255,.09);color:#fff}.side-nav-link.active{background:rgba(124,108,255,.13);color:#fff}
.menu-icon,.kayan-tool-child-icon{width:26px;height:26px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:rgba(124,108,255,.11);color:#8b7cff;flex:0 0 26px}
.menu-icon svg,.kayan-tool-child-icon svg{width:15px;height:15px}.side-nav-link.active .menu-icon,.side-nav-link.active .kayan-tool-child-icon,.side-nav-link:hover .menu-icon,.side-nav-link:hover .kayan-tool-child-icon{background:rgba(124,108,255,.24);color:#a89cff}
.menu-text{overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.content-page{min-height:100vh;margin-right:var(--kayan-sidebar);padding-top:calc(var(--kayan-topbar) + 24px);background:#17191f;transition:.18s ease}
.kayan-page-container{padding:0 18px 54px;max-width:none;width:100%}.page-title-box{min-height:36px;display:flex;align-items:center;justify-content:flex-end;margin-bottom:18px}.page-title-box h4{font-weight:900;margin:0;color:#dbe6f7;font-size:15px}
.footer{height:38px;border-top:1px solid rgba(148,163,184,.12);background:#191c24;color:#94a3b8;display:flex;align-items:center;justify-content:center;font-size:11px;position:relative}

body.sidebar-collapsed{--kayan-sidebar:74px}body.sidebar-collapsed .menu-text,body.sidebar-collapsed .side-nav-title,body.sidebar-collapsed .kayan-logo-text{display:none}body.sidebar-collapsed .side-nav-link{justify-content:center;padding-inline:0}body.sidebar-collapsed .logo{justify-content:center;padding:0}

/* ===== index dashboard cards ===== */
.system-hero{border:1px solid rgba(34,211,238,.18);border-radius:16px;background:linear-gradient(135deg,rgba(17,84,69,.45),rgba(20,46,73,.75),rgba(54,47,112,.52));padding:22px;margin-bottom:18px;box-shadow:0 14px 36px rgba(0,0,0,.18);position:relative;overflow:hidden}
.system-hero::after{content:"";position:absolute;inset:-25% auto auto -8%;width:320px;height:320px;border-radius:999px;background:rgba(124,108,255,.12);filter:blur(8px)}
.system-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;position:relative;z-index:1}.system-hero-text{text-align:right}.system-hero h3{font-size:25px;font-weight:950;margin:0 0 8px;color:#f4f8ff}.system-hero p{max-width:920px;margin:0;color:#98a9bf;line-height:1.9;font-weight:700}
.system-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(124,108,255,.35);background:rgba(124,108,255,.14);color:#c7bfff;border-radius:999px;padding:8px 13px;font-weight:900;white-space:nowrap}.system-pill svg{width:15px;height:15px}
.system-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px;position:relative;z-index:1}.system-stat{min-height:64px;border:1px solid rgba(148,163,184,.14);border-radius:13px;background:rgba(15,23,42,.18);padding:11px 14px;display:flex;align-items:center;gap:12px}.system-stat>span{width:32px;height:32px;border-radius:10px;background:rgba(124,108,255,.18);display:inline-flex;align-items:center;justify-content:center;color:#8b7cff}.system-stat svg{width:16px;height:16px}.system-stat strong{display:block;font-size:20px;line-height:1;font-weight:950;color:#8b7cff}.system-stat small{font-weight:800;color:#9eabc0}
.tools-filter-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end;margin:0 0 16px}.tools-filter-bar button{border:1px solid rgba(148,163,184,.18);background:#20242e;color:#b8c2d2;border-radius:999px;padding:8px 13px;font-weight:900;line-height:1}.tools-filter-bar button.active,.tools-filter-bar button:hover{color:#fff;background:rgba(124,108,255,.18);border-color:rgba(124,108,255,.36)}
.system-tools-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.system-tool-card{min-height:172px;border:1px solid rgba(34,211,238,.22);border-radius:14px;background:linear-gradient(145deg,rgba(29,33,43,.96),rgba(23,26,34,.98));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;position:relative;overflow:hidden;box-shadow:0 14px 32px rgba(0,0,0,.16);transition:.16s ease}.system-tool-card::before{content:"";position:absolute;inset:-35% -15% auto auto;width:220px;height:220px;border-radius:999px;background:var(--tile-glow,rgba(34,211,238,.18));filter:blur(10px)}.system-tool-card:hover{transform:translateY(-3px);border-color:var(--tile-border,rgba(34,211,238,.48));box-shadow:0 22px 52px rgba(0,0,0,.26)}.system-tool-icon{width:48px;height:48px;border-radius:16px;background:var(--tile-icon,rgba(34,211,238,.13));display:flex;align-items:center;justify-content:center;color:var(--tile-color,#22d3ee);box-shadow:0 12px 32px var(--tile-glow,rgba(34,211,238,.18));position:relative;z-index:1}.system-tool-icon svg{width:23px;height:23px}.system-tool-category{font-size:11px;font-weight:900;color:var(--tile-color,#22d3ee);margin-top:10px;position:relative;z-index:1}.system-tool-card h4{font-size:19px;font-weight:950;margin:6px 0;color:#eef5ff;position:relative;z-index:1}.system-tool-card p{color:#99a7ba;font-size:12px;line-height:1.8;min-height:42px;margin:0 0 12px;position:relative;z-index:1}.open-tool-btn{border:1px solid var(--tile-border,rgba(34,211,238,.32));background:rgba(15,23,42,.25);border-radius:999px;padding:7px 14px;display:inline-flex;align-items:center;gap:7px;color:#e5eefb;font-weight:900;font-size:12px;position:relative;z-index:1}.open-tool-btn svg{width:14px;height:14px}
.tone-blue{--tile-color:#22d3ee;--tile-icon:rgba(34,211,238,.15);--tile-glow:rgba(34,211,238,.18);--tile-border:rgba(34,211,238,.44)}.tone-green{--tile-color:#24e3a0;--tile-icon:rgba(36,227,160,.14);--tile-glow:rgba(36,227,160,.18);--tile-border:rgba(36,227,160,.42)}.tone-red{--tile-color:#ff5d66;--tile-icon:rgba(239,68,68,.15);--tile-glow:rgba(239,68,68,.18);--tile-border:rgba(239,68,68,.40)}.tone-cyan{--tile-color:#22d3ee;--tile-icon:rgba(34,211,238,.15);--tile-glow:rgba(34,211,238,.18);--tile-border:rgba(34,211,238,.40)}.tone-purple,.tone-programming{--tile-color:#a997ff;--tile-icon:rgba(124,108,255,.16);--tile-glow:rgba(124,108,255,.20);--tile-border:rgba(124,108,255,.42)}.tone-orange{--tile-color:#fb923c;--tile-icon:rgba(249,115,22,.15);--tile-glow:rgba(249,115,22,.18);--tile-border:rgba(249,115,22,.38)}.tone-teal{--tile-color:#2dd4bf;--tile-icon:rgba(45,212,191,.15);--tile-glow:rgba(45,212,191,.18);--tile-border:rgba(45,212,191,.38)}
.system-note{border:1px solid rgba(34,197,94,.16);background:rgba(34,197,94,.10);color:#9ee7c4;border-radius:11px;padding:12px 15px;margin-top:16px;display:flex;align-items:center;gap:8px;font-weight:800}.system-note svg{width:16px;height:16px}

/* ===== Bootstrap / system variables ===== */
.card,.modal-content{background:#1d212b!important;color:#dbe6f7;border-color:rgba(148,163,184,.16)!important}.card-header,.card-footer{background:#242934!important;border-color:rgba(148,163,184,.13)!important}.card-title{color:#dbe6f7;font-weight:900}.form-control,.form-select,textarea,input,select{font-family:inherit}.form-control,.form-select{background:#171b25!important;border-color:rgba(148,163,184,.22)!important;color:#e7eefb!important}.form-control:focus,.form-select:focus{box-shadow:0 0 0 .2rem rgba(34,211,238,.10)!important;border-color:rgba(34,211,238,.45)!important}.form-control::placeholder{color:#6f7d93!important}.form-select option{background:#1d212b;color:#e7eefb}.input-group-text{background:#303542!important;border-color:rgba(148,163,184,.18)!important;color:#dbe6f7!important;font-weight:900}.btn{font-weight:900}.btn-light{background:#313645!important;border-color:#3b4152!important;color:#e8eef9!important}.btn-outline-secondary{color:#cbd5e1!important;border-color:rgba(148,163,184,.24)!important}.btn-outline-secondary:hover{background:#313645!important}

/* ===== Tool pages: keep original logic, improve shell to match screenshots ===== */
.kayan-tool-shell,.mtk-tool,.speed-tool-page,.block-tool-page,.qos-tool-page,.guard-tool-page,.ttl-tool-page,.mac-tool-page,.kids-tool-page,.ping-tool-page,.loop-tool-page,.cloak-tool-page,.ultimate-tool-page,.dhcp-tool-page,.trap-tool-page,.adblock-tool-page,.streaming-tool-page,.youtube-tool-page,.remote-tool-page,.factory-tool-page{margin-bottom:30px!important}
.tool-hero,.mtk-hero,.speed-hero,.block-hero,.qos-hero,.guard-hero,.ttl-hero,.mac-hero,.kids-hero,.ping-hero,.loop-hero,.cloak-hero,.ultimate-hero,.dhcp-hero,.trap-hero,.adblock-hero,.streaming-hero,.youtube-hero,.remote-hero,.factory-hero{
    border:1px solid rgba(34,211,238,.16)!important;border-radius:14px!important;padding:22px!important;background:linear-gradient(135deg,rgba(18,84,66,.55),rgba(16,47,69,.72),rgba(45,45,95,.35))!important;box-shadow:0 14px 36px rgba(0,0,0,.14)!important;
}
.tool-hero h1,.tool-hero h2,.tool-hero h3,.tool-hero h4,.mtk-hero h2,.mtk-hero h3,.mtk-hero h4,.speed-hero h3,.block-hero h3,.qos-hero h3{color:#edf5ff!important;font-weight:950!important}.tool-hero p,.mtk-hero p,.speed-hero p,.block-hero p,.qos-hero p{color:#9fb0c7!important;font-weight:700!important}
.tool-card,.mtk-card,.speed-section,.block-section,.qos-section,.guard-section,.ttl-section,.mac-section,.kids-section,.ping-section,.loop-section,.cloak-section,.ultimate-section,.dhcp-section,.trap-section,.adblock-section,.streaming-section,.youtube-section,.remote-section,.factory-section{
    background:#1d212b!important;border:1px solid rgba(148,163,184,.16)!important;border-radius:13px!important;box-shadow:0 12px 28px rgba(0,0,0,.12)!important;overflow:hidden!important;
}
.tool-card .card-header,.mtk-head,.speed-section-head,.block-section-head,.qos-section-head,.guard-section-head,.ttl-section-head,.mac-section-head,.kids-section-head,.ping-section-head,.loop-section-head,.cloak-section-head,.ultimate-section-head,.dhcp-section-head,.trap-section-head,.adblock-section-head,.streaming-section-head,.youtube-section-head,.remote-section-head,.factory-section-head{
    background:#292e3a!important;border-bottom:1px solid rgba(148,163,184,.14)!important;color:#dbe6f7!important;min-height:42px;font-weight:950!important;
}
.script-output,.mtk-result,.speed-result,.block-result,.qos-result,.guard-result,.ttl-result,.mac-result,.kids-result,.ping-result,.loop-result,.cloak-result,.ultimate-result,.dhcp-result,.trap-result,.adblock-result,.streaming-result,.youtube-result,.remote-result,.factory-result{
    background:#111722!important;color:#d7fff5!important;border-color:rgba(34,211,238,.20)!important;border-radius:14px!important;
}
.tool-result-empty,.mtk-placeholder,.speed-placeholder,.block-placeholder,.qos-placeholder,.guard-placeholder,.ttl-placeholder,.mac-placeholder,.kids-placeholder,.ping-placeholder,.loop-placeholder,.cloak-placeholder,.ultimate-placeholder,.dhcp-placeholder,.trap-placeholder,.adblock-placeholder,.streaming-placeholder,.youtube-placeholder,.remote-placeholder,.factory-placeholder{
    background:#17202c!important;border-color:rgba(148,163,184,.18)!important;color:#8fa0b8!important;border-radius:13px!important;
}
.secure-pill,.speed-hero-badge,.system-generated-pill{background:rgba(34,197,94,.12)!important;color:#22c55e!important;border-color:rgba(34,197,94,.24)!important}.kayan-tabs .nav-link{background:transparent!important;color:#aeb9ca!important}.kayan-tabs .nav-link.active{background:#16a34a!important;color:#fff!important;box-shadow:0 12px 24px rgba(22,163,74,.22)!important}.tool-action-buttons{justify-content:flex-start!important}.btn-generate-green,.speed-main-btn,.mtk-btn{background:linear-gradient(135deg,#19b85f,#22d48d)!important;color:#fff!important;box-shadow:0 14px 30px rgba(34,197,94,.24)!important}

/* Some original pages use light/dark toggled classes. Force dark-compatible look by default. */
[data-bs-theme="dark"] .block-tool-page,[data-bs-theme="dark"] .qos-tool-page,[data-bs-theme="dark"] .guard-tool-page,[data-bs-theme="dark"] .ttl-tool-page,[data-bs-theme="dark"] .mac-tool-page{color:#dbe6f7}

/* Toast */
.toast-host{position:fixed;top:70px;left:22px;z-index:2000;display:grid;gap:10px;width:min(360px,calc(100vw - 32px))}.mini-toast{transform:translateX(-18px);opacity:0;transition:.22s ease;border:1px solid rgba(148,163,184,.18);border-radius:14px;background:rgba(26,31,43,.96);box-shadow:0 18px 60px rgba(0,0,0,.28);padding:13px 15px;display:grid;gap:4px}.mini-toast.show{transform:translateX(0);opacity:1}.mini-toast b{color:#fff}.mini-toast span{color:#aebcd0}.mini-toast.success{border-color:rgba(34,197,94,.28)}.mini-toast.error{border-color:rgba(239,68,68,.36)}

/* Utility */
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#4e5566;border-radius:20px;border:2px solid #191d26}::-webkit-scrollbar-track{background:#17191f}

@media(max-width:1500px){.system-tools-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1199px){:root{--kayan-sidebar:0px}.sidenav-menu{transform:translateX(100%);transition:.18s ease}.sidebar-collapsed .sidenav-menu,.sidenav-menu.is-open{transform:translateX(0)}.topbar-menu{padding:0 14px}.content-page{margin-right:0}.system-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-search{min-width:180px}}
@media(max-width:767px){.system-tools-grid,.system-stats{grid-template-columns:1fr}.kayan-page-container{padding-inline:12px}.system-hero{padding:17px}.system-hero-top{flex-direction:column}.app-search{display:none}.tools-filter-bar{justify-content:flex-start}.content-page{padding-top:calc(var(--kayan-topbar) + 14px)}.page-title-box{margin-bottom:12px}.toast-host{left:12px;top:66px}.tool-action-buttons{justify-content:center!important}.tool-action-buttons .btn{min-width:0!important;width:100%}}