@charset "UTF-8";
/* ==========================================================================
   在线工具 · 基础样式（所有页面共用）
   --------------------------------------------------------------------------
   配色：墨黑主色 + 品牌蓝强调
     · 墨黑 #0F172A  → 文字、主按钮、深色版块
     · 品牌蓝 #1560EC → 强调色，取自 logo 主色
   改配色只需改下面 :root 里的变量，6 个页面同时生效。
   ========================================================================== */

:root {
    /* —— 品牌色 —— */
    --xy-ink: #0F172A;
    --xy-ink-2: #1E293B;
    --xy-ink-3: #334155;
    --xy-blue: #1560EC;
    --xy-blue-d: #0F4CC4;
    --xy-blue-l: #4A8BF5;
    --xy-blue-soft: #EEF3FE;
    --xy-blue-line: #C7DAFB;
    --xy-blue-ring: rgba(21, 96, 236, .16);

    /* —— 中性色 —— */
    --xy-text: #0F172A;
    --xy-mute: #64748B;
    --xy-mute-2: #94A3B8;
    --xy-line: #E5E9F0;
    --xy-line-2: #CBD5E1;
    --xy-bg: #FFFFFF;
    --xy-bg-soft: #F8FAFC;
    --xy-bg-sink: #F1F5F9;

    /* —— 语义色 —— */
    --xy-ok: #047857;
    --xy-ok-bg: #ECFDF5;
    --xy-ok-line: #A7F3D0;
    --xy-warn: #B45309;
    --xy-warn-bg: #FFFBEB;
    --xy-warn-line: #FDE68A;
    --xy-err: #B91C1C;
    --xy-err-bg: #FEF2F2;
    --xy-err-line: #FECACA;

    /* —— 圆角 —— */
    --xy-r-xs: 6px;
    --xy-r-sm: 8px;
    --xy-r-md: 10px;
    --xy-r-lg: 14px;
    --xy-r-xl: 16px;

    /* —— 阴影：冷灰调，不用暖棕 —— */
    --xy-s-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --xy-s-sm: 0 1px 3px rgba(15, 23, 42, .06);
    --xy-s-md: 0 6px 20px rgba(15, 23, 42, .07);
    --xy-s-lg: 0 16px 40px rgba(15, 23, 42, .10);
    --xy-s-blue: 0 4px 14px rgba(21, 96, 236, .24);

    /* —— 字体 —— */
    --xy-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
    --xy-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --xy-ease: .18s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   基础
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--xy-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--xy-text);
    background: var(--xy-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* a 标签一律不显示下划线（含鼠标经过、聚焦、点击、已访问、打印）
   注意：Bootstrap 的 a:hover 自带 text-decoration:underline，
   只写 a{text-decoration:none} 挡不住 —— CSS 是按属性各自级联的，
   hover 时没有重新声明的 text-decoration 仍然沿用 Bootstrap 那条，
   所以必须把所有状态和 a:not(.btn)（Bootstrap 打印样式）都显式写出来。 */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active,
a:not(.btn) {
    text-decoration: none;
}

a {
    color: var(--xy-blue);
}

a:hover,
a:focus {
    color: var(--xy-blue-d);
}

img {
    max-width: 100%;
    height: auto;
}

main {
    flex: 1;
}

code {
    font-family: var(--xy-mono);
    font-size: .875em;
    color: var(--xy-ink-2);
    background: var(--xy-bg-sink);
    border-radius: 4px;
    padding: 1px 5px;
}

::selection {
    background: rgba(21, 96, 236, .16);
}

:focus-visible {
    outline: 2px solid var(--xy-blue);
    outline-offset: 2px;
}

.xy-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================================
   顶部导航
   ========================================================================== */
.xy-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--xy-line);
}

.xy-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.xy-logo {
    display: flex;
    align-items: flex-end;   /* 底部对齐；注意 flexbox 没有 bottom 这个关键字，写 bottom 会被整条丢弃 */
    gap: 5px;

    letter-spacing: -.01em;
    color: var(--xy-ink);
    transition: color var(--xy-ease);
}

.xy-logo:hover {
    color: var(--xy-blue);
}

.xy-logo img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

/* logo 主标题与副标题之间的空隙：来源是继承的 body line-height:1.6，
   两行各分走一半行距，所以必须靠 line-height 收，改 margin 是没用的。 */
