/* Mica - 云母过渡页 | Minimal & Swiss
   设计令牌:浅灰底 + 白卡片 + 石板黑文字 + 蓝色行动色,支持跟随系统与手动切换的日/夜模式 */

:root{
    --bg:            #F5F7FA;
    --card:          #FFFFFF;
    --fg:            #0F172A;
    --muted:         #64748B;
    --desc:          #475569;
    --border:        #E7EBF1;
    --primary:       #2563EB;
    --primary-hover: #1E51C7;
    --primary-fg:    #FFFFFF;
    --ring:          rgba(37, 99, 235, .35);
    --shadow:        0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    --radius:        16px;
}
/* 手动切换为夜间 */
:root[data-theme="dark"]{
    --bg:            #0B1220;
    --card:          #121A2B;
    --fg:            #E8EDF6;
    --muted:         #97A3B6;
    --desc:          #B6C1D4;
    --border:        #22304A;
    --primary:       #4C8DFF;
    --primary-hover: #6BA1FF;
    --primary-fg:    #FFFFFF;
    --ring:          rgba(76, 141, 255, .40);
    --shadow:        0 1px 2px rgba(0, 0, 0, .30), 0 8px 24px rgba(0, 0, 0, .35);
}
/* 跟随系统为夜间(未手动指定日间时生效) */
@media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
        --bg:            #0B1220;
        --card:          #121A2B;
        --fg:            #E8EDF6;
        --muted:         #97A3B6;
        --desc:          #B6C1D4;
        --border:        #22304A;
        --primary:       #4C8DFF;
        --primary-hover: #6BA1FF;
        --primary-fg:    #FFFFFF;
        --ring:          rgba(76, 141, 255, .40);
        --shadow:        0 1px 2px rgba(0, 0, 0, .30), 0 8px 24px rgba(0, 0, 0, .35);
    }
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
    min-height:100vh;
    background:var(--bg);
    color:var(--fg);
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size:15px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--primary); }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
svg{ width:1em; height:1em; display:inline-block; vertical-align:-0.12em; }

:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:6px; }

.shell{
    max-width:1080px;
    margin:0 auto;
    padding:20px 24px 40px;
}

/* ---------- 顶栏 ---------- */
.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 2px 18px;
}
.brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    font-size:15px;
    letter-spacing:-0.2px;
}
.brand img{ width:26px; height:26px; border-radius:6px; }
.topnav a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:44px;
    padding:0 6px;
    color:var(--muted);
    font-size:14px;
    transition:color .2s ease;
}
.theme-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    margin-left:10px;
    border:1px solid var(--border);
    border-radius:10px;
    color:var(--muted);
    background:var(--card);
    cursor:pointer;
    transition:border-color .2s ease, color .2s ease;
}
.theme-toggle:hover{ border-color:var(--primary); color:var(--primary); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .ico-sun{ display:none; }
[data-theme="dark"] .theme-toggle .ico-moon{ display:none; }
[data-theme="dark"] .theme-toggle .ico-sun{ display:inline-block; }

/* ---------- 卡片 ---------- */
.card{
    display:grid;
    grid-template-columns:300px 1fr 216px;
    gap:0;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    animation:rise .28s ease-out both;
}
@keyframes rise{
    from{ opacity:0; transform:translateY(8px); }
    to  { opacity:1; transform:none; }
}

/* 左侧截图 */
.card-media{
    position:relative;
    min-height:260px;
    background:var(--bg);
    border-right:1px solid var(--border);
    overflow:hidden;
}
.card-media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top;
}
/* 截图加载失败或关闭时,显示首字符占位 */
.card-media.is-fallback::after{
    content:attr(data-letter);
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:56px;
    font-weight:700;
    color:var(--muted);
    background:linear-gradient(180deg, var(--card), var(--bg));
}

