/* ============================================================
   全国律师、律所查询 — yicool.com.cn /tools/acla
   主蓝 #136ce9 · 页面背景 #f6f7fa · 白色圆角内容卡
   三端断点：>=992px 桌面 / 768-991px 平板 / <768px 手机
   ============================================================ */

/* 占满整个电脑端屏幕：覆盖全站 .app / .main-content 的宽度限制 */
body.page-acla-full .app { max-width: 100%; }
body.page-acla-full .main-content { max-width: 100%; border-right: 0; }
.acla-page { max-width: 1080px; margin: 0 auto; padding: 24px 16px 48px; }

/* ---------- 标题区 ---------- */
.acla-hero {
    margin-bottom: 18px; padding: 26px 28px;
    background: linear-gradient(135deg, #eaf2ff 0%, #f6f7fa 55%, #edf4ff 100%);
    border: 1px solid #e2ebfb; border-radius: 14px;
}
.acla-title {
    font-size: 26px; font-weight: 700; color: #1b1f24;
    display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
}
.acla-title::before {
    content: ''; width: 8px; height: 22px; border-radius: 4px;
    background: linear-gradient(180deg, #136ce9, #4d9fff); flex: none;
}
.acla-sub { font-size: 14px; color: #5c6572; margin: 0; line-height: 1.8; max-width: 880px; }
.acla-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.acla-badge {
    font-size: 12px; color: #136ce9; background: rgba(19, 108, 233, .08);
    border: 1px solid rgba(19, 108, 233, .18); border-radius: 999px;
    padding: 4px 12px; line-height: 1.5;
}

/* ---------- 查询面板 ---------- */
.acla-panel {
    background: #fff; border-radius: 12px; padding: 20px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
}
.acla-row { margin-bottom: 16px; }
.acla-row:last-of-type { margin-bottom: 0; }
.acla-label {
    display: block; font-size: 13px; font-weight: 600; color: #3d4654;
    margin-bottom: 7px;
}
.acla-seg { display: flex; gap: 10px; }
.acla-seg-btn {
    flex: 0 0 auto; padding: 10px 26px; border-radius: 9px; font-size: 15px;
    font-weight: 500; border: 1.5px solid #dfe3ea; background: #f8f9fb; color: #5c6572;
    cursor: pointer; font-family: inherit; transition: all .15s;
}
.acla-seg-btn:hover { border-color: #b9c6e0; color: #136ce9; }
.acla-seg-btn.active {
    background: #136ce9; border-color: #136ce9; color: #fff;
    box-shadow: 0 2px 8px rgba(19, 108, 233, .28);
}

.acla-kw-wrap { position: relative; }
.acla-input {
    width: 100%; box-sizing: border-box; padding: 12px 14px;
    border: 1.5px solid #e0e4eb; border-radius: 9px; font-size: 15px;
    color: #1b1f24; background: #fff; font-family: inherit; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.acla-input:focus { border-color: #136ce9; box-shadow: 0 0 0 3px rgba(19, 108, 233, .12); }
.acla-input::placeholder { color: #b3bac6; }
.acla-kw-tip { font-size: 12px; color: #9aa2b0; margin-top: 6px; }

.acla-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acla-plat {
    display: flex; align-items: flex-start; gap: 10px; text-align: left;
    padding: 13px 14px; border: 1.5px solid #e0e4eb; border-radius: 10px;
    background: #fbfcfe; cursor: pointer; font-family: inherit;
    transition: all .15s; position: relative;
}
.acla-plat:hover { border-color: #b9c6e0; }
.acla-plat.active {
    border-color: #136ce9; background: #f0f6ff;
    box-shadow: 0 0 0 3px rgba(19, 108, 233, .10);
}
.acla-plat-icon { font-size: 20px; line-height: 1.4; flex: none; }
.acla-plat-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acla-plat-info b { font-size: 14px; color: #1b1f24; font-weight: 600; }
.acla-plat-info i { font-size: 12px; color: #8a93a2; font-style: normal; line-height: 1.5; }
.acla-plat-check {
    position: absolute; top: 10px; right: 10px; width: 18px; height: 18px;
    border-radius: 50%; background: #136ce9; color: #fff; font-size: 11px;
    display: none; align-items: center; justify-content: center;
}
.acla-plat.active .acla-plat-check { display: flex; }

.acla-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.acla-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 22px; border-radius: 9px; font-size: 14px; font-weight: 500;
    border: 1.5px solid transparent; cursor: pointer; font-family: inherit;
    transition: all .15s; white-space: nowrap;
}
.acla-btn-primary {
    background: #136ce9; color: #fff;
    box-shadow: 0 2px 8px rgba(19, 108, 233, .28);
}
.acla-btn-primary:hover { background: #0f5fd0; }
.acla-btn-ghost { background: #fff; border-color: #dfe3ea; color: #3d4654; }
.acla-btn-ghost:hover { border-color: #b9c6e0; color: #136ce9; }

.acla-result {
    margin-top: 14px; padding: 10px 14px; border-radius: 9px;
    background: #f0f6ff; border: 1px solid #d3e4fb; color: #3d4654;
    font-size: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.acla-result a { color: #136ce9; font-weight: 500; text-decoration: none; }
.acla-result a:hover { text-decoration: underline; }

/* ---------- 平台对比 ---------- */
.acla-compare { margin-top: 26px; }
.acla-sec-title { font-size: 18px; font-weight: 700; color: #1b1f24; margin: 0 0 14px; }
.acla-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.acla-card {
    background: #fff; border-radius: 12px; padding: 18px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    display: flex; flex-direction: column;
}
.acla-card-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.acla-card-icon {
    width: 44px; height: 44px; flex: none; border-radius: 11px;
    background: linear-gradient(135deg, #136ce9, #4d9fff); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.acla-card-head h4 { font-size: 15px; font-weight: 600; color: #1b1f24; margin: 0 0 3px; }
.acla-card-head p { font-size: 12px; color: #9aa2b0; margin: 0; }
.acla-card-list { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.acla-card-list li {
    font-size: 13px; color: #5c6572; line-height: 1.6; padding-left: 18px; position: relative;
}
.acla-card-list li::before { content: '·'; position: absolute; left: 4px; color: #136ce9; font-weight: 700; }
.acla-card-link {
    margin-top: auto; font-size: 13px; font-weight: 500; color: #136ce9;
    text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.acla-card-link:hover { text-decoration: underline; }

/* ---------- 使用引导 ---------- */
.acla-guide { margin-top: 26px; }
.acla-steps { margin: 0 0 16px; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.acla-steps li { font-size: 14px; color: #5c6572; line-height: 1.75; }
.acla-steps li b { color: #1b1f24; }
.acla-notice {
    background: #fff; border: 1px solid #eef0f4; border-left: 3px solid #136ce9;
    border-radius: 9px; padding: 14px 16px;
}
.acla-notice h4 { font-size: 14px; font-weight: 600; color: #1b1f24; margin: 0 0 6px; }
.acla-notice p { font-size: 13px; color: #8a93a2; line-height: 1.75; margin: 0; }

/* ---------- 站内实时查询（iframe） ---------- */
.acla-panel-head { margin-bottom: 14px; }
.acla-panel-title { font-size: 16px; color: #1b1f24; margin: 0 0 4px; }
.acla-panel-sub { font-size: 12.5px; color: #8a93a2; margin: 0; line-height: 1.65; }

.acla-live { margin-bottom: 24px; }
.acla-live-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.acla-live-badge { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; background: #eaf3ff; color: #136ce9; font-weight: 600; }
.acla-live-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.acla-live-seg { display: flex; border: 1px solid #dfe4ee; border-radius: 9px; overflow: hidden; background: #fff; }
.acla-live-seg-btn { padding: 8px 16px; border: 0; background: transparent; color: #8a93a2; font-size: 13.5px; cursor: pointer; transition: all .15s; }
.acla-live-seg-btn:hover { color: #136ce9; }
.acla-live-seg-btn.active { background: #136ce9; color: #fff; }
.acla-live-kw { display: flex; gap: 8px; flex: 1; min-width: 280px; }
.acla-live-input { flex: 1; min-width: 160px; padding: 9px 12px; border: 1px solid #dfe4ee; border-radius: 8px; font-size: 13.5px; background: #fff; color: #1b1f24; }
.acla-live-input:focus { outline: none; border-color: #136ce9; box-shadow: 0 0 0 3px rgba(19, 108, 233, .12); }
.acla-live-tip { font-size: 12.5px; color: #8a6d1a; background: #fff8e6; border: 1px solid #f0dfae; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; line-height: 1.65; }
.acla-live-frame { border: 1px solid #e4e8f0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .05); }
.acla-live-frame iframe { display: block; width: 100%; height: 740px; border: 0; }

@media (max-width: 767px) {
    .acla-live-bar { align-items: stretch; }
    .acla-live-kw { flex-direction: column; min-width: 0; }
    .acla-live-frame { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .acla-live-frame iframe { width: 1100px; max-width: none; height: 680px; }
}

/* ---------- 复制成功提示 ---------- */
.acla-toast {
    position: fixed; left: 50%; bottom: 48px; transform: translateX(-50%) translateY(16px);
    background: rgba(23, 26, 33, .94); color: #fff; font-size: 13px;
    padding: 10px 18px; border-radius: 8px; z-index: 9999;
    opacity: 0; pointer-events: none; transition: all .22s;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.acla-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 暗色适配 ---------- */
@media (prefers-color-scheme: dark) {
    body.page-acla-full .acla-panel, body.page-acla-full .acla-card,
    body.page-acla-full .acla-notice { background: #171a21; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
    body.page-acla-full .acla-panel-title { color: #e6e9ef; }
    body.page-acla-full .acla-live-frame { background: #171a21; border-color: #2a2f3a; }
    body.page-acla-full .acla-live-input { background: #1e222b; border-color: #2f3542; color: #e6e9ef; }
    body.page-acla-full .acla-live-seg { background: #1e222b; border-color: #2f3542; }
    body.page-acla-full .acla-live-seg-btn { color: #a7afbd; }
    body.page-acla-full .acla-live-seg-btn.active { background: #136ce9; color: #fff; }
    body.page-acla-full .acla-title, body.page-acla-full .acla-sec-title,
    body.page-acla-full .acla-card-head h4, body.page-acla-full .acla-notice h4,
    body.page-acla-full .acla-plat-info b, body.page-acla-full .acla-steps li b { color: #e6e9ef; }
    body.page-acla-full .acla-sub, body.page-acla-full .acla-card-list li,
    body.page-acla-full .acla-steps li { color: #a7afbd; }
    body.page-acla-full .acla-hero {
        background: linear-gradient(135deg, #101a2e 0%, #171a21 55%, #0f1a30 100%);
        border-color: #222a3a;
    }
    body.page-acla-full .acla-input {
        background: #0f1117; color: #e6e9ef; border-color: #2a3140;
    }
    body.page-acla-full .acla-input:focus { border-color: #4d9fff; }
    body.page-acla-full .acla-seg-btn { background: #0f1117; border-color: #2a3140; color: #a7afbd; }
    body.page-acla-full .acla-seg-btn.active { background: #136ce9; border-color: #136ce9; color: #fff; }
    body.page-acla-full .acla-plat { background: #0f1117; border-color: #2a3140; }
    body.page-acla-full .acla-plat.active { background: #10203a; border-color: #4d9fff; }
    body.page-acla-full .acla-plat-info i { color: #6d7686; }
    body.page-acla-full .acla-btn-ghost { background: #0f1117; border-color: #2a3140; color: #a7afbd; }
    body.page-acla-full .acla-btn-ghost:hover { border-color: #4d9fff; color: #4d9fff; }
    body.page-acla-full .acla-result { background: #10203a; border-color: #1d3a63; color: #a7afbd; }
    body.page-acla-full .acla-badge { color: #4d9fff; background: rgba(77, 159, 255, .1); border-color: rgba(77, 159, 255, .22); }
    body.page-acla-full .acla-notice p { color: #6d7686; }
}

/* ---------- 平板（768-991） ---------- */
@media (max-width: 991px) {
    .acla-platforms { grid-template-columns: 1fr; }
    .acla-compare-grid { grid-template-columns: 1fr; }
    .acla-hero { padding: 22px; }
}

/* ---------- 手机（<768） ---------- */
@media (max-width: 767px) {
    .acla-page { padding: 16px 12px 40px; }
    .acla-hero { padding: 18px 16px; }
    .acla-title { font-size: 21px; }
    .acla-sub { font-size: 13px; }
    .acla-badges { gap: 6px; }
    .acla-badge { font-size: 11px; padding: 3px 10px; }
    .acla-panel { padding: 16px 14px; }
    .acla-seg { display: grid; grid-template-columns: 1fr 1fr; }
    .acla-seg-btn { padding: 11px 0; text-align: center; font-size: 14px; }
    .acla-input { font-size: 16px; padding: 11px 12px; }
    .acla-actions { display: grid; grid-template-columns: 1fr; }
    .acla-btn { width: 100%; padding: 12px 0; }
    .acla-card { padding: 15px; }
    .acla-compare, .acla-guide { margin-top: 22px; }
    .acla-steps { padding-left: 18px; gap: 6px; }
    .acla-steps li { font-size: 13px; }
}