/* =====================================================================
 * 金点网络工具箱 · 科技风主题 (tech theme)
 * 深色霓虹 / 赛博朋克风格
 * 开发者: jamin
 * 说明: 本文件覆盖 DashLite/Bootstrap 的视觉,不改动 HTML 结构与类名。
 *       仅在 view/index/tech/ 模板中加载,不影响 default 模板。
 * ===================================================================== */

:root {
    --tech-bg:        #070a14;   /* 主背景 深空蓝黑 */
    --tech-bg-2:      #0b1020;   /* 次级背景 */
    --tech-bg-3:      #111827;
    --tech-card:      rgba(20, 28, 48, 0.55);  /* 玻璃卡片 */
    --tech-card-solid:#101728;
    --tech-border:    rgba(0, 240, 255, 0.18); /* 青色边框 */
    --tech-border-2:  rgba(124, 58, 237, 0.25);/* 紫色边框 */
    --tech-cyan:      #00f0ff;   /* 主霓虹青 */
    --tech-purple:    #7c3aed;   /* 霓虹紫 */
    --tech-pink:      #ff2d95;   /* 点缀粉 */
    --tech-text:      #d6e4ff;   /* 正文 */
    --tech-text-soft: #8a9bc4;   /* 次要文字 */
    --tech-text-dim:  #5a6b94;   /* 暗淡文字 */
    --tech-glow-cyan: 0 0 8px rgba(0,240,255,.55), 0 0 18px rgba(0,240,255,.25);
    --tech-glow-purple: 0 0 8px rgba(124,58,237,.55), 0 0 20px rgba(124,58,237,.3);
}

/* ----------- 全局背景:深空 + 动态网格 + 光晕 ----------- */
html, body, body.nk-body, body.bg-lighter {
    background: var(--tech-bg) !important;
    color: var(--tech-text) !important;
}

.nk-wrap,
.nk-content,
.nk-content-body,
.nk-block,
.nk-block-head,
.container,
.container-xl {
    color: var(--tech-text);
}

body::before {
    /* 静态径向光晕 */
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(820px circle at 12% 8%,  rgba(0,240,255,.10), transparent 45%),
        radial-gradient(760px circle at 88% 0%,  rgba(124,58,237,.14), transparent 45%),
        radial-gradient(900px circle at 50% 110%,rgba(255,45,149,.06), transparent 50%);
    pointer-events: none;
}

body::after {
    /* 网格线 */
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(0,240,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,240,255,.045) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, #000 40%, transparent 100%);
    pointer-events: none;
}

/* 粒子画布容器(由 tech.js 注入) */
#tech-particles {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* ----------- 顶部导航栏 ----------- */
.nk-header, .nk-header.is-light {
    background: rgba(7, 10, 20, 0.72) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--tech-border);
    box-shadow: 0 1px 0 rgba(0,240,255,.08), 0 8px 30px rgba(0,0,0,.45);
}