/* 中部信息 */
.card-body{
    padding:28px 28px 24px;
    min-width:0;
}
.card-head{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}
.card-ico{
    width:40px;
    height:40px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--bg);
    flex:none;
}
.card-head h1{
    font-size:22px;
    font-weight:700;
    letter-spacing:-0.3px;
    line-height:1.3;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.card-desc{
    margin-top:10px;
    color:var(--desc);
    font-size:14px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.meta{
    margin-top:18px;
    padding-top:18px;
    border-top:1px dashed var(--border);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 24px;
}
.meta-item dt{
    font-size:12px;
    color:var(--muted);
    letter-spacing:.06em;
    margin-bottom:2px;
}
.meta-item dd{
    font-size:14px;
    font-weight:500;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.meta-item-wide{ grid-column:1 / -1; }
.meta-item-wide dd{ white-space:normal; word-break:break-all; }

/* 备用链接 */
.standby{
    margin-top:16px;
}
.standby-label{
    display:block;
    font-size:12px;
    color:var(--muted);
    letter-spacing:.06em;
    margin-bottom:8px;
}
.standby-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.standby-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:36px;
    padding:0 14px;
    border:1px solid var(--border);
    border-radius:999px;
    font-size:13px;
    color:var(--desc);
    max-width:100%;
    transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.standby-pill:hover{
    border-color:var(--primary);
    color:var(--primary);
    background:color-mix(in srgb, var(--primary) 6%, transparent);
}

/* ---------- 右侧操作区 ---------- */
.card-actions{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:12px;
    padding:28px 24px;
    border-left:1px solid var(--border);
    background:color-mix(in srgb, var(--bg) 45%, var(--card));
}

.cta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    padding:0 18px;
    border-radius:12px;
    background:var(--primary);
    color:var(--primary-fg);
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease, transform .15s ease;
}
.cta:hover{ background:var(--primary-hover); color:var(--primary-fg); }
.cta:active{ transform:scale(.98); }
.cta-icon svg{ width:18px; height:18px; }

.cta-ring{
    position:relative;
    width:26px;
    height:26px;
    flex:none;
}
.cta-ring svg{ width:26px; height:26px; transform:rotate(-90deg); }
.cta-ring circle{
    fill:none;
    stroke-width:3;
    cx:24; cy:24; r:20;
}
.cta-ring .track{ stroke:rgba(255,255,255,.28); }
.cta-ring .progress{
    stroke:var(--primary-fg);
    stroke-linecap:round;
    stroke-dasharray:125.66;
    stroke-dashoffset:0;
    transition:stroke-dashoffset 1s linear;
}
.cta-ring b{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:700;
    line-height:1;
}

/* ---------- 富文本补充内容 ---------- */
.rich{
    margin-top:16px;
    padding:20px 24px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    color:var(--desc);
    font-size:14px;
    overflow:hidden;
}
.rich img{ max-width:100%; height:auto; border-radius:8px; }
.rich table{
    border-collapse:collapse;
    width:auto;
    max-width:100%;
    margin:8px 0;
    font-size:13px;
}
.rich th, .rich td{
    border:1px solid var(--border);
    padding:6px 12px;
    text-align:left;
}
.rich th{ background:var(--bg); font-weight:600; }
.rich a{ color:var(--primary); }
.rich p{ margin:8px 0; }

/* ---------- 提示与页脚 ---------- */
.tips{
    margin-top:16px;
    padding:12px 16px;
    border:1px dashed var(--border);
    border-radius:12px;
    color:var(--muted);
    font-size:12.5px;
}
.tips b{
    color:var(--desc);
    font-weight:600;
    margin-right:10px;
}
.foot{
    margin-top:24px;
    padding-top:16px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:12.5px;
    text-align:center;
}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
    .card{ grid-template-columns:1fr; }
    .card-media{
        min-height:200px;
        max-height:220px;
        border-right:0;
        border-bottom:1px solid var(--border);
    }
    .card-actions{
        border-left:0;
        border-top:1px solid var(--border);
        flex-direction:row;
        flex-wrap:wrap;
    }
    .cta{ flex:1 1 100%; }
}
@media (max-width:480px){
    .shell{ padding:12px 14px 28px; }
    .card-body{ padding:20px 18px; }
    .meta{ grid-template-columns:1fr; }
    .card-head h1{ font-size:19px; white-space:normal; }
}

/* ---------- 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}