/* =========================================
   Aikuto About — Polished UI (drop-in)
   结构/功能零改动，仅视效与排版升级
   ========================================= */

/* 作用域与基础变量 */
.aikuto-about {
    --ab-gap: 22px;
    --ab-radius: 16px;
    --ab-shadow: 0 8px 30px rgba(0,0,0,.08);
    --ab-shadow-hover: 0 10px 36px rgba(0,0,0,.12);
    --ab-border: 1px solid color-mix(in oklab, #000 12%, transparent);
    --ab-muted: #667085;
    --ab-accent: #2c7be5;
    --ab-bg: #fff;
    --ab-card: #fff;
    --ab-input: #fff;
    --ab-maxw: min(1100px, 92vw);
    --ab-ring: color-mix(in oklab, var(--ab-accent), #fff 78%);
    color: inherit;
}

/* 暗色模式变量微调 */
@media (prefers-color-scheme: dark){
    .aikuto-about{
        --ab-shadow: 0 10px 28px rgba(0,0,0,.35);
        --ab-shadow-hover: 0 12px 36px rgba(0,0,0,.45);
        --ab-border: 1px solid color-mix(in oklab, #fff 14%, transparent);
        --ab-muted: #b8c2d1;
        --ab-bg: #0b0f14;
        --ab-card: #0f141a;
        --ab-input: #0f141a;
        --ab-ring: color-mix(in oklab, var(--ab-accent), #0b0f14 78%);
    }
}

/* 容器与微重置 */
.aikuto-about * { box-sizing: border-box; }
.aikuto-about { max-width: var(--ab-maxw); margin-inline: auto; padding-block: 8px 24px; }
.aikuto-about :where(h1,h2,h3,h4){ margin:0 0 .6rem; line-height:1.25; }
.aikuto-about :where(p){ margin:0 0 .9rem; }
.aikuto-about a{ color: inherit; text-decoration: none; }
.aikuto-about a:hover{ text-decoration: underline; text-decoration-thickness: .08em; }

/* 自适应排版（clamp） */
.aikuto-about h1 { font-size: clamp(1.6rem, 1rem + 2vw, 2.2rem); }
.aikuto-about h2 { font-size: clamp(1.15rem, .6rem + 1vw, 1.4rem); }
.aikuto-about h3 { font-size: clamp(1.02rem, .7rem + .6vw, 1.18rem); }
.aikuto-about { font-size: clamp(.98rem, .9rem + .2vw, 1.04rem); }

/* Section 间距统一 */
.aikuto-about > section { margin-top: 1.25rem; }

/* ===== Hero ===== */
.ab-hero{
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: calc(var(--ab-gap) + 2px);
    align-items: center;
    margin-bottom: 1.2rem;
    background: linear-gradient(180deg, color-mix(in oklab, var(--ab-accent) 6%, transparent), transparent 38%);
    border: var(--ab-border);
    border-radius: calc(var(--ab-radius) + 2px);
    padding: 18px;
}
.ab-avatar{
    width:116px; height:116px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    box-shadow: var(--ab-shadow);
    background: radial-gradient(55% 55% at 30% 30%, var(--ab-ring), transparent 60%);
    border: var(--ab-border);
}
.ab-avatar::after{
    content:"";
    position:absolute; inset:-6px;
    border-radius:50%;
    background: conic-gradient(from 220deg, color-mix(in oklab, var(--ab-accent), #fff 30%), transparent 40% 60%, color-mix(in oklab, var(--ab-accent), #fff 60%));
    -webkit-mask: radial-gradient(circle at center, transparent 64%, #000 65%);
    mask: radial-gradient(circle at center, transparent 64%, #000 65%);
    opacity:.35;
}
.ab-avatar img{ width:100%; height:100%; object-fit: cover; display:block; }

.ab-meta{ padding-right: 6px; }
.ab-subtitle{ color: var(--ab-muted); margin-top: .2rem; }

.ab-badges{
    display:flex; gap:.55rem; flex-wrap:wrap;
    padding:0; margin:.65rem 0 0; list-style:none;
}
.ab-badges li{
    border: var(--ab-border); background: var(--ab-input);
    padding:.34rem .68rem; border-radius:999px; font-size:.92rem;
    box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
}

/* Action 按钮 */
.ab-actions{ display:flex; gap:.55rem; flex-wrap:wrap; margin-top:.9rem; }
.ab-btn{
    all: unset; cursor: pointer; display:inline-flex; align-items:center; gap:.45rem;
    padding:.56rem .92rem; border-radius:12px;
    border: var(--ab-border); background: var(--ab-input);
    box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.ab-btn:hover{ box-shadow: var(--ab-shadow); transform: translateY(-1px); }
.ab-btn:focus-visible{ outline: 2px solid color-mix(in oklab, var(--ab-accent), #fff 35%); outline-offset: 2px; }
.ab-btn.ghost{ background: transparent; }
.ab-btn.large{ padding:.7rem 1.08rem; font-size:1.02rem; }

/* ===== Intro ===== */
.ab-intro{
    margin: 1rem 0 1.2rem;
    background: linear-gradient(180deg, color-mix(in oklab, #000 2%, transparent), transparent 60%);
    border: var(--ab-border); border-radius: var(--ab-radius);
    padding: 14px 16px;
}

/* ===== 三列卡片 ===== */
.ab-grid{
    display:grid; gap: var(--ab-gap); grid-template-columns: 1fr;
}
@media (min-width: 880px){
    .ab-grid{ grid-template-columns: repeat(3, 1fr); }
}
.ab-card{
    background: var(--ab-card);
    border: var(--ab-border);
    border-radius: var(--ab-radius);
    padding: 14px 14px 12px;
    box-shadow: 0 0 0 transparent;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease, background-color .2s ease;
    display:flex; flex-direction:column; min-height: 100%;
}
.ab-card h3{ letter-spacing:.2px; }
.ab-card:hover{ box-shadow: var(--ab-shadow-hover); transform: translateY(-2px); }

.ab-list{ padding-left:1.15rem; margin:.35rem 0 0; display:grid; gap:.4rem; }
.ab-list li{ line-height:1.55; }

.ab-tags{ display:flex; gap:.45rem; flex-wrap:wrap; margin-top:.35rem; }
.ab-tags span{
    padding:.34rem .62rem; border-radius: 10px; border: var(--ab-border);
    background: var(--ab-input); font-size:.9rem;
    box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
}

/* ===== 时间线 ===== */
.ab-timeline{ margin-top: 1.2rem; }
.ab-steps{ list-style:none; padding:0; margin:0; position:relative; }
.ab-steps li{
    display:grid; grid-template-columns: 20px 1fr; gap:.85rem;
    position: relative; padding:.25rem 0 .95rem;
}
.ab-steps li::before{
    content:""; position:absolute; left:9px; top:0; bottom:0; width:2px;
    background: linear-gradient(to bottom, color-mix(in oklab, var(--ab-accent) 45%, transparent), transparent 70%);
    opacity:.75;
}
.ab-step-dot{
    width:20px; height:20px; border-radius:50%;
    background: var(--ab-accent);
    margin-top:.3rem;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ab-accent), #fff 78%);
    position: relative;
}
.ab-step-dot::after{
    content:""; position:absolute; inset:3px;
    border-radius:50%; background: color-mix(in oklab, #fff 45%, var(--ab-accent));
}
.ab-step-body time{ display:block; font-size:.86rem; color: var(--ab-muted); }
.ab-step-body h4{ margin:.18rem 0 .25rem; font-size:1.06rem; }

/* ===== 目标 / 进度条 ===== */
.ab-goals{ margin-top: 1.2rem; }
.ab-progress{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.ab-progress li{
    background: var(--ab-card); border: var(--ab-border);
    border-radius: var(--ab-radius); padding:.9rem 1rem;
    display:flex; flex-direction:column; gap:.5rem;
}
.ab-progress span{ display:block; font-weight: 540; }
.ab-progress progress{
    width:100%; height:12px; -webkit-appearance:none; appearance:none;
    background: transparent; border-radius:999px; overflow: clip;
    outline: none; border: none;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 16%, transparent);
}
.ab-progress progress::-webkit-progress-bar{
    background: color-mix(in oklab, #000 8%, transparent);
    border-radius:999px;
}
.ab-progress progress::-webkit-progress-value{
    background: linear-gradient(90deg, color-mix(in oklab, var(--ab-accent) 94%, #fff 6%), color-mix(in oklab, var(--ab-accent) 70%, #fff 30%));
    border-radius:999px;
    transition: width .6s cubic-bezier(.2,.7,.2,1);
}
.ab-progress progress::-moz-progress-bar{
    background: linear-gradient(90deg, color-mix(in oklab, var(--ab-accent) 94%, #fff 6%), color-mix(in oklab, var(--ab-accent) 70%, #fff 30%));
    border-radius:999px;
}

/* ===== 联系方式 ===== */
.ab-contact{ margin-top: 1.2rem; }
.ab-cta{ display:flex; gap:.7rem; flex-wrap:wrap; }
.ab-cta .ab-btn.large{ font-weight: 560; }

/* ===== 交互可达性 ===== */
.aikuto-about :where(button,[role="button"],a.ab-btn):focus-visible{
    outline: 2px solid color-mix(in oklab, var(--ab-accent), #fff 35%);
    outline-offset: 2px;
}

/* ===== 小屏优化 ===== */
@media (max-width: 640px){
    .ab-hero{ grid-template-columns: 86px 1fr; padding:14px; }
    .ab-avatar{ width:86px; height:86px; }
    .ab-actions{ gap:.45rem; }
    .ab-btn{ padding:.5rem .78rem; border-radius:10px; }
}

/* ===== 降低动画以尊重系统设置 ===== */
@media (prefers-reduced-motion: reduce){
    .ab-btn, .ab-card, .ab-progress progress::-webkit-progress-value{ transition: none !important; }
}

/* ===== 打印优化（移除阴影/背景） ===== */
@media print{
    .aikuto-about{ max-width: 100%; }
    .ab-card, .ab-hero{ box-shadow: none !important; background: #fff !important; }
    .ab-btn{ border-color:#333; }
}