/* ════════════════════════════════════════════════════════════
   爱麒麟界面基建 aql-ui.css · v1.0 (batch12 · D-151)
   依据: 《爱麒麟界面设计宪章 v1.0》。只在被 <link> 的页面生效。
   构成: ① 设计令牌  ② 和谐层(把旧页拉回同一基线)  ③ 组件  ④ 状态
   ════════════════════════════════════════════════════════════ */

/* ── ① 设计令牌 ── */
:root{
  --aql-blue:#2e5c8a; --aql-blue-deep:#234a72; --aql-blue-wash:rgba(46,92,138,.08);
  --aql-ink:#2b3440; --aql-ink-soft:#5b6b7b; --aql-ink-faint:#8fa6bb;
  --aql-paper:#faf8f3; --aql-paper-card:#fffdf8; --aql-line:#e9eef4; --aql-line-soft:#d9e2ec;
  --aql-ok:#2e7d56; --aql-warn:#b7791f; --aql-bad:#b0413e;
  --aql-r-lg:18px; --aql-r:14px; --aql-r-sm:12px;
  --aql-shadow:0 4px 18px rgba(46,92,138,.08); --aql-shadow-lift:0 10px 34px rgba(46,92,138,.18);
  --aql-font:"Noto Sans SC","Noto Sans CJK SC","PingFang SC",-apple-system,system-ui,sans-serif;
}

/* ── ② 和谐层(温和地把旧页拉回基线: 字体/底色/按钮/卡片/输入;不动布局) ── */
body:not(.aql-lite){font-family:var(--aql-font)!important;background:var(--aql-paper);color:var(--aql-ink);
  -webkit-tap-highlight-color:rgba(46,92,138,.12)}
::selection{background:rgba(46,92,138,.18)}
:focus-visible{outline:2px solid var(--aql-blue);outline-offset:2px}
body:not(.aql-lite) :is(.btn,button.btn,.btn-primary,.btn-green,.btn-manual,.btn-ble,a.btn){
  background:var(--aql-blue)!important;border:1px solid var(--aql-blue)!important;color:#fff!important;
  border-radius:var(--aql-r)!important;cursor:pointer;transition:background .15s}
  /* v1.6(教训38): 和谐层只许上漆,永禁动骨——display/padding/min-height/font-size 一律不进毯式规则 */
body:not(.aql-lite) :is(.btn,.btn-primary):active{background:var(--aql-blue-deep)!important}
body:not(.aql-lite) :is(.btn-secondary,.btn-ghost,.btn-link,.btn-view){
  background:#fff!important;border:1px solid var(--aql-line-soft)!important;color:var(--aql-blue)!important;
  border-radius:var(--aql-r)!important;cursor:pointer}
body:not(.aql-lite) :is(.card,.panel,.box){border-radius:16px!important;box-shadow:var(--aql-shadow)!important;
  border:1px solid var(--aql-line)!important;background:var(--aql-paper-card)!important}
