/* =====================================================
   Wot Theme — cli.wot-ui.cn (Open Wot) visual style
   GitHub-dark terminal look: #0d1117 / #161b22 / #39d353
   Global font: JetBrains Mono (local woff2, CJK fallback)
   Loaded after frontend.css via common/meta.html
   ===================================================== */

/* ---------- 1. JetBrains Mono (local, swap, cache-bust friendly) ---------- */
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Bold.woff2") format("woff2");
}

/* ---------- 2. Design tokens (extracted from cli.wot-ui.cn) ---------- */
:root {
    --wot-bg: #0d1117;
    --wot-bg-deep: #080b0f;
    --wot-panel: #161b22;
    --wot-panel-hover: #1c2430;
    --wot-overlay: #21262d;
    --wot-border: #30363d;
    --wot-border-light: #21262d;

    --wot-text: #e6edf3;
    --wot-text-soft: #c6d0da;
    --wot-text-muted: #8b949e;
    --wot-text-faint: #58616b;

    --wot-accent: #39d353;
    --wot-accent-dim: #238636;
    --wot-accent-hover: #2ea043;
    --wot-accent-contrast: #071109;
    --wot-info: #79c0ff;
    --wot-danger: #f85149;
    --wot-warn: #d29922;

    --wot-radius-sm: 6px;
    --wot-radius: 8px;
    --wot-radius-lg: 12px;
    --wot-radius-full: 999px;

    --wot-font: "JetBrains Mono", "SF Mono", SFMono-Regular, Consolas, Menlo,
        "PingFang SC", "Microsoft YaHei", monospace;
    --wot-shadow: 0 8px 24px rgba(1, 4, 9, 0.6);
}

/* ---------- 3. Global base ---------- */
html,
body {
    margin: 0;
    padding: 0;
    background: var(--wot-bg) !important;
    color: var(--wot-text);
    font-family: var(--wot-font) !important;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--wot-font);
    color: var(--wot-text);
    font-weight: 500;
    letter-spacing: 0;
}

a {
    color: var(--wot-info);
    transition: color 150ms ease;
}
a:hover, a:focus { color: #a5d6ff; }

code, pre, kbd, samp {
    font-family: var(--wot-font);
}

::selection { background: rgba(57, 211, 83, 0.32); color: var(--wot-text); }

* {
    scrollbar-width: thin;
    scrollbar-color: var(--wot-border) var(--wot-bg);
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--wot-bg); }
*::-webkit-scrollbar-thumb {
    background: var(--wot-border);
    border-radius: var(--wot-radius-full);
    border: 2px solid var(--wot-bg);
}
*::-webkit-scrollbar-thumb:hover { background: #3f4954; }

/* ---------- 4. Navbar (layout/default.html) — aligned with .wo-nav / .ai-topnav ----------
   Target spec (same as home nav): outer 61px (60 + 1px border), inner container 1080px,
   brand 15px/700 with green dot, links 13px vertically centered. */
@media (min-width: 768px) {
    .navbar {
        min-height: 60px;
    }
    .navbar .container {
        max-width: 1080px;
        padding: 0 20px;
    }
    .navbar .navbar-brand {
        height: 60px;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--wot-text) !important;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.5px;
    }
    .navbar .navbar-brand::before {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--wot-accent, #39d353);
        box-shadow: 0 0 8px rgba(57, 211, 83, 0.8);
        flex: 0 0 auto;
    }
    .navbar .nav > li > a {
        height: 60px;
        padding: 0 14px;
        line-height: 60px;
    }
    .navbar .avatar-img {
        display: inline-flex;
        vertical-align: middle;
    }
}
.navbar {
    background: var(--wot-panel) !important;
    border: none;
    border-bottom: 1px solid var(--wot-border) !important;
    box-shadow: none;
}
.navbar .navbar-brand:hover { color: var(--wot-accent) !important; }
.navbar .navbar-toggle .icon-bar { background-color: var(--wot-text-muted); }
.navbar .navbar-toggle { border-color: var(--wot-border); }
.navbar .navbar-toggle:hover { background: var(--wot-overlay); }
.navbar .nav > li > a {
    color: var(--wot-text-muted) !important;
    font-size: 13px;
}
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
    color: var(--wot-text) !important;
    background: var(--wot-overlay) !important;
}
/* default layout nav: fixed -> sticky (same behavior as .wo-nav / .ai-topnav).
   sticky occupies the document flow, so the page content is never hidden
   under the nav, and no body padding-top offset is needed (wot-theme.css
   resets body padding globally, which removed frontend.css's old
   body{padding-top:60px} fixed-nav offset and caused overlap). */
