/* URL 编码解码 — yicool.com.cn /tools/url-encoder
 * 复用站点主题变量（--bg-primary / --accent / --text-* 等），适配深 / 浅色。
 *
 * 2026-10-11 优化轮要点：
 *   - color-mix 结果统一提到 .ure-page 上的 --ure-* 变量，只计算一次（原来每个按钮 hover 都重算）。
 *   - 修正 .ure-hero-ico 渐变第二色标：color-mix(... 70%, #000 0%) 百分比合计 70%≠100%，会算错颜色。
 *   - 删除 wrap="off" 下失效的 white-space / word-break 死代码。
 *   - .ure-table-card 用 content-visibility:auto 让首屏跳过屏外表格的排版。
 *   - 补 prefers-reduced-motion 与 @media print。
 */
.ure-page {
    /* 派生色只算一次，避免 hover 时反复 color-mix */
    --ure-hover-border: color-mix(in srgb, var(--accent, #136ce9) 45%, transparent);
    --ure-focus-ring: color-mix(in srgb, var(--accent, #136ce9) 55%, transparent);
    --ure-ring-soft: color-mix(in srgb, var(--accent, #136ce9) 16%, transparent);
    --ure-soft-bg: color-mix(in srgb, var(--text-primary, #1f2430) 8%, transparent);
    --ure-accent-deep: color-mix(in srgb, var(--accent, #136ce9) 70%, #000);
    --ure-accent-press: color-mix(in srgb, var(--accent, #136ce9) 88%, #000);

    max-width: 100%;
    margin: 0 auto;
    padding: 28px 24px 64px;
    box-sizing: border-box;
}
.ure-page *,
.ure-page *::before,
.ure-page *::after { box-sizing: border-sizing; }

/* ---------------- 桌面端满屏工作台（占满整屏宽度，保留左侧导航栏） ----------------
 * body_class 已由 tools_url_encoder.php 输出（page-url-encoder-full）；
 * 覆盖 style.css 的 .app max-width:1280px 居中限制 */
body.page-url-encoder-full .app { max-width: 100%; }
body.page-url-encoder-full .main-content { max-width: 100%; border-right: 0; }
body.page-url-encoder-full .page-container { max-width: 100%; width: 100%; }

/* 折叠左侧导航后放开内容限宽：否则 .ure-page 居中限宽会让折叠前后宽度不变，
 * 看起来像“折叠功能失效”（其他工具页折叠后内容都会明显加宽） */
body.page-url-encoder-full.left-collapsed .ure-page { max-width: none; }

/* 英雄区 */
.ure-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    /* 卡片化：淡渐变背景 + 圆角 + 轻阴影，界面更有层次，与站点其他工具风格统一 */
    padding: 18px 20px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent, #136ce9) 9%, var(--bg-primary, #fff)),
        var(--bg-primary, #fff));
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05);
}
.ure-hero-ico {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--accent, #136ce9), var(--ure-accent-deep));
}
.ure-hero-t { flex: 1 1 240px; min-width: 0; }
.ure-hero-title {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}
.ure-hero-sub {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
}
.ure-hero-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ure-tag {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--bg-secondary, #f1f3f7);
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
}

/* 操作区 */
.ure-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.ure-mode {
    display: inline-flex;
    padding: 4px;
    border-radius: 12px;
    background: var(--bg-secondary, #f1f3f7);
    gap: 4px;
}
.ure-mode-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 9px;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
}
.ure-mode-btn:hover { color: var(--text-primary, #1f2430); }
.ure-mode-btn.is-active {
    background: var(--bg-primary, #fff);
    color: var(--accent, #136ce9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.ure-mode-btn:focus-visible,
.ure-check input:focus-visible {
    outline: 2px solid var(--ure-focus-ring);
    outline-offset: 2px;
}
.ure-ops {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ure-sep {
    width: 1px;
    height: 22px;
    background: var(--border-color, #e5e7eb);
    margin: 0 2px;
}
.ure-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1f2430);
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .05s, box-shadow .15s;
    white-space: nowrap;
}
.ure-btn:hover { border-color: var(--ure-hover-border); }
.ure-btn:active { transform: translateY(1px); }
.ure-btn:focus-visible { outline: 2px solid var(--ure-focus-ring); outline-offset: 2px; }
.ure-btn.is-primary {
    background: var(--accent, #136ce9);
    border-color: var(--accent, #136ce9);
    color: #fff;
}
.ure-btn.is-primary:hover { background: var(--ure-accent-press); border-color: var(--ure-accent-press); }
.ure-btn.is-ghost { background: transparent; }
.ure-btn.is-danger { color: #d33; }
.ure-btn.is-danger:hover { border-color: #d33; background: rgba(221, 51, 51, .06); }

/* 模式说明 */
.ure-mode-tip {
    margin: 10px 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary, #6b7280);
    background: var(--bg-secondary, #f1f3f7);
    border-radius: 10px;
    padding: 10px 14px;
}

/* 附加选项 */
.ure-opts {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ure-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text-primary, #1f2430);
    cursor: pointer;
    user-select: none;
}
.ure-check input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--accent, #136ce9);
    cursor: pointer;
}
.ure-opts-tip {
    font-size: 12.5px;
    color: var(--text-secondary, #6b7280);
}

.ure-page code {
    background: var(--ure-soft-bg);
    padding: 1px 6px;
    border-radius: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .92em;
}

/* 状态提示 */
.ure-status {
    margin: 0 0 12px;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.55;
    background: rgba(221, 51, 51, .08);
    color: #b42318;
    border: 1px solid rgba(221, 51, 51, .18);
}
.ure-status[hidden] { display: none !important; }

/* 输入输出 */
.ure-io {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ure-sec {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ure-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 10px;
}
.ure-sec-label {
    font-size: 14px;
    font-weight: 600;
}
.ure-sec-count {
    font-size: 12.5px;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
}
.ure-sec-count b { font-weight: 700; color: var(--text-primary, #1f2430); }
.ure-textarea {
    width: 100%;
    min-height: 200px;
    resize: vertical;
    padding: 14px 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1f2430);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 14px;
    line-height: 1.6;
    /* wrap="off" 由浏览器控制换行；不要在这里写 white-space / word-break，
       两者在 wrap=off 下均不生效，属误导性死代码 */
    overflow: auto;
    transition: border-color .15s, box-shadow .15s;
}
.ure-textarea:focus {
    outline: none;
    border-color: var(--accent, #136ce9);
    box-shadow: 0 0 0 3px var(--ure-ring-soft);
}
.ure-textarea[readonly] { background: var(--bg-secondary, #f1f3f7); color: var(--text-secondary, #6b7280); }

/* 对照表：屏外时跳过排版，加快首屏 */
.ure-table-card {
    margin-top: 28px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 18px 18px 20px;
    background: var(--bg-primary, #fff);
    content-visibility: auto;
    contain-intrinsic-size: auto 680px;
}
.ure-table-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
}
.ure-table-sub {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
}
.ure-table-wrap { overflow-x: auto; }
.ure-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.ure-table th,
.ure-table td {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    white-space: nowrap;
}
.ure-table th {
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    background: var(--bg-secondary, #f1f3f7);
}
.ure-table th:first-child { border-top-left-radius: 8px; }
.ure-table th:last-child { border-top-right-radius: 8px; }
.ure-table td:first-child {
    font-weight: 600;
    color: var(--text-primary, #1f2430);
}
.ure-table code {
    background: transparent;
    padding: 0;
    color: var(--accent, #136ce9);
}

.ure-note {
    margin: 22px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary, #6b7280);
}

/* Toast */
.ure-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%) translateY(12px);
    max-width: min(90vw, 420px);
    padding: 11px 18px;
    border-radius: 12px;
    background: #1f2430;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 100000;
}
.ure-toast.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    will-change: opacity, transform;
}
.ure-toast.is-ok { background: #167a4a; }
.ure-toast.is-err { background: #c0392b; }
.ure-toast[hidden] { display: none !important; }

/* 响应式
 * 三端断点：
 *   - 桌面 ≥1025px：输入/输出双列并排，操作区分行（模式切换 + 按钮组），max-width 920px 居中。
 *   - 平板 769–1024px：输入/输出改单列上下堆叠（长 URL 阅读更友好），操作区纵向铺满、各自占满整行。
 *   - 手机 ≤768px：操作按钮改 2 列网格对齐、隐藏分隔线、文本框 16px 防 iOS 缩放。
 *   - 超小屏 ≤420px：隐藏标签胶囊、按钮更紧凑。
 */
@media (max-width: 1024px) {
    /* 平板：双列 → 单列，长 URL 不再被挤成横向滚动 */
    .ure-io { grid-template-columns: 1fr; }
    .ure-actions { flex-direction: column; align-items: stretch; }
    .ure-mode { width: 100%; }
    .ure-mode-btn { flex: 1 1 0; text-align: center; padding: 9px 8px; }
    .ure-ops { width: 100%; }
}
@media (max-width: 768px) {
    .ure-page { padding: 18px 14px 44px; }
    .ure-hero { padding: 16px 16px; margin-bottom: 18px; }
    .ure-hero-title { font-size: 21px; }
    .ure-hero-sub { font-size: 13px; }
    /* 操作按钮 2 列网格对齐，主操作（编码 / 解码）居中突出 */
    .ure-ops {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .ure-sep { display: none; }
    .ure-btn { width: 100%; justify-content: center; padding: 10px 12px; }
    /* 16px 防 iOS 聚焦缩放 */
    .ure-textarea { min-height: 150px; font-size: 16px; }
    .ure-table-card { padding: 14px 14px 16px; }
}
@media (max-width: 420px) {
    .ure-hero-tags { display: none; }
    .ure-btn { padding: 9px 10px; font-size: 12.5px; }
    .ure-ops { gap: 6px; }
}

/* 尊重系统的「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
    .ure-page *,
    .ure-toast {
        transition: none !important;
        animation: none !important;
    }
}

/* 打印：只留标题与两个文本框，方便把结果打印出来 */
@media print {
    .ure-hero-tags,
    .ure-actions,
    .ure-mode-tip,
    .ure-opts,
    .ure-status,
    .ure-table-card,
    .ure-note,
    .ure-toast,
    .ure-sep { display: none !important; }
    .ure-page { max-width: none; padding: 0; }
    .ure-io { grid-template-columns: 1fr; }
    .ure-textarea {
        min-height: 120px;
        border-color: #999;
        background: #fff;
        color: #000;
    }
}