body:not(.aql-lite) :is(input,select,textarea){border-radius:var(--aql-r-sm)!important;border:1px solid var(--aql-line-soft)!important;
  font-family:var(--aql-font)!important;background:#fff;color:var(--aql-ink)}
body:not(.aql-lite) :is(input,select,textarea):focus{border-color:var(--aql-blue)!important;outline:none}
/* v1.5 (D-156): 页头染色两规则已废止——真机尸检: 蛮横的后代染白把健康页五按钮打成白底白字。
   页面色彩统一不再用面规则轰炸,改走"变量映射"(逐页 html:root 覆写其自有调色变量至章程令牌)。 */
/* v1.7(教训38扩条): 孤色规则永禁——h1-3与a的单边染色已废止(蓝底蓝字"空键"/深头深字两案元凶)。
   染色必须底/字成对出现(如 .btn 组),或不染。 */

/* ── ③ 组件(新代码用 .aql-* 显式取用) ── */
.aql-card{background:var(--aql-paper-card);border:1px solid var(--aql-line);border-radius:16px;
  box-shadow:var(--aql-shadow);padding:16px}
.aql-chip{padding:9px 16px;border-radius:100px;border:1px solid var(--aql-line-soft);font-size:13.5px;
  color:var(--aql-blue);background:#fff;display:inline-flex;align-items:center;min-height:40px;cursor:pointer}
.aql-chip.on{background:var(--aql-blue);color:#fff;border-color:var(--aql-blue);font-weight:600}
.aql-ribbon{height:3px;background:var(--aql-blue);border-radius:3px}

/* ── ④ 状态(加载/空/错: 是设计,不是占位) ── */
.aql-loading{display:flex;align-items:center;gap:10px;color:var(--aql-ink-faint);font-size:13.5px;padding:18px}
.aql-loading::before{content:"";width:16px;height:16px;border-radius:50%;
  border:2px solid var(--aql-line-soft);border-top-color:var(--aql-blue);animation:aqlspin .8s linear infinite}
@keyframes aqlspin{to{transform:rotate(360deg)}}
.aql-empty{padding:26px 18px;text-align:center;color:var(--aql-ink-soft);font-size:14px;line-height:1.8}
.aql-empty .aql-empty-act{color:var(--aql-blue);font-weight:600}
.aql-error{padding:14px 16px;border-radius:var(--aql-r);background:#fdf2f1;border:1px solid #f3d6d4;
  color:var(--aql-bad);font-size:13.5px;line-height:1.7}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── v1.1 (batch13 · D-152) 间距阶 + 字号控件 ── */
:root{--aql-s1:4px;--aql-s2:8px;--aql-s3:12px;--aql-s4:16px;--aql-s5:24px;--aql-s6:32px}
.aql-fontctl{position:fixed;left:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:9990;
  width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--aql-line-soft);
  box-shadow:var(--aql-shadow);display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--aql-blue);cursor:pointer;font-weight:600;user-select:none}
.aql-fontctl:active{background:var(--aql-blue-wash)}

/* ── v1.2 (batch14a · D-153) 多形态: 大屏/桌面/横屏自由切换 ── */
html{background:var(--aql-paper)}
@media (min-width:768px){
  body:not(.aql-wide){max-width:760px;margin:0 auto;min-height:100vh;
    box-shadow:0 0 0 1px var(--aql-line),0 12px 40px rgba(46,92,138,.06)}
  /* v1.3: .aql-wide = 宽幅形态(着陆/营销页) —— 保留全宽英雄区,仍继承令牌/组件/字号钮 */
  .aqlsh{left:50%;right:auto;bottom:auto;top:50%;width:440px;max-width:92vw;border-radius:18px;
    transform:translate(-50%,-46%);opacity:0;
    transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
  .aqlsh.on{transform:translate(-50%,-50%);opacity:1}
  .aqlsh-ribbon{border-radius:18px 18px 0 0}
  .aqlsh-grab{display:none}
}
@media (max-height:500px){
  .aqlsh{max-height:94vh}
  .aqlsh-title{margin-top:8px}
}
.aql-fontctl{bottom:calc(var(--aql-fontctl-bottom,14px) + env(safe-area-inset-bottom))}

/* ── D-236 呼吸役 ───────────────────────────────
   入场一息 / 按下有应 / 空态请柬插画 / 转环复活
   全部受上方 prefers-reduced-motion 总闸节制 */

/* 1) 入场一息: 整页轻柔浮现(只动透明度, 不动 transform, 不破 fixed 定位) */
@keyframes aqlbreathein{from{opacity:0}to{opacity:1}}
body{animation:aqlbreathein .35s ease-out}

/* 2) 按下有应: 一切可点之物按下微缩(即按即应, 不设过渡, 不覆盖各页自有 transition) */
button:active,[role="button"]:active,.chip:active,.aql-chip:active,.float:active,.lenscard a:active{transform:scale(.97)}

/* 3) 空态请柬插画: 麒灵深蓝线稿小芽 + 轻浮(空态是请柬, 不是道歉) */
@keyframes aqlfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.empty::before,.aql-empty::before{content:'';display:block;width:84px;height:84px;margin:2px auto 10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 88' fill='none' stroke='%232e5c8a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M44 70 V44'/%3E%3Cpath d='M44 52 C44 40 34 34 24 34 C24 46 33 52 44 52 Z'/%3E%3Cpath d='M44 46 C44 32 54 26 66 26 C66 40 56 46 44 46 Z'/%3E%3Cpath d='M20 70 H68'/%3E%3Ccircle cx='58' cy='64' r='1.6' fill='%232e5c8a' stroke='none'/%3E%3Ccircle cx='28' cy='64' r='1.6' fill='%232e5c8a' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.9;animation:aqlfloat 3.2s ease-in-out infinite}
/* 页面自带图标/图片的空态不叠加(认 :has 的内核生效; 不认的优雅降级) */
.empty:has(.big)::before,.empty:has(img)::before,.empty:has(svg)::before{display:none}

/* 4) 转环复活: 凡 .loading 自动长出转圈(吃既有 aqlspin) */
.loading::before{content:'';display:inline-block;width:13px;height:13px;margin-right:7px;vertical-align:-2px;border:2px solid var(--aql-line-soft,#e9eef4);border-top-color:var(--aql-blue,#2e5c8a);border-radius:50%;animation:aqlspin .8s linear infinite}
/* ── END D-236 ── */