/* Local Stitch calibration for the three learning views. */
[hidden]{display:none!important}
html,body{width:100%;max-width:100%;overflow-x:hidden}
.is-embedded{scrollbar-width:none}.is-embedded::-webkit-scrollbar{display:none}
.is-embedded .app-shell{width:100%;max-width:none}
.is-embedded main{padding-left:12px;padding-right:12px}
.is-embedded .bottom-nav{width:100%;max-width:none}
.app-shell,main,.view{min-width:0;max-width:100%}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.topbar{grid-template-columns:1fr 38px auto;gap:8px;min-height:56px;padding:8px 16px}
.brand img{width:32px;height:32px}.brand b{font-size:16px;line-height:20px}.brand small{line-height:13px}
.app-shell[data-active-page="vocabulary"] .brand small{display:none}
.head-action{display:grid;width:38px;height:38px;place-items:center;font-size:0}.head-action svg{width:22px;height:22px}
.app-shell[data-active-page="study"] .topbar,.app-shell[data-active-page="account"] .topbar{display:none}
.summary-card{grid-template-columns:36px minmax(0,1fr) auto;padding:14px;box-shadow:0 2px 8px rgba(0,74,198,.05)}
.summary-card>div:nth-child(2){min-width:0}.summary-card h1{overflow-wrap:anywhere}
.summary-icon{width:36px;height:36px;border-radius:12px;font-size:0}.summary-icon svg{width:20px;height:20px}
.summary-card h1 em{padding:2px 6px}.summary-card p{margin-top:2px}
.summary-card button{display:flex;height:32px;align-items:center;gap:5px;border-radius:8px}.summary-card button svg{width:15px;height:15px}
.search>svg{position:absolute;top:13px;left:13px;width:18px;height:18px;color:#667085}
.filter-rail,.scene-rail{gap:6px;margin:10px 0}.filter-rail button,.scene-rail button{display:flex;min-height:30px;align-items:center;gap:4px;padding:0 12px}.filter-rail button svg{width:14px;height:14px}
.filter-rail,.scene-rail{max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.filter-rail::-webkit-scrollbar,.scene-rail::-webkit-scrollbar{display:none}
.word-list{min-width:0}.word-card{min-width:0;max-width:100%;overflow:hidden;border-radius:12px}
.word-head{flex-wrap:wrap;align-items:flex-start}.word-title{min-width:140px;flex:1 1 140px}.word-title h2{font-size:16px;overflow-wrap:anywhere}
.speak{width:24px;height:24px;flex:none}.speak svg{width:15px;height:15px}
.word-actions{flex:0 0 auto;gap:6px}.word-actions button{display:flex;min-width:0;height:28px;align-items:center;justify-content:center;gap:4px;padding:0 9px;font-size:11px;white-space:nowrap}.word-actions svg{width:15px;height:15px}
.word-actions .star.is-active svg{fill:currentColor}
.meaning-note{margin:8px 0 0!important;color:#53657f;font-size:11px!important;line-height:1.4!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.meaning-source{display:inline-block;margin-top:2px;color:#667085;font-size:9px;text-decoration:none}.meaning-source:hover{text-decoration:underline}
.context-preview{min-width:0;margin-top:10px;padding:12px;border-radius:8px}.context-preview p{overflow-wrap:anywhere;line-height:1.4}.context-preview p+p{font-size:12px}
.source-line{min-width:0;max-width:100%;flex-wrap:wrap;margin-top:10px}.source-line>span{min-width:0;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.source-line>span{display:flex;align-items:center;gap:4px;line-height:1}
.source-origin span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.source-line a{display:inline-flex;height:24px;align-items:center;justify-content:center;gap:3px;padding:0 8px;font-size:11px;line-height:1}.source-line svg{display:block;width:13px;height:13px;flex:none}
.scene-select{max-width:100%;height:24px;padding:0 7px}
.more-menu{max-width:100%}
.lexical-definitions{margin-top:8px;padding:8px;border-radius:8px;color:#475467;background:#f1f5ff;font-size:11px;line-height:1.5}
.lexical-credit{margin:8px 0 0;color:#667085;font-size:10px}.lexical-credit a{color:#0755ce}
.bottom-nav{min-height:calc(64px + env(safe-area-inset-bottom));max-width:100%}
.study-head{padding:6px 2px 4px}.study-head h1{font-size:20px}.study-head select{height:38px;padding:0 12px}
.study-actions button,.done-card button{display:flex;align-items:center;justify-content:center;gap:8px}.study-actions svg{width:19px;height:19px}
.page-title{min-height:44px}.page-title h1{font-size:16px}
/* 个人中心的卡片头／小块图标：卡片头 18px、小块里 15px、胶囊按钮 13px，
   与 Stitch 那版（w-8 图标块 + text-[15px] 小图标）对齐。 */
.avatar{font-size:0}.avatar svg{width:24px;height:24px}
.head-icon svg{width:18px;height:18px}
.row-icon svg{width:15px;height:15px}
.primary-wide svg{width:18px;height:18px}
.pill-button svg{width:13px;height:13px}
/* 三格：返回按钮、标题、右侧的等宽留白。认证页头原来第三格是「遇到问题？」那个
   span（删了，它没有 id 也没有处理器），留白留着才能让标题落在真正的中线上。 */
.auth-page-head{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;min-height:54px}
.auth-page-head>b{text-align:center;font-size:16px}
.back-button{position:static;display:grid;width:42px;height:42px;place-items:center;color:#0b1c30;box-shadow:0 2px 8px rgba(15,23,42,.06)}.back-button svg{width:22px;height:22px}
.auth-hero img{width:64px;height:64px;margin-top:16px;border-radius:20px}.auth-hero h1{margin-top:14px;font-size:22px}
.trial{display:flex;align-items:center;gap:7px;margin-top:18px;padding:12px;color:#475467;font-weight:400}.trial svg,.trial b{color:var(--blue)}
.auth-view:has(.auth-tabs[hidden]) .trial,.auth-view:has(.auth-tabs[hidden]) .auth-tabs{display:none}
.auth-view:has(.auth-tabs[hidden]) .auth-hero img{width:56px;height:56px;margin-top:14px}
/* 认证页的两个次要入口（创建账号 / 忘记密码 / 设置密码）：与条款入口同一套小胶囊，
   字号比正文小一档。它们原先各自在 form 的 grid 里占一整行，还用着浏览器的默认字号
   （13px 多，比周围 12px 的正文还大），两个岔口看起来比提交按钮还重。 */
.auth-alt{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:-4px}
.auth-alt button{padding:5px 11px;border:1px solid #dbe6fb;border-radius:999px;color:var(--blue);background:#f2f6ff;font-size:10px;font-weight:600;line-height:1.4}
.auth-alt button:hover{background:#e5eeff}
.auth-alt button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.legal-copy{margin:18px 12px 0;color:#737686;text-align:center;font-size:10px;line-height:1.6}
/* 常见支持（Stitch「个人中心」第 5 块）：一条一个小白卡，标题前一颗 Q 徽标，
   右边一个箭头，答案用一条浅色分隔线隔开并缩进到跟标题左缘对齐
   （徽标 20px + 间距 8px = 28px）。箭头在展开时翻转。 */
.support{padding:18px 0}
.support-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.support-head h3{margin:0;color:#737686;font-size:12px;font-weight:500;letter-spacing:.04em}
/* 「反馈与功能建议」是一个 `<button>`（它现在真的在页内做事，不再是去另一个地方），
   所以要自己把按钮的默认边框、底色、内边距清掉，看起来仍是一行小灰字。 */
.support-help{position:relative;display:flex;align-items:center;gap:2px;padding:0;border:0;color:#737686;background:none;font-size:11px}
.support-help svg{width:13px;height:13px;color:var(--blue)}
.faq{display:grid;gap:8px;margin-top:12px}
.faq details{padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(11,28,48,.05)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#0b1c30;cursor:pointer;list-style:none}
/* Chrome 与 Firefox 各有一个折叠三角要自己去（`list-style` 只管得动后者）。 */
.faq summary::-webkit-details-marker{display:none}
.faq-badge{display:grid;width:20px;height:20px;flex:none;place-items:center;border-radius:999px;color:var(--blue);background:rgba(7,85,206,.1);font-size:11px;font-weight:700;line-height:1}
.faq-title{flex:1;min-width:0;font-size:13px;font-weight:600;line-height:20px}
.faq-chevron{width:18px;height:18px;flex:none;color:#737686;transition:transform .2s}
.faq details[open] .faq-chevron{transform:rotate(180deg)}
.faq-answer{margin:10px 0 0;padding:10px 0 0 28px;border-top:1px solid var(--soft);color:#434655;font-size:12px;line-height:1.625}
.support-foot{margin-top:16px;padding-bottom:8px;text-align:center}
/* 三份公开文档入口：设计稿里是**一行灰字**，中间用圆点隔开（不是三个按钮）。
   以前它们只有一句 `color:var(--blue)`，三个词挨在一起；中间试过做成 chip，
   但那一行读起来像三个并排的按钮，与「条款」这件事的分量不匹配。 */
.legal-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0}
.legal-links a{padding:0;border:0;color:#737686;background:none;font-size:12px;text-decoration:none}
.legal-links a:hover{color:var(--blue)}
.legal-links span{color:#c3c6d7}
.legal-brand{margin:6px 0 0;color:rgba(115,118,134,.7);font-size:11px}
/* 夹在句子中间的那几个（注册页的「继续即代表您同意…」、两个勾选框里的书名号）
   保持**行内链接**的样子：它们属于那句话，跳出句子变成按钮反而读不通。
   与上面那条写在一起——同一批条款入口，改样式时只改到一半才是真难看。 */
.legal-copy a,.agree-row a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.bottom-nav button{justify-items:center}.bottom-nav button svg{width:22px;height:22px}
/* 登录后的个人中心：操作留在身份行，会员有效期使用后端权益而非会话期限。 */
#accountCard{padding:14px 16px}
#accountCard>*+*{margin-top:10px}
#accountCard .identity-head{grid-template-columns:48px minmax(0,1fr) auto;gap:10px}
#accountCard .identity-head.has-divider{padding-bottom:12px}
#accountCard .identity-text p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#accountCard .identity-line b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.identity-actions{display:flex;align-items:center;gap:5px}
.identity-actions button{display:flex;height:30px;align-items:center;justify-content:center;gap:5px;padding:0 8px;border:1px solid var(--line);border-radius:8px;color:var(--blue);background:#fff;font-size:11px;font-weight:600;white-space:nowrap}
.identity-actions button svg{width:14px;height:14px}
.identity-actions #signOut{width:30px;padding:0;color:#667085}
.identity-actions #signOut:hover{border-color:#ffd1cc;color:#ba1a1a;background:#fff8f7}
.identity-actions button:focus-visible,.backup-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.membership-row{display:flex;min-height:28px;align-items:center;gap:8px;color:#42526b;font-size:11px}
.membership-row>span{display:flex;align-items:center;gap:5px;margin-right:auto;white-space:nowrap}
.membership-row svg{width:14px;height:14px;color:var(--blue)}
.membership-row strong{color:#0b1c30;font-size:12px;white-space:nowrap}
.membership-row em{padding:3px 6px;border-radius:6px;color:var(--blue);background:#e8f0ff;font-size:10px;font-style:normal;white-space:nowrap}
/* 续费按钮紧贴在「剩余 N 天」右边：它和那个天数是同一件事的两半，所以做成一块小胶囊，
   与 `em` 同一套配色，而不是又一个通栏主按钮——通栏主按钮会跟下面「去支付宝开通」抢主次。
   「设置密码」那一格用的是同一套（`.row-action`）：两处都是「行尾一个小动作」，
   各写一份的话迟早会长成两种样子。 */
.renew-now,.row-action{flex:none;height:22px;padding:0 8px;border:1px solid #adc9fb;border-radius:999px;color:var(--blue);background:#fff;font-size:10px;font-weight:700;white-space:nowrap}
.renew-now:hover,.row-action:hover{border-color:var(--blue);background:#eef4ff}
.renew-now:focus-visible,.row-action:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.membership-hint{padding:8px 10px;border:1px solid var(--line);border-radius:8px;color:#667085;background:#f4f7ff;font-size:10px;line-height:1.4}
/* 未登录那张卡里的额度行。登录后那张的间距由 `#accountCard>*+*` 管，这里自己来一条。 */
#loginCard .membership-row{margin-top:12px}

/* 注册必须勾选的那两项（`#agreeField`）。两个 <label> 各自包住一个勾选框，
   所以要在 `form label` 与 `form input` 那两条通栏样式之外单独说一遍尺寸：
   勾选框不是输入框，撑满一行、高 50px 就点不着了。
   注意 `form label span` 那条把 span 做成了 1fr + 112px 的两列（那是验证码那一格用的），
   这里的 span 要还原成普通文本块，否则说明文字会被挤成两截。 */
.agree-row{display:grid;gap:9px}
.agree-row label{display:flex;align-items:flex-start;gap:8px;color:#475467;font-size:11px;line-height:1.5}
.agree-row label span{display:block;flex:1;min-width:0}
.agree-row label input{width:16px;height:16px;flex:none;margin:1px 0 0;padding:0;border-radius:4px;accent-color:var(--blue)}

/* 设置密码之前必须先说的那句话（见 `mobile.js` 的 reset 态）：服务端会撤销
   这个账号的**全部**会话，包括眼下这台设备，所以它必须在按钮之前就把代价说清，
   用警告色而不是普通说明色。 */
.reset-notice{padding:9px 10px;border:1px solid #f7d9a4;border-radius:8px;color:#a35b00;background:#fffaf1;line-height:1.5}
.backup-link{display:flex;align-items:center;gap:5px;padding:3px 0;border:0;color:var(--blue);background:none;font-size:10px}
.backup-link svg{width:13px;height:13px}
.cloud-last{display:block;margin-top:4px;color:#667085;font-size:10px}
#accountView .sync-detail:not([hidden]){margin-top:10px;padding:8px 10px;border-radius:8px;color:#a35b00;background:#fffaf1}
.status-pill[data-plan="subscribed"]{border-color:#adc9fb;color:var(--blue);background:#eef4ff;font-weight:700}
.status-pill[data-plan="subscribed"]::before{background:var(--blue)}

/* ---------------------------------------------------------------------------
   会员与开通（T09 阶段 C）

   这一块里所有的数字都是服务端给的字符串（`price.display` / `amount.display`），
   样式只负责把它们摆整齐。刻意不写「元」「¥」这类字：金额的单位由服务端定，
   界面上多一个字就多一处会跟服务端说法不一致的地方。
   --------------------------------------------------------------------------- */
#planCard{padding:14px 16px}
#planCard>*+*{margin-top:10px}
.plan-options{display:grid;gap:8px}
.plan-option{display:flex;height:auto;min-height:52px;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#f8faff;color:#0b1c30;text-align:left}
.plan-option:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.plan-option.is-selected{border-color:var(--blue);background:#eef4ff;box-shadow:0 0 0 1px var(--blue) inset}
.plan-option[disabled]{opacity:.55;cursor:not-allowed}
.plan-name{display:block;font-size:13px;font-weight:700}
.plan-desc{display:block;margin-top:2px;color:#667085;font-size:10px;font-weight:400;line-height:1.4}
/* 「首购 ¥x · 续费 ¥y」。两个价必须都写出来：只给一个数的话，续费那天收的另一个数
   就是一次「怎么和上次不一样」。 */
.plan-terms{display:block;margin-top:2px;color:#475467;font-size:10px;font-weight:400;line-height:1.4}
.plan-meta{display:grid;flex:none;justify-items:end;gap:2px}
.plan-price{flex:none;color:var(--blue);font-size:15px;font-weight:700;white-space:nowrap}
/* 划线原价压在现价上面一行，字号更小、颜色更淡：它是被比较的那个，不是要付的那个。 */
.plan-price-was{color:#98a2b3;font-size:10px;text-decoration:line-through;white-space:nowrap}
.plan-days{flex:none;color:#667085;font-size:10px}
.plan-state{margin:0;color:#667085;font-size:11px;line-height:1.5}
.plan-state[data-tone="error"]{padding:8px 10px;border:1px solid #ffd1cc;border-radius:8px;color:#ba1a1a;background:#fff8f7}
.plan-state[data-tone="ok"]{padding:8px 10px;border:1px solid #a7e6d4;border-radius:8px;color:#087c61;background:#f3fdfa}
/* 权益清单：文字全部来自服务端（`/membership/plans` 的 benefits），这里只管排版。 */
.plan-benefits{margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#f8faff;list-style:none;display:grid;gap:6px}
.plan-benefits[hidden]{display:none}
.plan-benefits li{display:flex;gap:7px;color:#42526b;font-size:11px;line-height:1.5}
.plan-benefits li::before{flex:none;width:14px;height:14px;margin-top:1px;border-radius:50%;background:rgba(7,85,206,.1);color:var(--blue);content:"✓";font-size:9px;font-weight:700;line-height:14px;text-align:center}
.pay-waiting{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#f8faff}
.pay-line{display:flex;min-height:24px;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#42526b}
.pay-line code{overflow:hidden;color:#0b1c30;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.pay-line strong{color:#0b1c30;font-size:12px}
.pay-line strong[data-tone="ok"]{color:var(--green)}
.pay-line strong[data-tone="muted"]{color:#667085}
.pay-hint{margin:6px 0 0;color:#667085;font-size:10px;line-height:1.5}
.pay-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.pay-actions button{height:36px;border:1px solid var(--line);border-radius:9px;color:var(--blue);background:#fff;font-size:11px;font-weight:600}
.pay-actions button:disabled{opacity:.55}

/* 推广有礼。码、本月额度与倒计时全部来自 `/me` 的 `invite` 一格（见 `mobile.js`）：
   这里只管摆整齐，一个数字都不算。 */
#inviteCard{padding:14px 16px}
#inviteCard>*+*{margin-top:10px}
.invite-lead{margin:0;color:#667085;font-size:11px;line-height:1.5}
.invite-code-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border:1px dashed #bad2f7;border-radius:12px;background:#f2f6ff}
/* 码是给人抄下来或转发的：等宽、字距拉开，读的时候不容易串行。 */
.invite-code{color:var(--blue);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:19px;font-weight:700;letter-spacing:.06em}
.invite-code-row .pill-button{flex:none}
.invite-rules{display:grid;gap:6px;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#f8faff;list-style:none}
.invite-rules li{color:#42526b;font-size:11px;line-height:1.5}
.invite-rules li b{margin-right:5px;color:#0b1c30}
.invite-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#42526b;font-size:11px}
.invite-badge{flex:none;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:700;white-space:nowrap}
.invite-badge[data-tone="open"]{color:var(--blue);background:#e5eeff}
/* 用完那一档要**看得出是「用完了」而不是「出错了」**：灰的，不是红的——
   每月一次是规则的一部分，不是一次失败。 */
.invite-badge[data-tone="used"]{color:#667085;background:#eef1f7}
.invite-reset{margin:0;color:#667085;font-size:10px;line-height:1.5}

/* 反馈与功能建议（Stitch 的对话稿）。整页对话：上面是往来记录，底部固定一条输入栏
   ——底部导航在这一页收起（`navigate()` 开头那行），那一条留给输入框。

   输入栏的定位与 `.bottom-nav` **逐字同一套**（`position:fixed` + `width:min(100%,430px)`
   + `margin:auto`）：`main` 在宽屏上居中于 430px 的应用壳里，而固定定位的元素脱离了
   文档流，不自己限宽就会横跨整个视口。 */
.feedback-view{padding:0}
/* 头部**不吸顶**：这一页上面还有那条全局顶栏（`.topbar`），两条都 `top:0` 的话，
   往下滚的时候这一条会盖住顶栏（同在 `z-index:5`，后面那个赢）。与其给一个
   「顶栏有多高」的魔法数，不如跟认证页那一颗返回键一样老实待在文档流里——
   输入栏才是这一页唯一需要固定的东西。 */
.feedback-head{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;padding:4px 0 8px;border-bottom:1px solid var(--line)}
.feedback-title{display:grid;min-width:0}
.feedback-title b{font-size:14px}
.feedback-title small{color:#737686;font-size:10px}
.feedback-stream{display:grid;gap:10px;padding:14px 0 10px}
/* 顶部那条提示是一条**说明**，不是「谁说的话」：居中、不带头像、浅底小字。 */
.chat-notice{margin:0;padding:9px 12px;border-radius:10px;color:#667085;background:#eef1f8;font-size:11px;line-height:1.55;text-align:center}
.chat-row{display:flex;align-items:flex-start;gap:8px}
.chat-row.from-user{justify-content:flex-end}
.chat-avatar{display:grid;width:28px;height:28px;flex:none;place-items:center;border-radius:50%;color:var(--blue);background:#e5eeff;font-size:11px;font-weight:700}
/* `white-space:pre-wrap`：正文是用 `textContent` 写进去的，换行在默认的 `normal`
   下会被折成一个空格——写的人分好的段就没了。 */
.chat-bubble{max-width:76%;padding:9px 12px;border-radius:14px;font-size:12.5px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}
.chat-row.from-team .chat-bubble{border:1px solid var(--line);border-top-left-radius:4px;color:#172033;background:#fff}
.chat-row.from-user .chat-bubble{border-top-right-radius:4px;color:#fff;background:var(--blue)}
.chat-time{margin:2px 0;color:#98a2b3;font-size:10px;text-align:center}
.feedback-state{margin:0;color:#667085;font-size:11px;line-height:1.5}
/* 空着的时候别占一行：这句在最底下（输入栏正上方），留一条空行会让整页看着没对齐。 */
.feedback-state:empty{display:none}
/* 输入栏。`mobile.css` 里 `form` 有一整套卡片样式（白底、圆角 18、投影、margin-top 16），
   下面这几条是把它逐项改回一根固定在底部的横条——不是漏改就会在输入框外面套一张白卡。 */
.feedback-composer{position:fixed;right:0;bottom:0;left:0;z-index:6;display:grid;grid-template-columns:minmax(0,1fr) 42px;width:min(100%,430px);gap:8px;margin:auto;padding:9px 14px calc(9px + env(safe-area-inset-bottom));border-top:1px solid var(--line);border-radius:0;background:rgba(255,255,255,.97);box-shadow:none;backdrop-filter:blur(16px)}
.feedback-composer input{height:40px;margin:0;padding:0 14px;border-radius:999px;background:#f1f5ff}
.feedback-composer button{display:grid;height:40px;place-items:center;border:0;border-radius:50%;color:#fff;background:var(--blue)}
.feedback-composer button:disabled{opacity:.5}
.feedback-composer svg{width:18px;height:18px}
/* 入口上的未读小红点：一个点，不带数字（那一行只有 11px，塞进数字会把「反馈与功能建议」
   挤断行）。条数写在 `aria-label` 里，读屏能读到。 */
.feedback-dot{position:absolute;top:-1px;right:-7px;width:7px;height:7px;border-radius:50%;background:#e5484d}
/* 反馈页固定了底部输入栏，`main` 那 82px 的下边距是为底部导航留的——两者高度接近，
   不必再加一层；只有真的很窄的屏上输入栏会换行，那时才需要多一点。 */
@media(max-width:360px){.feedback-composer{grid-template-columns:minmax(0,1fr) 38px}.chat-bubble{max-width:84%}}
@media(max-width:360px){#accountCard .identity-head{grid-template-columns:42px minmax(0,1fr) auto;gap:7px}#accountCard .avatar{width:42px;height:42px}.identity-actions button{padding:0 6px;font-size:10px}.membership-row{flex-wrap:wrap}.membership-row>span{margin-right:0}.plan-option{flex-wrap:wrap}.pay-actions{grid-template-columns:1fr}}