.xy-logo > span {
    display: block;
    line-height: 1.1;
}

.xy-logo small {
    display: block;

    font-size: .66rem;
    margin-top: 2px;

    text-transform: uppercase;   
    color: var(--xy-mute-2);
}

.xy-nav__links {
    display: flex;
    align-items: center;
    gap: 6px;
}

.xy-nav__links a {
    padding: 8px 14px;
    font-size: .9rem;
    color: var(--xy-ink-3);
    border-radius: var(--xy-r-sm);
    transition: color var(--xy-ease), background-color var(--xy-ease);
}

.xy-nav__links a:hover {
    color: var(--xy-blue);
    background: var(--xy-blue-soft);
}

.xy-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    font-size: .875rem;
    font-weight: 600;
    color: #fff !important;
    background: var(--xy-ink);
    border-radius: var(--xy-r-sm);
    box-shadow: var(--xy-s-xs);
    transition: background-color var(--xy-ease), transform var(--xy-ease);
}

.xy-nav__cta:hover {
    background: var(--xy-blue);
    color: #fff !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   工具页头
   ========================================================================== */
.xy-toolhead {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.xy-toolhead__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    font-size: 22px;
    color: #fff;
    background: linear-gradient(160deg, #2F79F0, var(--xy-blue));
    border-radius: var(--xy-r-lg);
    box-shadow: var(--xy-s-blue);
}

.xy-toolhead h1 {
    margin: 0;
    font-size: 1em;
    font-weight: 800;
    letter-spacing: -.02em;
}

.xy-toolhead p {
    margin: 4px 0 0;
    font-size: .88rem;
    color: var(--xy-mute);
}

.xy-toolhead p code {
    font-size: .85em;
}

.xy-toolhead__home {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 8px 16px;
    font-size: .85rem;
    color: var(--xy-ink-3);
    background: #fff;
    border: 1px solid var(--xy-line);
    border-radius: var(--xy-r-sm);
    transition: color var(--xy-ease), border-color var(--xy-ease);
}

.xy-toolhead__home:hover {
    color: var(--xy-blue);
    border-color: var(--xy-blue-line);
}

/* ==========================================================================
   按钮（覆盖 Bootstrap 的蓝色系）
   主操作：墨黑实心 → hover 转品牌蓝
   次操作：蓝色描边 → hover 蓝底白字
   弱操作：灰色描边 → hover 浅灰底
   ========================================================================== */
.btn {
    font-weight: 600;
    border-radius: var(--xy-r-md);
    transition: background-color var(--xy-ease), border-color var(--xy-ease),
        color var(--xy-ease), box-shadow var(--xy-ease);
}

.btn:focus,
.btn.focus {
    outline: none;
}

.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: var(--xy-ink);
    border-color: var(--xy-ink);
    box-shadow: var(--xy-s-xs);
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--xy-blue);
    border-color: var(--xy-blue);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: var(--xy-blue-d);
    border-color: var(--xy-blue-d);
    box-shadow: none;
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 3px var(--xy-blue-ring);
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: var(--xy-mute-2);
    border-color: var(--xy-mute-2);
}

.btn-outline-primary {
    color: var(--xy-blue);
    background-color: transparent;
    border-color: var(--xy-blue-line);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--xy-blue);
    border-color: var(--xy-blue);
}

.btn-outline-primary:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: var(--xy-blue-d);
    border-color: var(--xy-blue-d);
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 3px var(--xy-blue-ring);
}

.btn-outline-secondary {
    color: var(--xy-ink-3);
    background-color: #fff;
    border-color: var(--xy-line-2);
}

.btn-outline-secondary:hover {
    color: var(--xy-ink);
    background-color: var(--xy-bg-sink);
    border-color: var(--xy-line-2);
}

.btn-outline-secondary:not(:disabled):not(.disabled):active {
    color: var(--xy-ink);
    background-color: var(--xy-line);
    border-color: var(--xy-line-2);
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
    box-shadow: 0 0 0 3px rgba(15, 23, 42, .08);
}

.btn-lg {
    border-radius: var(--xy-r-lg);
}

/* ==========================================================================
   表单控件
   ========================================================================== */
.form-label {
    margin-bottom: .35rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--xy-ink-2);
}

