/* ============================================================
   Cypher 控制台（mock_closed_loop）统一自适应层 v1.0 (2026-09-02)
   与品牌官网 responsive.css 同一套断点体系：
   ≤1024 平板 / ≤820 大屏手机 / ≤640 / ≤480 / ≤360 小屏
   注入方式：<link rel="stylesheet" href="/responsive.css">
   必须挂在各页自身样式（app.css / 内联 <style>）之后。
   零品牌视觉改动：只做流式折叠、防溢出、触控友好。
   ============================================================ */

/* ---------- 0. 全局防护 ---------- */
img, video, svg, canvas { max-width: 100%; height: auto; }
pre, code { overflow-x: auto; max-width: 100%; }

/* ---------- 1. portal.html 控制台首页 ---------- */
@media (max-width: 1024px) {
    .shell { width: min(1360px, calc(100% - 24px)); }
    .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 820px) {
    .topbar { flex-wrap: wrap; gap: 10px; }
    .sys-pill { display: none; }
    .quick { gap: 8px; }
    .qbtn { flex: 1 1 calc(50% - 8px); justify-content: center; min-width: 140px; }
    .heroes { grid-template-columns: 1fr !important; }
    .sidecol { grid-template-columns: repeat(2, 1fr); position: static; }
    .layout { grid-template-columns: 1fr !important; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
    .brand small { display: none; }
    .footer { flex-direction: column; gap: 6px; }
    .qbtn { flex-basis: 100%; }
}
@media (max-width: 480px) {
    .shell { width: min(1360px, calc(100% - 20px)); padding-top: 14px; }
    .grid { grid-template-columns: 1fr !important; }
    .sidecol { grid-template-columns: 1fr; }
    .top-link { display: none; }
}
@media (max-width: 360px) {
    .qbtn { padding: 10px 12px; font-size: 12.5px; }
    .hero { min-height: 0; padding: 14px; }
    .hero h3 { font-size: 15px; }
}

/* ---------- 2. ops.html 总后台（真实类名：.shell/.side/.main/.topbar/.content/.kv/.au-item/.ds-row/.cols2/.tbl/.modal/.drawer/.grid-kpi） ---------- */
@media (max-width: 1024px) {
    /* 宽屏双列 → 侧栏收窄 */
    .shell { grid-template-columns: 216px minmax(0, 1fr); }
    .grid-kpi { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
}
@media (max-width: 900px) {
    /* 侧栏布局 → 单列，侧栏横排为顶部导航 */
    .shell { display: block; }
    .side { position: static; width: auto !important; height: auto !important; overflow-x: auto; }
    .side #nav { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px 12px; }
    .side #nav a, .side #nav button { white-space: nowrap; }
    .main { width: 100% !important; max-width: 100% !important; }
    .topbar { flex-wrap: wrap; gap: 8px; }
    .cols2 { grid-template-columns: 1fr !important; }
    /* 表格保留列宽，外层滚动 */
    .tbl-wrap, .panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tbl { min-width: 560px; }
    /* 复杂行（设备审核 5 列）折叠 */
    .au-item { grid-template-columns: 48px minmax(0, 1fr) auto !important; grid-auto-rows: auto; row-gap: 4px; }
    .kv { grid-template-columns: 96px minmax(0, 1fr) !important; }
    .modal { width: min(560px, calc(100vw - 24px)) !important; max-width: 100% !important; }
    .drawer { width: min(460px, calc(100vw - 24px)) !important; max-width: 100% !important; }
}
@media (max-width: 640px) {
    .side #nav { padding: 6px 8px; }
    .main, .content { padding-left: 10px !important; padding-right: 10px !important; }
    .kv { grid-template-columns: 84px minmax(0, 1fr) !important; }
    .au-item { grid-template-columns: 1fr !important; }
    .tbl { min-width: 480px; }
}
@media (max-width: 480px) {
    .login-box { width: min(360px, calc(100vw - 24px)) !important; }
    .grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .tbl { min-width: 440px; }
    .kpi b, .kpi .v { font-size: 15px; }
}
@media (max-width: 360px) {
    .grid-kpi { grid-template-columns: 1fr !important; }
    .kv { grid-template-columns: 1fr !important; }
}


/* ---------- 3. partner.html 机构后台（真实类名：.funnel-row/.scene-row，scene-row 自带 700px 折叠） ---------- */
@media (max-width: 820px) {
    .funnel-row { grid-template-columns: 84px minmax(0, 1fr) 48px !important; }
}
@media (max-width: 480px) {
    .funnel-row { grid-template-columns: 1fr !important; row-gap: 2px; }
}

/* ---------- 4. care 用户端：app.css 已有响应式层，无需补丁 ---------- */

/* ---------- 5. 动效减弱 ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}