.nk-header-brand .logo-link,
.logo-link.text-base {
    color: #fff !important;
    font-weight: 800;
    letter-spacing: 0;
    background: linear-gradient(90deg, var(--tech-cyan), var(--tech-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 6px rgba(0,240,255,.35));
}
.nk-header-brand .logo-link img { filter: drop-shadow(0 0 6px rgba(0,240,255,.5)); }

.nk-menu-main .nk-menu-link { color: var(--tech-text-soft) !important; transition: .25s; }
.nk-menu-main .nk-menu-link:hover { color: var(--tech-cyan) !important; }
.nk-menu-main .nk-menu-item.active .nk-menu-link {
    color: var(--tech-cyan) !important;
    text-shadow: var(--tech-glow-cyan);
}
.nk-menu-main .nk-menu-item.active .nk-menu-link .icon { color: var(--tech-cyan) !important; }

.nk-header-mobile {
    background: var(--tech-card-solid) !important;
    border-bottom: 1px solid var(--tech-border);
}

.nk-menu-trigger .icon,
.nk-quick-nav .icon, .dark-switch .icon { color: var(--tech-text-soft) !important; }
.nk-quick-nav .dropdown-toggle:hover .icon { color: var(--tech-cyan) !important; }

.theme-switch {
    border: 1px solid var(--tech-border);
    background: rgba(0,240,255,.06);
    color: var(--tech-cyan);
}

.theme-switch:hover {
    border-color: rgba(0,240,255,.65);
    box-shadow: var(--tech-glow-cyan);
}

.header-login-btn {
    border: 1px solid rgba(0,240,255,.35) !important;
    background: linear-gradient(135deg, var(--tech-cyan) 0%, #78ffd6 100%) !important;
    color: #04121a !important;
    box-shadow: 0 0 18px rgba(0,240,255,.24) !important;
}

/* ----------- 卡片:玻璃拟态 + 发光边框 ----------- */
.card, .card-preview, .card.card-preview,
.dropdown-menu, .modal-content, .popover, .toast, .toastr {
    background: var(--tech-card) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--tech-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
    color: var(--tech-text) !important;
}
.card-inner,
.card-body,
.card-footer,
.dropdown-inner,
.dropdown-head,
.modal-header,
.modal-body,
.modal-footer {
    color: var(--tech-text) !important;
}

.card-header, .card-header.bg-white,
.modal-header,
.modal-footer {
    background: transparent !important;
    border-bottom: 1px solid var(--tech-border) !important;
    color: var(--tech-text) !important;
}

.bg-white, .bg-lighter, .bg-light, .bg-gray, .bg-lighter {
    background-color: transparent !important;
}

.bg-purple, .bg-info, .bg-primary {
    box-shadow: 0 0 0 2px rgba(0,240,255,.18), 0 0 18px rgba(0,240,255,.16);
}

/* 工具分组卡片 hover 时整卡发光 */
.category-card { transition: box-shadow .35s, transform .35s, border-color .35s; }
.category-card:hover {
    border-color: rgba(0,240,255,.5) !important;
    box-shadow: 0 0 0 1px rgba(0,240,255,.25), 0 12px 40px rgba(0,240,255,.12), 0 8px 30px rgba(0,0,0,.5);
}

/* 分组标题 */
.nya-title {
    color: var(--tech-text) !important;
    border-left: 3px solid var(--tech-cyan);
    padding-left: 12px !important;
    margin-bottom: 6px;
}
.nya-title .icon, .nya-title em { color: var(--tech-cyan) !important; filter: drop-shadow(0 0 5px rgba(0,240,255,.5)); }
.nya-title .nk-menu-text { background: linear-gradient(90deg,#fff,var(--tech-cyan)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ----------- 工具按钮(核心:每个工具的入口) ----------- */
.btn-outline-light.tool-link,
a.tool-link {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid var(--tech-border) !important;
    color: var(--tech-text-soft) !important;
    border-radius: 8px !important;
    font-weight: 500;
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
}
a.tool-link::before {
    content: "";
    position: absolute;
    left: -60%;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(0,240,255,.18), transparent);
    transform: skewX(-20deg);
    transition: left .55s ease;
}
a.tool-link:hover {
    color: #fff !important;
    border-color: rgba(0,240,255,.65) !important;
    background: rgba(0,240,255,.08) !important;
    box-shadow: var(--tech-glow-cyan);
    transform: translateY(-2px);
}
a.tool-link:hover::before { left: 130%; }

/* ----------- 分类导航(面包屑切换) ----------- */
.breadcrumb-pipe .breadcrumb-item a { color: var(--tech-text-soft) !important; transition:.25s; }
.breadcrumb-pipe .breadcrumb-item a:hover { color: var(--tech-cyan) !important; }
.breadcrumb-pipe .breadcrumb-item.active a {
    color: var(--tech-cyan) !important;
    text-shadow: var(--tech-glow-cyan);
    font-weight: 700;
}
.breadcrumb-pipe .breadcrumb-item + .breadcrumb-item::before { color: var(--tech-text-dim); }

/* ----------- 首页搜索框 ----------- */
.bannerbg { background: transparent !important; }
.bannerbg[style] { background-image: none !important; }

/* ----------- 首页 Hero 标题区 ----------- */
.tech-hero { padding-top: 3.5rem !important; }
.tech-hero-inner { margin-bottom: 1.8rem; }
.tech-hero-title {
    font-size: clamp(2rem, 5vw, 3.4rem) !important;
    font-weight: 900;
    letter-spacing: 0;
    margin: 0 0 .5rem;
    background: linear-gradient(92deg, var(--tech-cyan) 0%, #6ea8ff 45%, var(--tech-purple) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 18px rgba(0,240,255,.35));
    animation: tech-title-glow 3.5s ease-in-out infinite alternate;
}
@keyframes tech-title-glow {
    from { filter: drop-shadow(0 0 12px rgba(0,240,255,.25)); }
    to   { filter: drop-shadow(0 0 26px rgba(124,58,237,.5)); }
}
.tech-hero-sub {
    color: var(--tech-text-soft) !important;
    font-size: clamp(.9rem, 2vw, 1.1rem);
    letter-spacing: 0;
    margin: 0;
}

.form-control-lx, input.form-control-lx {
    background: rgba(11,16,32,.7) !important;
    border: 1px solid var(--tech-border) !important;
    color: var(--tech-text) !important;
    border-radius: 40px !important;
    height: 56px;
    box-shadow: 0 0 0 0 rgba(0,240,255,0), 0 10px 30px rgba(0,0,0,.4);
    transition: box-shadow .3s, border-color .3s;
}
.form-control-lx:focus {
    border-color: rgba(0,240,255,.6) !important;
    box-shadow: 0 0 0 3px rgba(0,240,255,.12), var(--tech-glow-cyan);
}
.form-control-lx::placeholder { color: var(--tech-text-dim) !important; }
.form-text-hint-lx .overline-title .icon { color: var(--tech-cyan) !important; }

/* ----------- 通用表单控件 ----------- */
.form-control, textarea.form-control, select.form-control {
    background: rgba(11,16,32,.6) !important;
    border: 1px solid var(--tech-border) !important;
    color: var(--tech-text) !important;
    border-radius: 8px !important;
}
.form-control:disabled,
.form-control[readonly] {
    background: rgba(17,24,39,.5) !important;
    color: var(--tech-text-dim) !important;
}
.form-control:focus {
    border-color: rgba(0,240,255,.5) !important;
    box-shadow: 0 0 0 3px rgba(0,240,255,.1) !important;
    background: rgba(11,16,32,.8) !important;
}
.form-control::placeholder { color: var(--tech-text-dim) !important; }
.form-label, label.form-label, .form-note, .form-text-hint, .form-text-hint-lx {
    color: var(--tech-text-soft) !important;
}

.form-text-hint-lx {
    background: rgba(11,16,32,.72) !important;
}

.custom-control-label,
.custom-control-label::before,
.custom-control-label::after {
    color: var(--tech-text-soft) !important;
}

/* ----------- 按钮统一风格 ----------- */
.btn-primary {
    background: linear-gradient(120deg, var(--tech-cyan), var(--tech-purple)) !important;
    border: none !important;
    color: #04121a !important;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(0,240,255,.25);
    transition: filter .25s, transform .25s, box-shadow .25s;
}
.btn-primary:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 8px 26px rgba(0,240,255,.4); }
.btn-success { background: linear-gradient(120deg,#10d39e,#0aa37c)!important; border:none!important; color:#04121a!important; font-weight:700; }
.btn-info    { background: linear-gradient(120deg,#3aa0ff,#7c3aed)!important; border:none!important; color:#fff!important; }
.btn-outline-info { border-color: var(--tech-border)!important; color: var(--tech-text-soft)!important; background:transparent!important; }
.btn-outline-info:hover { border-color: rgba(0,240,255,.6)!important; color: var(--tech-cyan)!important; box-shadow: var(--tech-glow-cyan); }
.btn-outline-light { border-color: var(--tech-border)!important; color: var(--tech-text-soft)!important; }
.btn-outline-light:hover { border-color: rgba(0,240,255,.5)!important; color:#fff!important; background: rgba(0,240,255,.06)!important; }
.btn-outline-danger { border-color: rgba(255,45,149,.5)!important; color: var(--tech-pink)!important; }
.btn-outline-danger:hover { background: rgba(255,45,149,.12)!important; color:#fff!important; box-shadow: 0 0 8px rgba(255,45,149,.5); }
.btn-dim.btn-danger { background: rgba(255,45,149,.12)!important; color: var(--tech-pink)!important; border-color: rgba(255,45,149,.35)!important; }
.btn-light, .btn-white { background: rgba(255,255,255,.05)!important; border-color: var(--tech-border)!important; color: var(--tech-text)!important; }
.btn-link { color: var(--tech-cyan)!important; }

/* ----------- 文字颜色修正 ----------- */
h1,h2,h3,h4,h5,h6 { color: var(--tech-text) !important; }
p, span, li, div, td, th { color: inherit; }
.lead-text, .sub-text, .text-base { color: var(--tech-text) !important; }
.text-muted, .text-soft, .sub-text, .overline-title, .caption-text { color: var(--tech-text-dim) !important; }
a { color: var(--tech-cyan); }
a:hover { color: #fff; }
.search-placeholder { color: var(--tech-text-dim) !important; }

/* ----------- 下拉菜单 / 用户菜单 ----------- */
.dropdown-menu {
    background: rgba(12, 18, 32, .94) !important;
    border: 1px solid var(--tech-border) !important;
}

.dropdown-menu-s1 {
    box-shadow: 0 16px 42px rgba(0,0,0,.55), 0 0 22px rgba(0,240,255,.08) !important;
}

.user-card-wrap,
.user-card,
.link-list,
.link-list li,
.link-list a {
    color: var(--tech-text) !important;
}

.link-list a,
.dropdown-menu .nk-menu-link,
.dropdown-menu .dropdown-item {
    color: var(--tech-text-soft) !important;
}

.link-list a:hover,
.dropdown-menu .nk-menu-link:hover,
.dropdown-menu .dropdown-item:hover {
    background: rgba(0,240,255,.08) !important;
    color: var(--tech-cyan) !important;
}

.dropdown-indicator::after {
    color: var(--tech-text-soft) !important;
}

/* ----------- 表格 / 列表 / 边框 ----------- */
.table,
.table th,
.table td,
.list-group,
.list-group-item,
.nk-tb-list,
.nk-tb-item,
.nk-tb-col {
    color: var(--tech-text) !important;
    border-color: var(--tech-border) !important;
}

.table thead th,
.nk-tb-head {
    background: rgba(0,240,255,.06) !important;
    color: var(--tech-text-soft) !important;
}

.table-striped tbody tr:nth-of-type(odd),
.list-group-item,
.nk-tb-item {
    background: rgba(255,255,255,.025) !important;
}

.table-hover tbody tr:hover,
.list-group-item:hover,
.nk-tb-item:hover {
    background: rgba(0,240,255,.07) !important;
}

.border,
.border-top,
.border-bottom,
.border-left,
.border-right {
    border-color: var(--tech-border) !important;
}

hr {
    border-color: var(--tech-border) !important;
}

/* ----------- 提示 / 弹层 ----------- */
.alert {
    background: rgba(0,240,255,.06) !important;
    border: 1px solid var(--tech-border) !important;
    color: var(--tech-text) !important;
}

.alert-danger {
    background: rgba(255,45,149,.08) !important;
    border-color: rgba(255,45,149,.35) !important;
}

.alert-warning {
    background: rgba(245,158,11,.08) !important;
    border-color: rgba(245,158,11,.35) !important;
}

.modal-backdrop.show {
    opacity: .72;
}

.close {
    color: var(--tech-text-soft) !important;
    text-shadow: none !important;
}

/* ----------- 登录页 / OAuth 按钮 ----------- */
.loginbtn {
    width: 44px;
    height: 44px;
    padding: 8px;
    margin: 0 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--tech-border);
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.auth-login-wrap {
    padding-top: 16vh;
}

.auth-login-card {
    box-shadow: 0 18px 60px rgba(0,0,0,.45), 0 0 32px rgba(0,240,255,.1) !important;
}

.auth-login-head .icon {
    background: rgba(0,240,255,.08) !important;
    border: 1px solid var(--tech-border);
    color: var(--tech-cyan) !important;
    box-shadow: var(--tech-glow-cyan);
}

.auth-tabs {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--tech-border);
}

.auth-tab {
    color: var(--tech-text-soft);
}

.auth-tab.active {
    background: rgba(0,240,255,.1);
    color: #fff;
    box-shadow: var(--tech-glow-cyan);
}

.auth-account-form .form-label {
    color: var(--tech-text);
}

.auth-account-form .form-control {
    background: rgba(8, 13, 30, .78) !important;
    border-color: var(--tech-border) !important;
    color: var(--tech-text) !important;
}

.auth-account-form .form-control::placeholder {
    color: rgba(148,163,184,.72);
}

.auth-login-icons {
    border-top-color: var(--tech-border);
}

.auth-provider-icon {
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
}

.auth-provider-icon:hover {
    border-color: rgba(0,240,255,.7);
    box-shadow: var(--tech-glow-cyan);
}

.agent-login-panel {
    border-top-color: var(--tech-border);
}

.agent-login-btn {
    justify-content: center;
}

.loginbtn:hover {
    transform: translateY(-2px);
    border-color: rgba(0,240,255,.7);
    box-shadow: var(--tech-glow-cyan);
}

.btn-outline-primary {
    background: rgba(0,240,255,.04) !important;
    border-color: var(--tech-border) !important;
    color: var(--tech-cyan) !important;
}

.btn-outline-primary:hover {
    background: rgba(0,240,255,.12) !important;
    color: #fff !important;
}

/* ----------- 工具页通用内容 ----------- */
pre,
code,
.prettyprint,
.CodeMirror,
.ace_editor {
    background: rgba(6, 10, 22, .82) !important;
    color: var(--tech-text) !important;
    border-color: var(--tech-border) !important;
}

iframe {
    background: var(--tech-bg);
}

/* ----------- 友情链接区 ----------- */
#link_content .preview-item .btn { font-size: 13px; }

/* ----------- 留言/回复 ----------- */
.nk-reply-item { border-bottom: 1px solid var(--tech-border); padding: 14px 0; }
.nk-reply-entry.note { background: rgba(0,240,255,.06) !important; border-radius: 8px; border:1px solid var(--tech-border); }
.user-name { color: var(--tech-text) !important; }
.date-time { color: var(--tech-text-dim) !important; }

/* ----------- 分页 ----------- */
.pagination .page-link {
    background: rgba(11,16,32,.6) !important;
    border: 1px solid var(--tech-border) !important;
    color: var(--tech-text-soft) !important;
}
.pagination .page-item.active .page-link {
    background: linear-gradient(120deg,var(--tech-cyan),var(--tech-purple)) !important;
    border-color: transparent !important;
    color: #04121a !important;
}
.pagination .page-item.disabled .page-link { opacity:.4; }

/* ----------- 页脚 ----------- */
.nk-footer, .nk-footer.bg-lighter {
    background: rgba(7,10,20,.6) !important;
    border-top: 1px solid var(--tech-border);
    backdrop-filter: blur(10px);
}
.nk-footer-copyright { color: var(--tech-text-dim) !important; }
.nk-footer-copyright a { color: var(--tech-text-soft) !important; }
.nk-footer-copyright a:hover { color: var(--tech-cyan) !important; }

/* ----------- 头像 ----------- */
.user-avatar { box-shadow: 0 0 0 2px var(--tech-border); }

/* ----------- 滚动条 ----------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--tech-bg-2); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--tech-cyan), var(--tech-purple));
    border-radius: 6px;
    border: 2px solid var(--tech-bg-2);
}

/* ----------- 选中文本 ----------- */
::selection { background: rgba(0,240,255,.3); color:#fff; }

/* ----------- 移动端微调 ----------- */
@media (max-width: 768px) {
    body::after { background-size: 32px 32px; }
    .form-control-lx { height: 48px; }
}