.navbar.navbar-fixed-top {
    position: sticky !important;
    top: 0;
    z-index: 1030;
}
.navbar .nav .open > a,
.navbar .nav .open > a:hover { background: var(--wot-overlay) !important; }
.navbar .avatar-img img {
    border: 1px solid var(--wot-border);
    border-radius: 50%;
}
@media (max-width: 767px) {
    .navbar .navbar-toggle { margin-top: 12px; margin-bottom: 12px; }
}

/* ---------- 5. Dropdown ---------- */
.dropdown-menu {
    background: var(--wot-panel) !important;
    border: 1px solid var(--wot-border) !important;
    border-radius: var(--wot-radius);
    box-shadow: var(--wot-shadow);
    padding: 4px;
}
.dropdown-menu > li > a {
    color: var(--wot-text-muted) !important;
    border-radius: var(--wot-radius-sm);
    font-size: 13px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--wot-overlay) !important;
    color: var(--wot-text) !important;
}
.dropdown-menu .divider {
    background: var(--wot-border);
    margin: 4px 0;
}

/* ---------- 6. Content / footer ---------- */
main.content {
    background: transparent;
    padding-bottom: 40px;
}
.footer {
    background: var(--wot-bg-deep);
    border-top: 1px solid var(--wot-border-light);
    color: var(--wot-text-faint);
    padding: 22px 0;
}
.footer a { color: var(--wot-text-muted); }

/* ---------- 7. Panel / page header ---------- */
.panel {
    background: var(--wot-panel) !important;
    border: 1px solid var(--wot-border) !important;
    border-radius: var(--wot-radius-lg) !important;
    box-shadow: none !important;
    color: var(--wot-text);
}
.panel-default > .panel-heading,
.panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--wot-border) !important;
    color: var(--wot-text);
}
.panel-body { color: var(--wot-text); }
h2.page-header {
    border-bottom: 1px solid var(--wot-border) !important;
    color: var(--wot-text);
    font-size: 18px;
}