.form-control {
    font-size: .9375rem;
    color: var(--xy-text);
    background-color: #fff;
    border: 1px solid var(--xy-line-2);
    border-radius: var(--xy-r-md);
    transition: border-color var(--xy-ease), box-shadow var(--xy-ease);
}

.form-control:focus {
    color: var(--xy-text);
    background-color: #fff;
    border-color: var(--xy-blue);
    box-shadow: 0 0 0 3px var(--xy-blue-ring);
}

.form-control::placeholder {
    color: var(--xy-mute-2);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--xy-bg-soft);
    color: var(--xy-ink-3);
}

.form-text {
    display: block;
    margin-top: .35rem;
    font-size: .8rem;
    color: var(--xy-mute);
}

.input-group>.form-control {
    border-radius: var(--xy-r-md) 0 0 var(--xy-r-md);
}

.input-group>.btn {
    border-radius: 0 var(--xy-r-md) var(--xy-r-md) 0;
}

/* Bootstrap 语义色改用统一色板 */
.text-primary {
    color: var(--xy-blue) !important;
}

.text-success {
    color: var(--xy-ok) !important;
}

.text-danger {
    color: var(--xy-err) !important;
}

.text-warning {
    color: var(--xy-warn) !important;
}

.text-muted {
    color: var(--xy-mute) !important;
}

.bg-light {
    background-color: var(--xy-bg-soft) !important;
}

/* ==========================================================================
   秀米云广告条（墨黑底 + 品牌蓝光晕，替换原来的深棕渐变）
   ========================================================================== */
.xy-promo {
    margin-top: 32px;
}

.xy-promo a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 28px 34px;
    color: #fff;
    background-color: var(--xy-ink);
    background-image: radial-gradient(120% 180% at 88% 6%, rgba(21, 96, 236, .58) 0%, rgba(21, 96, 236, 0) 60%),
        radial-gradient(90% 140% at 0% 100%, rgba(74, 139, 245, .18) 0%, rgba(74, 139, 245, 0) 60%);
    border-radius: var(--xy-r-xl);
    box-shadow: var(--xy-s-lg);
    transition: transform var(--xy-ease), box-shadow var(--xy-ease);
}

.xy-promo a:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 22px 48px rgba(15, 23, 42, .18);
}

.xy-promo__txt h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
}

.xy-promo__txt h3 img {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.xy-promo__txt h3 i {
    color: var(--xy-blue-l);
}

.xy-promo__txt p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .72);
}

.xy-promo__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 11px 22px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--xy-ink);
    background: #fff;
    border-radius: var(--xy-r-md);
    transition: background-color var(--xy-ease), color var(--xy-ease);
}

.xy-promo__btn i {
    transition: transform var(--xy-ease);
}

.xy-promo a:hover .xy-promo__btn {
    color: #fff;
    background: var(--xy-blue);
}

.xy-promo a:hover .xy-promo__btn i {
    transform: translateX(3px);
}

/* ==========================================================================
   页脚
   ========================================================================== */
.xy-footer {
    margin-top: 56px;
    padding: 24px 0;
    background: var(--xy-bg-soft);
    border-top: 1px solid var(--xy-line);
}

.xy-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--xy-mute);
}

.xy-footer__inner a {
    color: var(--xy-mute);
    transition: color var(--xy-ease);
}

.xy-footer__inner a:hover {
    color: var(--xy-blue);
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 640px) {
    .xy-container {
        padding: 0 18px;
    }

    .xy-nav__inner {
        height: 58px;
    }

    .xy-logo {
        font-size: 1.02rem;
    }

    .xy-logo img {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .xy-toolhead {
        padding: 20px 0;
        margin: 20px;
    }

    .xy-toolhead__icon {
        width: 46px;
        height: 46px;
        font-size: 19px;
        border-radius: var(--xy-r-md);
    }

    .xy-toolhead h1 {
        font-size: 1.28rem;
    }

    .xy-toolhead__home {
        margin-left: 0;
    }

    .xy-promo a {
        padding: 24px 22px;
    }

    .xy-promo__btn {
        width: 100%;
        justify-content: center;
    }

    .xy-footer {
        margin-top: 40px;
    }

    .xy-footer__inner {
        justify-content: flex-start;
    }
}