* {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #div1 {
            width: 300px;
            height: 20px;
            overflow: hidden;
            position: relative;
        }

        #div1 ul {
            position: absolute;
            top: 0;
        }
 
        @import url('https://rsms.me/inter/inter.css');

        :root {
            --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
        }

        body {
            font-feature-settings: "cv03", "cv04", "cv11";
        }

        /*
         * 多语言布局适配
         * 西语/俄语/葡语的文本比中文长得多（如「Modificación de contraseña」「Português (BR)」），
         * 在固定窄宽度的下拉菜单里会换行、把菜单项撑高、把导航挤变形。
         * 改为：菜单宽度由内容决定 + 菜单项不换行，长文本只是让菜单变宽，不影响行高与布局。
         */
        .dropdown-menu .dropdown-item {
            white-space: nowrap;
        }

        /*
         * 配套上一条：光有 nowrap 还不够。Tabler 在窄屏会把 .navbar-nav .dropdown-menu
         * 设成 position:static，此时菜单宽度跟随父容器（头像区）而非内容，
         * nowrap 的长文本就会溢出到菜单框外面。
         * 显式让宽度由内容决定，并用视口兜底限制上限（不写 min()，部分浏览器会丢掉整条声明）。
         */
        .dropdown-menu {
            width: max-content;
            max-width: calc(100vw - 1rem);
        }

        /* 语言切换器里的国旗：tabler 的 .flag 默认高 2.5rem，在下拉项里过大，收到与文字同高 */
        .flag.lang-flag {
            height: 1rem;
            width: auto;
            aspect-ratio: 4 / 3;
            vertical-align: -0.15em;
            border-radius: 2px;
            flex: 0 0 auto;   /* 两列排版时不能被压缩变形 */
        }

        /*
         * 语言切换器：34 个语言单列会顶出屏幕；原来的两列是 17 行约 690px，
         * 几乎占满一屏、而且正好压住下方内容 —— 改三列网格（12 行，约 380px，一屏内看完）。
         * 同时把配置里的母语名精简过一轮（Português (BR) → Português、
         * Bahasa Indonesia → Indonesia、Bahasa Melayu → Melayu），
         * 每列约 8.6rem 才放得下；少数仍超长的名字交给下面那条 text-overflow 截断。
         * 网格刻意挂在 .dropdown-menu 内层的包裹层上，而不是 .dropdown-menu 自己：
         * Bootstrap/Tabler 靠后者的 display 控制开合（默认 none，.show 或 :hover 时 block），
         * 在它身上写 display:grid 会让面板常驻可见；而 header 里那条
         * `.nav-item.dropdown:hover>.dropdown-menu{display:block}` 权重更高，会把它压回单列。
         * min-width:0 是必需的：Grid 轨道默认最小尺寸是 auto（等同 max-content），
         * 不写它，长名字会把格子撑破、整列被挤歪。
         * RTL（乌尔都语/希伯来语）下 grid 的自动放置随 dir 从右往左填，无需额外规则。
         */
        .lang-menu {
            width: 26rem;
            max-width: calc(100vw - 1rem);
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.125rem 0.25rem;
            max-height: calc(100vh - 6rem);
            overflow-y: auto;
        }
        .lang-menu .dropdown-item {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            min-width: 0;
            padding: 0.3rem 0.4rem;
        }
        .lang-menu .dropdown-item > span {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /* 窄屏：三列会挤到看不清名字，回落单列并交给面板自身滚动 */
        @media (max-width: 575.98px) {
            .lang-menu {
                width: 16rem;
                grid-template-columns: minmax(0, 1fr);
            }
        }

        /*
         * 顶部一级菜单：各语言译文长度差异极大（中文「文件解密」4 个字，
         * 德语「Entfernen von Schutzberechtigungen」33 个字符），11 个一级项
         * 按译文自然宽度排会把整条导航挤变形，甚至把页面撑出横向滚动条。
         *
         * 2026-10-02 改成「放不下就折行」。原来那条 nowrap + 省略号有两个问题：
         *   ① ul.navbar-nav 自己是 .container-xl 的 flex 项，而 flex 项默认
         *      min-width:auto（最小尺寸不小于内容），少了 min-width:0 根本收缩不了
         *      —— 实测波兰语导航 1564px、文档 1640px（视口 1440），规则等于没生效；
         *   ② 补上 min-width:0 后确实不撑破了，但德语 10 个菜单项全被截断
         *      （最多截 43px，显示成「Datei-Entschlüsselung…」），没法看。
         * 折行后：一行放不下的项自动进第二行（德语/波兰语/意大利语是两行），
         * 1440 视口下实测文档宽度全部回到 1440、菜单名 0 项截断。
         * 省略号保留为兜底：只有单个词长过整行（极端语言）才会收缩并截断。
         *
         * 注意省略号只许加在 .nav-link-title 上：加在 .nav-link 或 .nav-item 上
         * 会把二级下拉菜单一起裁掉（下拉是 absolute 定位的兄弟节点，
         * 祖先上一处 overflow:hidden 就会把它剪没）。
         * 也不能给 .navbar-nav 加 overflow-x:auto —— 同理会切断悬停展开的二级菜单。
         * 头部变高会影响各页写死的 sticky 偏移（如计算器页右侧卡片 top:80px），
         * 那类偏移已改成按头部实际高度动态计算，见 static/js/index/bruteforce.js。
         */
        @media (min-width: 768px) {
            #navbar-menu .navbar-nav {
                flex-wrap: wrap;
                min-width: 0;
            }
            #navbar-menu .navbar-nav > .nav-item {
                min-width: 0;
            }
            #navbar-menu .navbar-nav > .nav-item > .nav-link {
                min-width: 0;
            }
            #navbar-menu .navbar-nav > .nav-item > .nav-link > .nav-link-title {
                display: block;
                min-width: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        /*
         * 小屏站名：Tabler 给 .navbar-brand 加了 white-space:nowrap。中文/英文站名短，
         * 德语「Passwort-Dokument wiederherstellen Master」在 390px 屏上一行放不下 ——
         * 而 .navbar-brand 是头部的 flex 项（模板上带内联 flex:2），min-width:auto 时
         * 它的最小尺寸就是「整行站名」的宽度，实测 390px 视口下被撑到 415px，
         * 文档跟着变成 455px（唯一撑宽的元素，对比表那种是容器内滚动、不算）。
         * ≤576px 放开折行并放开收缩下限：站名折成两行，信息不丢、文档回到视口宽度。
         * overflow-wrap 兜底俄语/阿拉伯语那种单个超长词。
         */
        @media (max-width: 575.98px) {
            .navbar-brand {
                min-width: 0;
                white-space: normal;
                overflow-wrap: anywhere;
            }
        }


        

        .translateSelectLanguage {
            --tblr-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238a97ab' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
            display: block;
            width: 100%;
            padding: 0.5625rem 2.25rem 0.5625rem 0.75rem;
            font-family: var(--tblr-font-sans-serif);
            font-size: .875rem;
            font-weight: 400;
            line-height: 1.4285714286;
            color: var(--tblr-body-color);
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: var(--tblr-bg-forms);
            background-image: var(--tblr-form-select-bg-img), var(--tblr-form-select-bg-icon, none);
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 16px 12px;
            border: var(--tblr-border-width) solid var(--tblr-border-color);
            border-radius: var(--tblr-border-radius);
            box-shadow: var(--tblr-box-shadow-input);
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

    li {
        list-style-type: none;
    }


 .cf-24 {
    display: inline-block;
    vertical-align: middle;
}
.cf-24.cf-cn:before {
    background-position: -144px -120px;
}
.cf-24.cf-us:before {
    background-position: 0px -336px;
}
.cf-24:before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url(/static/img/flat24sheet.png) no-repeat;
}

