/* 相术测算统一样式 - 面相/手相共用 */
:root {
    --ink:#27231d; --muted:#746b5e; --paper:#f5efe2; --red:#8d2824; --red-dark:#6f1f1c;
    --line:rgba(73,59,43,.16); --gold:#b8860b; --green:#2d6a4f;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Serif SC","Songti SC",SimSun,serif; }
a { color:inherit; text-decoration:none; }

.app-shell { width:min(100%,480px); min-height:100vh; margin:0 auto; padding:max(16px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom)); }

/* 顶部导航 */
.top-bar { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.back-btn { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:rgba(255,252,245,.7); font-size:18px; cursor:pointer; }
.top-title { flex:1; }
.top-title h1 { margin:0; font-size:20px; letter-spacing:.1em; }
.top-title small { color:var(--muted); font-size:11px; letter-spacing:.08em; }

/* 卡片容器 */
.card { background:rgba(255,252,245,.72); border:1px solid var(--line); border-radius:16px 4px 16px 4px; padding:18px; margin-bottom:14px; }
.card h2 { margin:0 0 12px; font-size:17px; letter-spacing:.08em; display:flex; align-items:center; gap:8px; }
.card h2::before { content:""; width:4px; height:18px; background:var(--red); border-radius:2px; }

/* 拍照/上传区域 */
.capture-area { position:relative; width:100%; aspect-ratio:3/4; background:#1a1a1a; border-radius:12px; overflow:hidden; margin-bottom:14px; }
.capture-area video, .capture-area canvas, .capture-area img { width:100%; height:100%; object-fit:cover; display:block; }
.capture-area .placeholder { position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.5); text-align:center; font-size:14px; line-height:1.8; }
.capture-area .guide-overlay { position:absolute; inset:0; pointer-events:none; width:100%; height:100%; }
.capture-area .scan-line { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--red),transparent); animation:scan 2s ease-in-out infinite; }
@keyframes scan { 0%,100%{top:10%;} 50%{top:90%;} }

/* 按钮组 */
.btn-row { display:flex; gap:10px; margin-bottom:14px; }
.btn { flex:1; padding:14px 16px; border:none; border-radius:12px 4px 12px 4px; font-size:15px; font-family:inherit; letter-spacing:.08em; cursor:pointer; transition:all .2s; }
.btn-primary { background:linear-gradient(120deg,var(--red-dark),var(--red)); color:#fff8eb; box-shadow:0 6px 18px rgba(111,31,28,.25); }
.btn-primary:active { transform:scale(.97); }
.btn-secondary { background:rgba(255,252,245,.8); color:var(--ink); border:1px solid var(--line); }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* 文件上传隐藏 */
.file-input { display:none; }

/* 测量结果 */
.metrics-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.metric-item { padding:12px; background:rgba(141,40,36,.05); border-radius:10px; border-left:3px solid var(--red); }
.metric-item .label { font-size:11px; color:var(--muted); margin-bottom:4px; }
.metric-item .value { font-size:18px; font-weight:700; color:var(--red); }
.metric-item .value small { font-size:11px; font-weight:400; color:var(--muted); margin-left:2px; }

/* 分析结论 */
.conclusion-list { list-style:none; padding:0; margin:0; }
.conclusion-list li { padding:10px 0; border-bottom:1px dashed var(--line); display:flex; gap:10px; }
.conclusion-list li:last-child { border-bottom:none; }
.conclusion-list .icon { flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; font-size:14px; }
.conclusion-list .icon.good { background:rgba(45,106,79,.12); color:var(--green); }
.conclusion-list .icon.warn { background:rgba(184,134,11,.12); color:var(--gold); }
.conclusion-list .icon.bad { background:rgba(141,40,36,.1); color:var(--red); }
.conclusion-list .text { flex:1; font-size:13px; line-height:1.7; }
.conclusion-list .text strong { color:var(--ink); }

/* 分类标题样式 */
.conclusion-list .category-header {
    padding:14px 0 8px;
    border-bottom:2px solid var(--red);
    margin-bottom:4px;
    border-bottom-style:solid;
}
.conclusion-list .category-header > div {
    display:flex;
    align-items:center;
    gap:8px;
}
.conclusion-list .category-header .cat-icon {
    font-size:18px;
}
.conclusion-list .category-header .cat-title {
    font-size:15px;
    color:var(--red);
    letter-spacing:.08em;
    font-weight:700;
}
.conclusion-list .category-header .cat-count {
    font-size:11px;
    color:var(--muted);
    margin-left:auto;
}

/* 十二宫/八卦宫位图 */
.palace-map { position:relative; width:100%; aspect-ratio:1; background:rgba(255,252,245,.5); border-radius:12px; border:1px solid var(--line); }
.palace-grid { position:absolute; inset:8px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:4px; }
.palace-cell { display:grid; place-items:center; border:1px solid rgba(141,40,36,.15); border-radius:8px; font-size:12px; text-align:center; padding:4px; background:rgba(255,255,255,.4); }
.palace-cell.active { background:rgba(141,40,36,.12); border-color:var(--red); color:var(--red); font-weight:700; }
.palace-cell .palace-name { font-size:11px; font-weight:700; }
.palace-cell .palace-tag { font-size:9px; color:var(--muted); }

/* 加载状态 */
.loading { display:flex; align-items:center; justify-content:center; gap:10px; padding:20px; color:var(--muted); font-size:13px; }
.spinner { width:20px; height:20px; border:2px solid var(--line); border-top-color:var(--red); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }

/* 状态提示 */
.status-bar { padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.status-bar.info { background:rgba(45,106,79,.08); color:var(--green); border:1px solid rgba(45,106,79,.2); }
.status-bar.warn { background:rgba(184,134,11,.08); color:var(--gold); border:1px solid rgba(184,134,11,.2); }
.status-bar.error { background:rgba(141,40,36,.08); color:var(--red); border:1px solid rgba(141,40,36,.2); }

/* 免责声明 */
.disclaimer { margin:20px 5px 0; color:#948a7d; font-size:10px; line-height:1.7; text-align:center; }

/* 手型选择按钮 */
.hand-type { font-size:13px; padding:10px 12px; }
.hand-type.active { background:linear-gradient(120deg,var(--red-dark),var(--red)); color:#fff8eb; border-color:var(--red); }

/* 单选框组样式 */
.radio-group { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; }
.radio-option { display:flex; align-items:center; gap:8px; padding:10px 18px; border:1px solid var(--line); border-radius:10px; background:rgba(255,252,245,.8); cursor:pointer; font-size:14px; color:var(--ink); transition:all .2s ease; user-select:none; }
.radio-option:hover { border-color:var(--red); background:rgba(141,40,36,.04); }
.radio-option.active { border-color:var(--red); background:rgba(141,40,36,.08); color:var(--red); font-weight:600; }
.radio-circle { width:16px; height:16px; border:2px solid var(--muted); border-radius:50%; display:inline-block; position:relative; transition:all .2s ease; flex-shrink:0; }
.radio-option.active .radio-circle { border-color:var(--red); }
.radio-option.active .radio-circle::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:8px; height:8px; background:var(--red); border-radius:50%; }

/* 响应式 */
@media (min-width:700px) {
    body { padding:20px 0; background:#ded5c5; }
    .app-shell { min-height:calc(100vh - 40px); border:1px solid rgba(73,59,43,.1); border-radius:24px; box-shadow:0 22px 70px rgba(66,52,36,.13); background:var(--paper); }
}