/* ---------- 8. Forms ---------- */
.form-control {
    background: var(--wot-bg) !important;
    border: 1px solid var(--wot-border) !important;
    border-radius: var(--wot-radius) !important;
    color: var(--wot-text) !important;
    box-shadow: none !important;
    font-family: var(--wot-font);
    font-size: 13px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-control:focus {
    border-color: var(--wot-accent-dim) !important;
    box-shadow: 0 0 0 3px rgba(35, 134, 54, 0.35) !important;
    outline: none;
}
.form-control::placeholder { color: var(--wot-text-faint); }
.form-control[disabled],
.form-control[readonly] {
    background: var(--wot-panel) !important;
    color: var(--wot-text-faint) !important;
}
.control-label { color: var(--wot-text-muted); font-size: 13px; }
.help-block, .msg-box { color: var(--wot-text-faint); font-size: 12px; }
.input-group-addon,
.input-group-btn .btn { border-radius: var(--wot-radius); }
.checkbox label, .radio label { color: var(--wot-text-muted); }

/* ---------- 9. Buttons (bootstrap) ---------- */
.btn {
    font-family: var(--wot-font);
    font-size: 13px;
    border-radius: var(--wot-radius) !important;
    border: 1px solid var(--wot-border) !important;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn-primary,
.btn-info {
    background: var(--wot-accent-dim) !important;
    border-color: rgba(240, 246, 252, 0.1) !important;
    color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-info:hover, .btn-info:focus {
    background: var(--wot-accent-hover) !important;
    color: #ffffff !important;
}
.btn-success {
    background: #238636 !important;
    border-color: rgba(240, 246, 252, 0.1) !important;
    color: #ffffff !important;
}
.btn-success:hover { background: var(--wot-accent-hover) !important; }
.btn-default,
.btn-white {
    background: var(--wot-overlay) !important;
    border-color: var(--wot-border) !important;
    color: var(--wot-text) !important;
}
.btn-default:hover, .btn-white:hover {
    background: #2d333b !important;
    color: var(--wot-text) !important;
}
.btn-danger {
    background: #8b1f1b !important;
    border-color: rgba(240, 246, 252, 0.1) !important;
    color: #ffffff !important;
}
.btn-danger:hover { background: #a3302c !important; }
.btn-lg { padding: 10px 22px; font-size: 14px; }

/* ---------- 10. Alerts ---------- */
.alert {
    border-radius: var(--wot-radius) !important;
    border: 1px solid var(--wot-border) !important;
    color: var(--wot-text) !important;
    background: var(--wot-panel) !important;
    font-size: 13px;
}
.alert-success { border-left: 3px solid var(--wot-accent) !important; }
.alert-danger { border-left: 3px solid var(--wot-danger) !important; }
.alert-warning { border-left: 3px solid var(--wot-warn) !important; }
.alert-info { border-left: 3px solid var(--wot-info) !important; }
.alert .text-muted { color: var(--wot-text-muted) !important; }

/* ---------- 11. Sidenav list-group ---------- */
.list-group { background: transparent; }
.list-group-item {
    background: transparent !important;
    border: none !important;
    border-radius: var(--wot-radius-sm) !important;
    color: var(--wot-text-muted) !important;
    font-size: 13px;
    margin: 2px 0;
    padding: 9px 14px;
}
.list-group-item a { color: var(--wot-text-muted) !important; text-decoration: none; }
.list-group-item:hover { background: var(--wot-overlay) !important; }
.list-group-item:hover a { color: var(--wot-text) !important; }
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background: var(--wot-accent-dim) !important;
    color: #ffffff !important;
}
.list-group-item.active a { color: #ffffff !important; }
.list-group-heading {
    color: var(--wot-text-faint) !important;
    background: transparent !important;
    border: none !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px 14px 6px !important;
}
.sidebar-toggle {
    background: var(--wot-panel) !important;
    color: var(--wot-text) !important;
    border: 1px solid var(--wot-border);
}

/* ---------- 12. Login / register / logout ---------- */
.user-section {
    background: var(--wot-panel) !important;
    border: 1px solid var(--wot-border) !important;
    border-radius: var(--wot-radius-lg) !important;
    color: var(--wot-text);
}
.logon-tab {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--wot-border) !important;
    border-radius: var(--wot-radius-lg) var(--wot-radius-lg) 0 0 !important;
    padding: 0;
    overflow: hidden;
}
.logon-tab > a {
    color: var(--wot-text-muted) !important;
    background: transparent !important;
    border-right: 1px solid var(--wot-border);
    padding: 12px 18px;
    font-size: 13px;
}
.logon-tab > a:hover { background: var(--wot-overlay) !important; color: var(--wot-text) !important; }
.logon-tab > a.active {
    background: var(--wot-bg) !important;
    color: var(--wot-accent) !important;
    border-bottom: 2px solid var(--wot-accent);
}
.login-main {
    background: transparent !important;
    border: none !important;
    border-radius: 0 0 var(--wot-radius-lg) var(--wot-radius-lg) !important;
    padding: 24px 22px !important;
}
.login-section .btn-forgot { color: var(--wot-info); font-size: 12px; }
.logout-section .image { filter: invert(0.85); }
.user-baseinfo table tr td { color: var(--wot-text-muted) !important; }
.user-baseinfo table tr td a { color: var(--wot-accent) !important; }
.viewmoney, .viewscore { color: var(--wot-accent) !important; }

/* ---------- 12b. Sidenav (frontend.css has high-specificity rules) ---------- */
.sidenav {
    background: var(--wot-panel) !important;
    border: 1px solid var(--wot-border);
    border-radius: var(--wot-radius-lg);
}
.sidenav .list-group { background: transparent !important; }
.sidenav .list-group .list-group-heading {
    color: var(--wot-text-faint) !important;
    background: transparent !important;
    margin-left: 14px !important;
}
.sidenav .list-group .list-group-item { background: transparent !important; }
.sidenav .list-group .list-group-item > a {
    color: var(--wot-text-muted) !important;
}
.sidenav .list-group .list-group-item > a:hover { color: var(--wot-text) !important; }
.sidenav .list-group .list-group-item:hover {
    background: var(--wot-overlay) !important;
    border-left: 2px solid transparent !important;
    border-radius: var(--wot-radius-sm) !important;
}
.sidenav .list-group .list-group-item.active {
    background: var(--wot-accent-dim) !important;
    border-left: 2px solid var(--wot-accent) !important;
    border-radius: var(--wot-radius-sm) !important;
}
.sidenav .list-group .list-group-item.active > a { color: #ffffff !important; }

/* ---------- 12c. Footer (footer.footer outranks .footer) ---------- */
footer.footer {
    background: var(--wot-bg-deep) !important;
    border-top: 1px solid var(--wot-border-light);
    color: var(--wot-text-faint) !important;
    margin-top: 40px;
}
footer.footer .copyright {
    background: transparent !important;
    color: var(--wot-text-faint) !important;
}
footer.footer .copyright a { color: var(--wot-text-muted) !important; }

/* ---------- 13. Tables / bootstrap-table ---------- */
.table { color: var(--wot-text); }
.table > thead > tr > th,
.table > tbody > tr > td {
    border-color: var(--wot-border-light) !important;
    color: var(--wot-text);
    font-size: 13px;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255, 255, 255, 0.02); }
.table-hover > tbody > tr:hover { background: var(--wot-overlay) !important; }
.fixed-table-container { border-color: var(--wot-border) !important; }
.nav-tabs > li > a {
    color: var(--wot-text-muted) !important;
    background: transparent;
    border-color: transparent;
}
.nav-tabs > li.active > a {
    color: var(--wot-text) !important;
    background: var(--wot-panel) !important;
    border-color: var(--wot-border) var(--wot-border) transparent !important;
}

/* ---------- 14. misc ---------- */
.text-muted { color: var(--wot-text-muted) !important; }
.text-primary { color: var(--wot-accent) !important; }
.text-danger { color: var(--wot-danger) !important; }
.text-success { color: var(--wot-accent) !important; }
.text-info { color: var(--wot-info) !important; }
.form-layer .form-footer { background-color: var(--wot-panel) !important; border-top: 1px solid var(--wot-border); }
.pagination > li > a,
.pagination > li > span {
    background: var(--wot-panel);
    border-color: var(--wot-border);
    color: var(--wot-text-muted);
}
.pagination > .active > a {
    background: var(--wot-accent-dim) !important;
    border-color: var(--wot-accent-dim) !important;
    color: #ffffff !important;
}
.layui-layer {
    background: var(--wot-panel) !important;
    border: 1px solid var(--wot-border) !important;
}
.layui-layer-title {
    background: var(--wot-panel) !important;
    border-bottom: 1px solid var(--wot-border) !important;
    color: var(--wot-text) !important;
}

/* =====================================================
   15. Home page (view/index/index.html)
   ===================================================== */
.wo-home { min-height: 100vh; display: flex; flex-direction: column; background: var(--wot-bg); }

.wo-nav {
    border-bottom: 1px solid var(--wot-border);
    background: rgba(13, 17, 23, 0.85);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 100;
}
.wo-nav-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.wo-brand {
    font-weight: 700;
    font-size: 15px;
    color: var(--wot-text) !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wo-brand .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--wot-accent);
    box-shadow: 0 0 8px rgba(57, 211, 83, 0.8);
}
.wo-nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.wo-nav-links a {
    color: var(--wot-text-muted) !important;
    text-decoration: none !important;
    font-size: 13px;
    padding: 7px 12px;
    border-radius: var(--wot-radius-sm);
}
.wo-nav-links a:hover { color: var(--wot-text) !important; background: var(--wot-overlay); }
.wo-nav-links a.wo-btn-nav {
    background: var(--wot-accent-dim);
    color: #ffffff !important;
    border: 1px solid rgba(240, 246, 252, 0.1);
}
.wo-nav-links a.wo-btn-nav:hover { background: var(--wot-accent-hover); }

.wo-hero {
    max-width: 1080px;
    margin: 0 auto;
    padding: 84px 20px 64px;
    text-align: center;
    position: relative;
}
.wo-hero-badge {
    display: inline-block;
    font-size: 12px;
    color: var(--wot-accent);
    background: rgba(35, 134, 54, 0.18);
    border: 1px solid rgba(57, 211, 83, 0.35);
    border-radius: var(--wot-radius-full);
    padding: 4px 14px;
    margin-bottom: 26px;
    letter-spacing: 1px;
}
.wo-hero h1 {
    font-size: 40px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 18px;
    color: var(--wot-text);
}
.wo-hero h1 em {
    font-style: normal;
    color: var(--wot-accent);
}
.wo-hero p.wo-sub {
    font-size: 15px;
    color: var(--wot-text-muted);
    max-width: 640px;
    margin: 0 auto 34px;
}
.wo-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.wo-btn {
    display: inline-block;
    font-size: 14px;
    padding: 11px 26px;
    border-radius: var(--wot-radius);
    text-decoration: none !important;
    border: 1px solid transparent;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.wo-btn-primary {
    background: var(--wot-accent-dim);
    color: #ffffff !important;
    border-color: rgba(240, 246, 252, 0.1);
}
.wo-btn-primary:hover { background: var(--wot-accent-hover); color: #ffffff !important; }
.wo-btn-ghost {
    background: transparent;
    color: var(--wot-text) !important;
    border-color: var(--wot-border);
}
.wo-btn-ghost:hover { background: var(--wot-overlay); }

.wo-stats {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.wo-stat {
    border: 1px solid var(--wot-border);
    background: var(--wot-panel);
    border-radius: var(--wot-radius);
    padding: 14px 22px;
    min-width: 180px;
    text-align: left;
}
.wo-stat b {
    display: block;
    font-size: 18px;
    color: var(--wot-accent);
    font-weight: 700;
}
.wo-stat span { font-size: 12px; color: var(--wot-text-muted); }

.wo-section {
    max-width: 1080px;
    margin: 0 auto;
    padding: 72px 20px 0;
    width: 100%;
}
.wo-section-head { text-align: center; margin-bottom: 40px; }
.wo-section-head .no {
    color: var(--wot-text-faint);
    font-size: 12px;
    letter-spacing: 2px;
}
.wo-section-head h2 { font-size: 26px; margin: 10px 0 8px; }
.wo-section-head p { color: var(--wot-text-muted); font-size: 14px; margin: 0; }

.wo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.wo-card {
    background: var(--wot-panel);
    border: 1px solid var(--wot-border);
    border-radius: var(--wot-radius-lg);
    padding: 24px;
    transition: border-color 150ms ease, transform 150ms ease;
    display: block;
    text-decoration: none !important;
    position: relative;
}
.wo-card:hover { border-color: var(--wot-accent-dim); transform: translateY(-2px); }
.wo-card .icon {
    width: 40px; height: 40px;
    border-radius: var(--wot-radius);
    background: rgba(35, 134, 54, 0.18);
    border: 1px solid rgba(57, 211, 83, 0.3);
    color: var(--wot-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 16px;
}
.wo-card h3 {
    font-size: 15px;
    margin: 0 0 8px;
    color: var(--wot-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wo-card h3 .arrow { color: var(--wot-text-faint); font-size: 13px; transition: color 150ms ease; }
.wo-card:hover h3 .arrow { color: var(--wot-accent); }
.wo-card p {
    font-size: 13px;
    color: var(--wot-text-muted);
    margin: 0;
    line-height: 1.7;
}
.wo-card .tagline {
    display: inline-block;
    margin-top: 14px;
    font-size: 11px;
    color: var(--wot-accent);
    background: rgba(35, 134, 54, 0.15);
    border-radius: var(--wot-radius-full);
    padding: 2px 10px;
}

.wo-flow {
    display: flex;
    gap: 0;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
.wo-flow-step {
    background: var(--wot-panel);
    border: 1px solid var(--wot-border);
    border-radius: var(--wot-radius);
    padding: 16px 20px;
    min-width: 200px;
    position: relative;
    margin: 10px;
}
.wo-flow-step .no {
    font-size: 11px;
    color: var(--wot-accent);
    letter-spacing: 1px;
}
.wo-flow-step b { display: block; color: var(--wot-text); font-size: 14px; margin: 6px 0 4px; }
.wo-flow-step span { font-size: 12px; color: var(--wot-text-muted); }

.wo-cta-final {
    max-width: 780px;
    margin: 80px auto 0;
    padding: 44px 30px;
    text-align: center;
    background: linear-gradient(180deg, rgba(35, 134, 54, 0.12), rgba(13, 17, 23, 0));
    border: 1px solid var(--wot-border);
    border-radius: var(--wot-radius-lg);
}
.wo-cta-final h2 { font-size: 24px; margin-bottom: 10px; }
.wo-cta-final p { color: var(--wot-text-muted); font-size: 13px; margin-bottom: 26px; }

.wo-footer {
    margin-top: 90px;
    border-top: 1px solid var(--wot-border-light);
    background: var(--wot-bg-deep);
    padding: 24px 20px;
    text-align: center;
    color: var(--wot-text-faint);
    font-size: 12px;
}
.wo-footer a { color: var(--wot-text-muted); }

@media (max-width: 768px) {
    .wo-hero h1 { font-size: 28px; }
    .wo-hero { padding: 56px 16px 40px; }
    .wo-flow-step { min-width: 100%; }
    .wo-stat { flex: 1; min-width: 140px; }
}