/* =============================================================
   暗夜模式：跨页面通用兜底
   -------------------------------------------------------------
   这里只放「不止一个页面会用到」的暗色修正；页面专属的 hm-* / dpt-*
   / pdc-* / ps-* 各自在自己的 CSS 里适配，不要往这儿堆。

   选择器统一带 [data-bs-theme="dark"]，权重 0,2,0，高于各页面 CSS 里的
   单类选择器（0,1,0）—— 本文件在 header 里先于页面的 $page_css 加载，
   靠的就是这个权重差，否则会被后加载的页面 CSS 压掉。
   ============================================================= */

/* 文章标签：article.css / article_list.css 都写死 #616060，
   深底上只剩个轮廓（实测 2.5:1） */
[data-bs-theme="dark"] .tag {
    color: #93a4b8;
}

/* 分页：Tabler 暗色没同步改分页文字色，「«」这类翻页符号几乎看不见（1.8:1） */
[data-bs-theme="dark"] .page-link {
    color: #cbd5e1;
}

/* 描边主色按钮：本站 --tblr-primary 被改成深蓝 #0054a6，暗色下描边和文字
   都取它，等于深蓝字压深底（登录页「免注册直接使用」实测 2.1:1） */
[data-bs-theme="dark"] .btn-outline-primary {
    color: #7db1ff;
    border-color: #7db1ff;
}

/* Tabler 的 .text-warning 是 #f76707，深底上只有 1.8:1。
   它带 !important，所以这里也必须带，靠更高的选择器权重取胜。 */
[data-bs-theme="dark"] .text-warning {
    color: #fbbf24 !important;
}

/* 富文本正文里从 Word 粘进来的内联深色（典型：哈希示例的 rgb(192, 0, 0)）。
   颜色写在元素的 style 属性上，内联样式压过一切选择器，只能用属性选择器
   命中后再用 !important 顶掉。这里只收本站实际出现过的两种：Word 深红、纯黑。
   注意 rgb(0,0,0) 不会误伤 rgba(0,0,0,.05) 这类半透明黑 —— 后者是 "a(" 开头。 */
[data-bs-theme="dark"] [style*="rgb(192, 0, 0)"],
[data-bs-theme="dark"] [style*="rgb(192,0,0)"],
[data-bs-theme="dark"] [style*="#c00000"] {
    color: #fca5a5 !important;
}
[data-bs-theme="dark"] [style*="rgb(0, 0, 0)"],
[data-bs-theme="dark"] [style*="color: black"] {
    color: #e2e8f0 !important;
}