:root {
  --brand: #5577f3;
  --brand-strong: #3f5de0;
  --brand-soft: #eef2ff;
  --blue-soft: #eaf7ff;
  --mint-soft: #e9f9f2;
  --orange-soft: #fff4e8;
  --danger-soft: #fff0f1;
  --text: #172033;
  --text-2: #59657a;
  --text-3: #8b95a7;
  --line: #e9edf4;
  --surface: #ffffff;
  --page: #f5f7fb;
  --shadow: 0 10px 30px rgba(49, 72, 122, 0.10);
  --shadow-soft: 0 4px 18px rgba(45, 66, 112, 0.07);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--text); background: #e9edf5; }
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.prototype-stage { min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 32px; padding: 28px; }
.prototype-panel, .notes-panel { width: 248px; max-height: 812px; overflow: auto; border-radius: 24px; padding: 22px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); }
.prototype-brand { display: flex; align-items: center; gap: 12px; }
.prototype-logo { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 13px; color: #fff; font-weight: 800; background: linear-gradient(135deg, #5b7cff, #75d8ff); }
.prototype-brand div { display: flex; flex-direction: column; gap: 2px; }
.prototype-brand small, .prototype-panel p { color: var(--text-3); font-size: 12px; line-height: 1.6; }
.prototype-groups { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.prototype-group { display: flex; flex-direction: column; gap: 7px; }
.prototype-group strong { font-size: 12px; color: var(--text-3); }
.prototype-links { display: flex; flex-wrap: wrap; gap: 7px; }
.prototype-link { min-height: 32px; padding: 7px 10px; border: 0; border-radius: 10px; color: var(--text-2); background: #f3f5f9; cursor: pointer; }
.prototype-link.is-active { color: var(--brand-strong); background: var(--brand-soft); font-weight: 650; }
.notes-panel { display: flex; flex-direction: column; gap: 12px; }
.notes-kicker { color: var(--brand); font-size: 12px; font-weight: 700; }
.notes-panel h2, .notes-panel p { margin: 0; }
.notes-panel > p, .notes-section p, .notes-section li { color: var(--text-2); font-size: 13px; line-height: 1.65; }
.notes-section { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.notes-section ul { margin: 0; padding-left: 18px; }

.phone-frame { position: relative; width: 399px; height: 836px; flex: 0 0 auto; padding: 12px; border-radius: 42px; background: #111827; box-shadow: 0 28px 70px rgba(24,34,55,.28); }
.phone-screen { width: 375px; height: 812px; overflow: hidden; border-radius: 31px; background: var(--page); }
.screen-root { position:relative; width:100%; height:100%; overflow:hidden; }
.mini-app { height: 100%; display: flex; flex-direction: column; background: var(--page); }
.status-bar { height: 44px; flex: 0 0 auto; padding: 12px 18px 0; display: flex; align-items: flex-start; justify-content: space-between; font-size: 12px; font-weight: 650; background: var(--surface); }
.status-icons { display: flex; align-items: center; gap: 5px; }
.signal { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.signal i { display:block; width: 2px; border-radius: 1px; background: var(--text); }
.signal i:nth-child(1){height:4px}.signal i:nth-child(2){height:6px}.signal i:nth-child(3){height:8px}.signal i:nth-child(4){height:10px}
.battery { width: 18px; height: 9px; border: 1.5px solid var(--text); border-radius: 2px; padding: 1px; }
.battery::after { content:""; display:block; height:100%; border-radius:1px; background:var(--text); }
.nav-bar { min-height: 48px; flex: 0 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; background: var(--surface); }
.nav-title { font-size: 17px; font-weight: 750; }
.nav-side { min-width: 66px; display: flex; align-items: center; gap: 8px; }
.nav-side.is-right { justify-content: flex-end; }
.capsule { height: 30px; padding: 0 10px; display: flex; align-items: center; gap: 9px; border: 1px solid #dde2ea; border-radius: 16px; background: rgba(255,255,255,.9); }
.capsule-dot { width: 15px; letter-spacing: 1px; font-weight: 800; font-size: 11px; }
.capsule-line { width: 1px; height: 14px; background: #dfe4ec; }
.capsule-circle { width: 14px; height: 14px; border: 2px solid var(--text); border-radius: 50%; }
.icon-button { width: 40px; height: 40px; border: 0; border-radius: 50%; display:flex; align-items:center; justify-content:center; color:var(--text); background:transparent; cursor:pointer; }
.back-icon { font-size: 27px; font-weight: 300; line-height: 1; }
.page-scroll { min-height: 0; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 12px 16px 108px; scrollbar-width: none; }
.page-scroll::-webkit-scrollbar { display:none; }
.page-scroll.with-action { padding-bottom: 96px; }
.hero-card { display: flex; flex-direction: column; gap: 15px; padding: 18px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #516ff0 0%, #6e8afa 52%, #76c8ef 100%); box-shadow: 0 12px 28px rgba(69,96,214,.24); overflow: hidden; }
.hero-top, .section-head, .row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hero-kicker { display:flex; align-items:center; gap:7px; font-size:12px; opacity:.86; }
.hero-card h1 { margin:0; font-size:23px; line-height:1.35; letter-spacing:-.5px; }
.hero-card p { margin:0; max-width:265px; font-size:13px; line-height:1.65; color:rgba(255,255,255,.82); }
.hero-progress { display:flex; flex-direction:column; gap:7px; }
.progress-labels { display:flex; justify-content:space-between; font-size:11px; color:rgba(255,255,255,.8); }
.progress-track { height:6px; border-radius:6px; background:rgba(255,255,255,.23); overflow:hidden; }
.progress-track span { display:block; width:46%; height:100%; border-radius:6px; background:#fff; }
.section { display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.section-head h2 { margin:0; font-size:17px; }
.section-head button, .text-link { padding:4px 0; border:0; color:var(--brand); font-size:12px; background:transparent; }
.action-list { display:flex; flex-direction:column; gap:10px; }
.action-card { width:100%; min-height:74px; padding:14px; display:flex; align-items:center; gap:12px; text-align:left; border:0; border-radius:16px; background:var(--surface); box-shadow:var(--shadow-soft); cursor:pointer; }
.action-icon, .quick-icon, .avatar, .empty-icon { flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.action-icon { width:42px; height:42px; border-radius:14px; background:var(--brand-soft); font-size:20px; }
.action-body { min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }
.action-body strong { font-size:14px; }
.action-body span { color:var(--text-3); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.action-arrow { color:#b0b8c7; font-size:20px; }
.quick-row { display:flex; gap:10px; }
.quick-card { min-width:0; flex:1; min-height:104px; padding:14px 10px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; border:0; border-radius:16px; text-align:left; background:var(--surface); box-shadow:var(--shadow-soft); cursor:pointer; }
.quick-icon { width:34px; height:34px; border-radius:12px; background:var(--blue-soft); }
.quick-card strong { font-size:13px; }
.quick-card span { color:var(--text-3); font-size:11px; line-height:1.45; }
.search-bar { height:42px; padding:0 13px; display:flex; align-items:center; gap:9px; border-radius:13px; background:#edf0f5; color:var(--text-3); font-size:13px; }
.filter-row { display:flex; gap:8px; overflow-x:auto; padding:10px 0 2px; scrollbar-width:none; }
.filter-chip { flex:0 0 auto; height:32px; padding:0 13px; border:1px solid var(--line); border-radius:16px; color:var(--text-2); background:var(--surface); }
.filter-chip.is-active { border-color:var(--brand); color:var(--brand); background:var(--brand-soft); font-weight:650; }
.job-list { display:flex; flex-direction:column; gap:11px; margin-top:14px; }
.job-card { padding:16px; display:flex; flex-direction:column; gap:11px; border-radius:17px; background:var(--surface); box-shadow:var(--shadow-soft); }
.job-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.job-card h3 { margin:0; font-size:15px; line-height:1.45; }
.salary { flex:0 0 auto; color:#f17852; font-size:13px; font-weight:700; }
.job-meta { display:flex; flex-wrap:wrap; gap:7px; color:var(--text-2); font-size:12px; }
.tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag { padding:5px 8px; border-radius:7px; color:var(--text-2); background:#f3f5f8; font-size:10px; }
.job-foot { padding-top:11px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); color:var(--text-3); font-size:11px; }
.match-badge { color:var(--brand); font-weight:700; }
.detail-hero { margin:0 -16px; padding:18px 16px 20px; display:flex; flex-direction:column; gap:12px; background:var(--surface); }
.detail-hero h1 { margin:0; font-size:21px; line-height:1.4; }
.detail-company { display:flex; align-items:center; gap:10px; }
.company-logo { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:13px; color:#fff; font-weight:800; background:linear-gradient(135deg,#222d4a,#7285ad); }
.detail-company div { display:flex; flex-direction:column; gap:4px; font-size:13px; }
.detail-company span { color:var(--text-3); font-size:11px; }
.detail-stats { display:flex; gap:8px; }
.detail-stat { min-width:0; flex:1; padding:10px; display:flex; flex-direction:column; gap:4px; border-radius:12px; background:#f5f7fb; }
.detail-stat span { color:var(--text-3); font-size:10px; }
.detail-stat strong { font-size:12px; }
.content-card { padding:16px; display:flex; flex-direction:column; gap:12px; border-radius:17px; background:var(--surface); box-shadow:var(--shadow-soft); }
.content-card h2, .content-card h3, .content-card p { margin:0; }
.content-card h2 { font-size:16px; }
.content-card h3 { font-size:14px; }
.content-card p, .content-card li { color:var(--text-2); font-size:13px; line-height:1.75; }
.content-card ul { margin:0; padding-left:18px; }
.source-note { padding:10px 12px; display:flex; align-items:flex-start; gap:8px; border-radius:11px; color:#68748a; background:#f5f7fa; font-size:11px; line-height:1.5; }
.score-ring { width:82px; height:82px; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; background:conic-gradient(var(--brand) 0 86%,#e9edf5 86%); position:relative; }
.score-ring::after { content:""; position:absolute; inset:7px; border-radius:50%; background:#fff; }
.score-ring strong,.score-ring span { position:relative; z-index:1; }
.score-ring strong { font-size:24px; color:var(--brand); }
.score-ring span { color:var(--text-3); font-size:9px; }
.score-summary { min-width:0; flex:1; display:flex; flex-direction:column; gap:7px; }
.score-summary h2 { font-size:18px; }
.score-summary p { color:var(--text-2); font-size:12px; line-height:1.55; }
.insight-list { display:flex; flex-direction:column; gap:10px; }
.insight-row { display:flex; align-items:flex-start; gap:10px; }
.insight-mark { width:23px; height:23px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:8px; color:#2f9d70; background:var(--mint-soft); font-size:12px; font-weight:800; }
.insight-mark.is-gap { color:#d17738; background:var(--orange-soft); }
.insight-row div { display:flex; flex-direction:column; gap:3px; }
.insight-row strong { font-size:13px; }
.insight-row span { color:var(--text-3); font-size:11px; line-height:1.5; }
.segmented { display:flex; padding:3px; border-radius:12px; background:#e9edf4; }
.segment { min-height:36px; flex:1; border:0; border-radius:10px; color:var(--text-2); background:transparent; font-size:12px; }
.segment.is-active { color:var(--text); font-weight:700; background:#fff; box-shadow:0 2px 8px rgba(38,52,79,.08); }
.chat-page { padding:8px 12px 156px; }
.chat-context { margin:0 4px 12px; padding:10px 12px; display:flex; align-items:center; gap:9px; border-radius:13px; color:var(--brand-strong); background:var(--brand-soft); font-size:11px; }
.chat-context button { margin-left:auto; border:0; color:var(--brand); background:transparent; }
.message-list { display:flex; flex-direction:column; gap:14px; }
.message { display:flex; gap:8px; align-items:flex-start; }
.message.is-user { justify-content:flex-end; }
.message-avatar { width:30px; height:30px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:11px; color:#fff; background:linear-gradient(135deg,#5577f3,#72c9ef); font-size:12px; }
.message-bubble { max-width:278px; padding:12px 13px; border-radius:5px 16px 16px 16px; color:var(--text-2); background:#fff; box-shadow:var(--shadow-soft); font-size:13px; line-height:1.65; }
.message.is-user .message-bubble { border-radius:16px 5px 16px 16px; color:#fff; background:var(--brand); }
.result-card { margin-left:38px; padding:14px; display:flex; flex-direction:column; gap:10px; border:1px solid #dfe5ff; border-radius:16px; background:#fff; }
.result-card h3,.result-card p { margin:0; }
.result-card h3 { font-size:14px; }
.result-card p { color:var(--text-2); font-size:12px; line-height:1.6; }
.result-actions { display:flex; gap:8px; }
.result-actions button { min-height:36px; flex:1; border:0; border-radius:10px; color:var(--brand); background:var(--brand-soft); font-size:11px; font-weight:700; }
.composer { min-height:66px; margin-top:-148px; position:relative; z-index:6; padding:8px 12px; display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); background:#fff; }
.composer + .tab-bar { margin-top:0; }
.composer-more,.composer-send { width:40px; height:40px; flex:0 0 auto; border:0; border-radius:50%; }
.composer-more { color:var(--text-2); background:#f0f3f7; font-size:20px; }
.composer-send { color:#fff; background:var(--brand); }
.composer-input { min-height:40px; flex:1; padding:11px 12px; border-radius:14px; color:var(--text-3); background:#f1f3f7; font-size:12px; }
.file-list { display:flex; flex-direction:column; gap:10px; }
.file-card { min-height:76px; padding:13px; display:flex; align-items:center; gap:12px; border:2px solid transparent; border-radius:16px; background:#fff; box-shadow:var(--shadow-soft); }
.file-card.is-selected { border-color:var(--brand); background:#fafbff; }
.file-icon { width:42px; height:50px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:9px; color:#fff; background:linear-gradient(160deg,#5c7df3,#83a3ff); font-weight:800; }
.file-info { min-width:0; flex:1; display:flex; flex-direction:column; gap:5px; }
.file-info strong { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-info span { color:var(--text-3); font-size:10px; }
.radio-dot { width:20px; height:20px; flex:0 0 auto; border:2px solid #c9d0dc; border-radius:50%; }
.file-card.is-selected .radio-dot { border:6px solid var(--brand); }
.upload-card { min-height:88px; padding:16px; display:flex; align-items:center; justify-content:center; gap:10px; border:1.5px dashed #b8c6f8; border-radius:16px; color:var(--brand); background:var(--brand-soft); font-size:13px; font-weight:700; }
.form-section { display:flex; flex-direction:column; gap:9px; }
.form-section > label { font-size:13px; font-weight:700; }
.select-field { min-height:48px; padding:0 13px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:13px; background:#fff; font-size:13px; }
.select-field span { color:var(--text-3); }
.choice-row { display:flex; gap:9px; }
.choice-card { min-height:70px; flex:1; padding:11px; border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; gap:5px; color:var(--text-2); background:#fff; }
.choice-card.is-selected { border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }
.choice-card strong { font-size:13px; }
.choice-card span { font-size:10px; line-height:1.45; }
.interview-stage { height:100%; padding:16px; display:flex; flex-direction:column; background:linear-gradient(180deg,#f0f4ff,#f7f8fb 42%); }
.interview-head { display:flex; align-items:center; justify-content:space-between; color:var(--text-2); font-size:11px; }
.question-card { margin-top:28px; padding:18px; display:flex; flex-direction:column; gap:12px; border-radius:20px; background:#fff; box-shadow:var(--shadow); }
.question-index { color:var(--brand); font-size:11px; font-weight:700; }
.question-card h2 { margin:0; font-size:20px; line-height:1.55; }
.question-card p { margin:0; color:var(--text-3); font-size:11px; line-height:1.55; }
.record-area { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.record-button { width:82px; height:82px; border:8px solid rgba(85,119,243,.12); border-radius:50%; color:#fff; background:var(--brand); font-size:28px; box-shadow:0 10px 26px rgba(70,95,220,.28); }
.record-button.is-recording { background:#ec5d6c; animation:pulse 1.2s infinite; }
.record-area strong { font-size:14px; }
.record-area span { color:var(--text-3); font-size:11px; }
@keyframes pulse { 50% { box-shadow:0 0 0 12px rgba(236,93,108,.12); } }
.metric-row { display:flex; gap:9px; }
.metric-card { min-width:0; flex:1; padding:13px 10px; display:flex; flex-direction:column; gap:5px; border-radius:14px; background:#f5f7fb; }
.metric-card strong { font-size:19px; }
.metric-card span { color:var(--text-3); font-size:10px; }
.timeline { display:flex; flex-direction:column; }
.timeline-item { min-height:72px; display:flex; gap:11px; }
.timeline-axis { width:22px; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; }
.timeline-dot { width:10px; height:10px; margin-top:4px; border:3px solid var(--brand); border-radius:50%; background:#fff; }
.timeline-line { width:1px; flex:1; background:#dfe4ee; }
.timeline-content { flex:1; display:flex; flex-direction:column; gap:5px; }
.timeline-content strong { font-size:13px; }
.timeline-content span { color:var(--text-3); font-size:11px; line-height:1.45; }
.profile-hero { padding:16px; display:flex; align-items:center; gap:12px; border-radius:18px; color:#fff; background:linear-gradient(135deg,#566fdc,#74b9e9); }
.avatar { width:54px; height:54px; border:3px solid rgba(255,255,255,.6); border-radius:50%; background:#fff; color:var(--brand); font-size:20px; font-weight:800; }
.profile-hero div { display:flex; flex-direction:column; gap:5px; }
.profile-hero span { font-size:11px; color:rgba(255,255,255,.76); }
.menu-card { display:flex; flex-direction:column; border-radius:17px; overflow:hidden; background:#fff; box-shadow:var(--shadow-soft); }
.menu-row { min-height:52px; padding:0 14px; display:flex; align-items:center; gap:11px; border:0; border-bottom:1px solid var(--line); text-align:left; background:#fff; }
.menu-row:last-child { border-bottom:0; }
.menu-row > span:first-child { width:25px; color:var(--brand); text-align:center; }
.menu-row strong { flex:1; font-size:13px; }
.menu-row em { color:var(--text-3); font-size:11px; font-style:normal; }
.benefit-card { padding:17px; display:flex; flex-direction:column; gap:13px; border:2px solid transparent; border-radius:18px; background:#fff; box-shadow:var(--shadow-soft); }
.benefit-card.is-selected { border-color:var(--brand); }
.benefit-title { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.benefit-title div { display:flex; flex-direction:column; gap:4px; }
.benefit-title strong { font-size:16px; }
.benefit-title span { color:var(--text-3); font-size:10px; }
.price { color:var(--brand); }
.price b { font-size:24px; }
.benefit-list { display:flex; flex-wrap:wrap; gap:7px; }
.benefit-list span { width:calc(50% - 4px); color:var(--text-2); font-size:11px; }
.order-card { padding:15px; display:flex; flex-direction:column; gap:10px; border-radius:16px; background:#fff; box-shadow:var(--shadow-soft); }
.order-status { color:var(--brand); font-size:11px; font-weight:700; }
.order-status.is-pending { color:#d17738; }
.order-status.is-refund { color:var(--text-3); }
.modal-backdrop { position:absolute; inset:0; z-index:20; display:flex; align-items:flex-end; background:rgba(17,25,43,.48); }
.bottom-sheet { width:100%; padding:20px 18px calc(18px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:15px; border-radius:24px 24px 0 0; background:#fff; }
.bottom-sheet h2,.bottom-sheet p { margin:0; }
.bottom-sheet h2 { font-size:18px; }
.bottom-sheet p { color:var(--text-2); font-size:12px; line-height:1.6; }
.pay-summary { padding:13px; display:flex; align-items:center; justify-content:space-between; border-radius:13px; background:#f5f7fb; }
.pay-summary strong { font-size:18px; }
.wechat-pay { min-height:48px; display:flex; align-items:center; gap:10px; }
.wechat-icon { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:11px; color:#fff; background:#13b862; }
.login-hero { padding:26px 12px 18px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.brand-mark { width:70px; height:70px; border-radius:25px; object-fit:contain; filter:drop-shadow(0 10px 16px rgba(66,100,207,.16)); }
.login-hero h1,.login-hero p { margin:0; }
.login-hero h1 { font-size:22px; }
.login-hero p { color:var(--text-2); font-size:12px; line-height:1.65; }
.login-points { display:flex; flex-direction:column; gap:10px; }
.login-point { padding:12px; display:flex; align-items:center; gap:10px; border-radius:14px; background:#fff; }
.login-point span:first-child { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:11px; background:var(--brand-soft); }
.login-point div { display:flex; flex-direction:column; gap:3px; }
.login-point strong { font-size:13px; }
.login-point small { color:var(--text-3); font-size:10px; }
.empty-state { min-height:480px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; }
.empty-icon { width:88px; height:88px; border-radius:30px; color:var(--brand); background:var(--brand-soft); font-size:36px; }
.empty-state h2,.empty-state p { margin:0; }
.empty-state h2 { font-size:18px; }
.empty-state p { max-width:250px; color:var(--text-3); font-size:12px; line-height:1.6; }
.tab-bar { height:82px; flex:0 0 auto; margin-top:-82px; position:relative; z-index:5; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); display:flex; align-items:flex-start; justify-content:space-around; border-top:1px solid rgba(221,226,235,.86); background:rgba(255,255,255,.96); backdrop-filter:blur(15px); }
.tab-item { width:20%; min-height:54px; border:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--text-3); background:transparent; cursor:pointer; }
.tab-item.is-active { color:var(--brand); font-weight:700; }
.tab-icon { height:23px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.tab-item span:last-child { font-size:10px; }
.ai-tab .tab-icon { width:44px; height:44px; margin-top:-24px; border:4px solid var(--page); border-radius:50%; color:#fff; background:linear-gradient(135deg,#5577f3,#72c9ef); box-shadow:0 6px 16px rgba(70,93,205,.28); }
.ai-tab span:last-child { margin-top:1px; }
.primary-button, .secondary-button, .danger-button { min-height:46px; padding:0 17px; border-radius:14px; font-weight:700; cursor:pointer; }
.primary-button { border:0; color:#fff; background:linear-gradient(135deg,var(--brand),#6b8cff); box-shadow:0 7px 16px rgba(74,99,219,.23); }
.secondary-button { border:1px solid #dfe4ee; color:var(--text); background:#fff; }
.danger-button { border:0; color:#d84a59; background:var(--danger-soft); }
.fixed-action { position:relative; z-index:4; min-height:76px; margin-top:-76px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); display:flex; gap:10px; border-top:1px solid var(--line); background:rgba(255,255,255,.97); }
.fixed-action .primary-button { flex:1; }
.fixed-action .secondary-button { width:52px; padding:0; font-size:19px; }
.fixed-action .secondary-button.is-wide {
  width: 92px;
  flex: 0 0 92px;
  padding: 0 14px;
  border-color: #dce3ff;
  color: var(--brand-strong);
  background: var(--brand-soft);
  font-size: 13px;
  white-space: nowrap;
}
.toast { position:fixed; left:50%; bottom:40px; z-index:50; transform:translate(-50%,20px); padding:10px 14px; border-radius:12px; color:#fff; background:rgba(23,32,51,.9); font-size:13px; opacity:0; pointer-events:none; transition:.22s ease; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }

@media (max-width: 980px) {
  .prototype-stage { padding:0; }
  .prototype-panel, .notes-panel { display:none; }
  .phone-frame { width:375px; height:100dvh; min-height:667px; padding:0; border-radius:0; background:transparent; box-shadow:none; }
  .phone-screen { width:375px; height:100dvh; min-height:667px; border-radius:0; }
}
@media (max-width: 375px) {
  .phone-frame, .phone-screen { width:100vw; }
}