/* ============================================================
   《其他测评》独立问卷 · 扫码后手机模拟演示页
   复用 mobile.css 的手机浏览器外壳，仅补充演示台与 iframe 样式
   ============================================================ */

body.survey-shell .dn-mark { background: linear-gradient(135deg, #a9dcff, #3b93c9); color: #08263c; }
body.survey-shell .demo-nav .dn-tag { color: #9fd0f5; border-color: rgba(140, 200, 255, .35); }

/* iframe 承载扫码后的独立问卷页 */
.ss-viewport { position: relative; overflow: hidden; }
.ss-viewport iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #f6f8f9; }
.ss-url-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 左侧二维码卡 */

/* 左侧链路 / 快捷操作 */
.ss-block { padding: 16px 14px 4px; }
.ss-block h5 { font-size: 10.5px; letter-spacing: 1px; color: #6f9a8e; margin: 0 0 10px; font-weight: 600; }
.ss-flow { list-style: none; padding: 0; margin: 0; }
.ss-flow li { display: flex; gap: 9px; align-items: flex-start; padding: 7px 0; border-bottom: 1px dashed rgba(255, 255, 255, .07); }
.ss-flow li:last-child { border-bottom: none; }
.ss-flow i { width: 20px; height: 20px; border-radius: 6px; background: rgba(120, 190, 255, .15); color: #8fc9f5; font-size: 9.5px; font-style: normal; font-weight: 800; display: grid; place-items: center; flex: none; }
.ss-flow b { display: block; font-size: 11px; color: #d5eae2; font-weight: 600; }
.ss-flow span { display: block; font-size: 9.5px; color: #7d9c94; line-height: 1.6; margin-top: 3px; }
.ss-links { display: flex; flex-direction: column; gap: 6px; }
.ss-links a, .ss-links button { font-size: 11px; color: #b6d1c9; border: 1px solid rgba(255, 255, 255, .13); border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; gap: 7px; text-align: left; background: transparent; }
.ss-links a:hover, .ss-links button:hover { background: rgba(47, 208, 143, .13); color: #fff; }

/* 右侧隔离架构说明 */
.ss-info { padding: 16px; }
.ss-info .ss-kicker { font-size: 9.5px; letter-spacing: 1.4px; color: #7fd6ab; font-weight: 700; }
.ss-info h3 { font-size: 15px; margin: 9px 0 10px; }
.ss-info p { font-size: 11px; line-height: 1.9; color: #9dbbb2; margin: 0 0 14px; }
.ss-info h5 { font-size: 10.5px; letter-spacing: 1px; color: #6f9a8e; margin: 16px 0 8px; font-weight: 600; }
.ss-split div { border-radius: 10px; padding: 10px; font-size: 10.5px; line-height: 1.85; margin-bottom: 8px; }
.ss-split b { font-size: 11px; }
.ss-split .main { background: rgba(47, 208, 143, .09); border: 1px solid rgba(47, 208, 143, .2); color: #a9e9c8; }
.ss-split .indep { background: rgba(110, 180, 240, .1); border: 1px solid rgba(110, 180, 240, .24); color: #b6ddf7; }
.ss-info ul { padding-left: 16px; margin: 0; }
.ss-info li { font-size: 10.5px; line-height: 1.9; color: #9dbbb2; }
.ss-warn { margin-top: 14px; padding: 10px; border-radius: 10px; background: rgba(255, 180, 110, .08); border: 1px solid rgba(255, 180, 110, .22); font-size: 10px; line-height: 1.85; color: #e5c79f; }

@media (max-width: 1100px) { .ss-info { display: none; } }