/* ============================================================
   dash.css — 首页「小组件式仪表盘」（Taro Cake 芋头糕）
   严格按 4 列 × 3 行网格：
     row1: [ 时间(占2列) ][ 服务器(跨1-2行) ][ 音乐 ]
     row2: [ 一言 ][ 签到 ][ 服务器 ][ 站点动态(跨2-3行) ]
     row3: [ 登录折线图(占2列) ][ Token 柱状图 ][ 站点动态 ]
   目标：常见笔记本屏幕一屏显示全部组件、不出现滚动条
   ============================================================ */

.dash-wrap {
    width: min(1240px, 95vw);
    flex: 1 1 auto;
    min-height: 0;                 /* 关键：让网格能在视口内被压缩 */
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 1fr 2fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "time   time   server  music"
        "words  check  server  activity"
        "logins logins tokens  activity";
}

/* 所有组件共用的玻璃卡片 */
.w {
    position: relative;
    min-width: 0;
    min-height: 0;                 /* 允许在网格行内收缩 */
    overflow: hidden;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 18px;
    padding: 11px 15px;
    box-shadow: 0 8px 24px rgba(96, 165, 250, .13);
    display: flex;
    flex-direction: column;
    transition: box-shadow .22s ease, background .22s ease;
}
.w:hover { box-shadow: 0 12px 28px rgba(96, 165, 250, .2); background: rgba(255, 255, 255, .72); }

.w > h3 {
    font-size: 12.5px;
    font-weight: normal;
    letter-spacing: 1px;
    color: #2563eb;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.w > h3 i {
    background: linear-gradient(135deg, #60a5fa, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.say-refresh {
    margin-left: auto; border: 0; background: transparent; cursor: pointer;
    color: #93c5fd; font-size: 12px; padding: 2px 5px; border-radius: 6px; transition: all .15s;
}
.say-refresh:hover { color: #f472b6; background: rgba(96, 165, 250, .12); }
.say-refresh:disabled { opacity: .4; cursor: default; }

/* 网格区域 */
.w-time     { grid-area: time; }
.w-words    { grid-area: words; }
.w-check    { grid-area: check; }
.w-server   { grid-area: server; }
.w-music    { grid-area: music; }
.w-activity { grid-area: activity; }
.w-logins   { grid-area: logins; }
.w-tokens   { grid-area: tokens; }

/* ---------------- 时间 ---------------- */
.w-time { align-items: center; justify-content: center; text-align: center; }
.clock {
    font-family: hy, 'Segoe UI', monospace;
    font-size: 42px;
    line-height: 1;
    letter-spacing: 2px;
    color: #1e3a8a;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 4px 18px rgba(96, 165, 250, .22);
}
.clock .sep { animation: blink 1s steps(1) infinite; padding: 0 1px; }
@keyframes blink { 50% { opacity: .25; } }
.cdate { margin-top: 7px; font-size: 12.5px; letter-spacing: 1px; color: #94a3b8; }

/* ---------------- 一言 ---------------- */
.w-words { justify-content: center; }
.words-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: #475569;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.words-text::before { content: '“'; color: #bfdbfe; font-family: hy; margin-right: 1px; }
.words-text::after  { content: '”'; color: #bfdbfe; font-family: hy; margin-left: 1px; }
.words-src { margin-top: 6px; font-size: 11px; color: #94a3b8; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- 签到 + 运势 ---------------- */
.w-check .ck-head { display: flex; align-items: baseline; gap: 7px; flex-shrink: 0; }
.ck-points { font-family: hy; font-size: 22px; line-height: 1; color: #1e3a8a; }
.ck-label { font-size: 11px; color: #94a3b8; }
.ck-streak { margin-left: auto; font-size: 11px; color: #f472b6; }
.ck-btn {
    margin-top: 5px; border: 0; border-radius: 11px; padding: 5px 0; width: 100%;
    background: linear-gradient(135deg, #60a5fa, #f472b6); color: #fff; font-size: 12.5px; letter-spacing: 2px;
    cursor: pointer; box-shadow: 0 5px 14px rgba(96, 165, 250, .3); transition: all .2s;
    font-family: hy5, 'Microsoft YaHei', sans-serif; flex-shrink: 0;
}
.ck-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.ck-btn:disabled { background: rgba(148, 163, 184, .35); box-shadow: none; cursor: default; transform: none; }
.ck-btn.login { background: linear-gradient(135deg, #94a3b8, #64748b); }

.fortune { margin-top: 5px; padding-top: 5px; border-top: 1px dashed rgba(96, 165, 250, .25); overflow: hidden; }
.ft-top { display: flex; align-items: baseline; gap: 8px; }
.ft-level { font-family: hy; font-size: 18px; line-height: 1.1; }
.ft-level.lv0 { color: #ef4444; } /* 大吉 */
.ft-level.lv1 { color: #f97316; } /* 吉 */
.ft-level.lv2 { color: #f59e0b; } /* 小吉 */
.ft-level.lv3 { color: #eab308; } /* 中吉 */
.ft-level.lv4 { color: #10b981; } /* 平 */
.ft-level.lv5 { color: #64748b; } /* 小凶 */
.ft-level.lv6 { color: #6b7280; } /* 凶 */
.ft-level.lv7 { color: #475569; } /* 大凶 */
.ft-level.lv8 { color: #334155; } /* 极凶 */
.ft-line { font-size: 11px; color: #64748b; margin-top: 3px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-line .tag {
    display: inline-block; border-radius: 5px; padding: 0 5px; margin-right: 5px; color: #fff; font-size: 10.5px;
}
.ft-line .tag.yi { background: #34d399; }
.ft-line .tag.ji { background: #fb7185; }

/* ---------------- 服务器状态 ---------------- */
.w-server .gauges { display: flex; justify-content: space-around; gap: 8px; }
.gauge { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.gauge svg { width: 92px; height: 92px; transform: rotate(-90deg); }
.gauge .ring-bg { fill: none; stroke: rgba(96, 165, 250, .16); stroke-width: 9; }
.gauge .ring-fg { fill: none; stroke: url(#gGrad); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.gauge .inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #1e3a8a; }
.gauge .inner .num { font-family: hy; font-size: 17px; line-height: 1; }
.gauge .inner .cap { font-size: 10.5px; color: #94a3b8; margin-top: 3px; }
.srv-sub { text-align: center; font-size: 10.5px; color: #94a3b8; margin-top: 3px; }

.net { display: flex; gap: 8px; margin-top: 10px; }
.net .item { flex: 1; background: rgba(96, 165, 250, .09); border-radius: 10px; padding: 6px 9px; min-width: 0; }
.net .item .k { font-size: 10.5px; color: #94a3b8; display: flex; align-items: center; gap: 4px; }
.net .item .v { font-size: 13px; color: #1e3a8a; margin-top: 2px; font-variant-numeric: tabular-nums; }
.net .item.up .k i { color: #60a5fa; }
.net .item.down .k i { color: #f472b6; }

.disk { margin-top: 10px; }
.disk .lbl { display: flex; justify-content: space-between; font-size: 11px; color: #64748b; margin-bottom: 5px; }
.disk .bar { height: 9px; border-radius: 6px; background: rgba(96, 165, 250, .15); overflow: hidden; }
.disk .bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #60a5fa, #f472b6); border-radius: 6px; transition: width .6s ease; }
/* 卡片变高时内容垂直居中 */
.w-server > .gauges { margin-top: auto; }
.w-server > .disk   { margin-bottom: auto; }

/* ---------------- 音乐播放器 ---------------- */
.w-music { align-items: stretch; text-align: center; }
.m-pick-btn { margin-left: auto; cursor: pointer; color: #2563eb; font-size: 14px; display: inline-flex; align-items: center; }
.m-pick-btn input { display: none; }
.m-body { display: flex; align-items: center; gap: 12px; text-align: left; }
.m-cover {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 2px solid #fff; background: linear-gradient(135deg, #93c5fd, #f9a8d4);
    box-shadow: 0 6px 16px rgba(96, 165, 250, .32);
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px;
}
.m-cover.spin { animation: mspin 14s linear infinite; }
@keyframes mspin { to { transform: rotate(360deg); } }
.m-meta { min-width: 0; flex: 1; }
.m-title { font-size: 13px; color: #1e3a8a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-artist { margin-top: 2px; font-size: 10.5px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; flex-shrink: 0; }
.m-btn {
    border: 0; cursor: pointer; border-radius: 50%; width: 28px; height: 28px;
    background: rgba(96, 165, 250, .13); color: #2563eb; font-size: 12px; transition: all .18s;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.m-btn:hover { background: rgba(96, 165, 250, .24); transform: translateY(-1px); }
.m-btn.m-play { width: 36px; height: 36px; font-size: 14px; color: #fff; background: linear-gradient(135deg, #60a5fa, #f472b6); box-shadow: 0 6px 16px rgba(96, 165, 250, .38); }
.m-heart.on { color: #f472b6; }
.m-list { margin-top: 6px; width: 100%; flex: 1; min-height: 0; overflow-y: auto; text-align: left; }
.m-list .mi { display: flex; align-items: center; gap: 7px; padding: 4px 7px; border-radius: 7px; font-size: 11.5px; color: #64748b; cursor: pointer; }
.m-list .mi .mi-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-list .mi .mi-del { font-size: 10px; color: #cbd5e1; padding: 2px 3px; }
.m-list .mi .mi-del:hover { color: #f472b6; }
.m-cover img, .mf-cover img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.m-cover.cov i, .mf-cover.cov i { display: none; }
.m-list .mi:hover { background: rgba(96, 165, 250, .09); }
.m-list .mi.cur { color: #2563eb; font-weight: bold; background: rgba(96, 165, 250, .12); }

/* 浮窗播放器样式由 music.js 自带注入（#musicFloat 作用域），此处不再定义 */


/* ---------------- 图表 ---------------- */
.w-charts { min-height: 0; }
.chart-box { position: relative; flex: 1; min-height: 0; }
.chart-box canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* ---------------- 站点动态 ---------------- */
.act-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; min-height: 0; padding-right: 4px; }
.act-list::-webkit-scrollbar { width: 6px; }
.act-list::-webkit-scrollbar-thumb { background: rgba(96, 165, 250, .3); border-radius: 3px; }
.act-item { display: flex; gap: 9px; padding: 7px 8px; border-radius: 10px; text-decoration: none; color: inherit; transition: background .15s; }
.act-item:hover { background: rgba(96, 165, 250, .09); }
.act-item .ai {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff;
    background: linear-gradient(135deg, #93c5fd, #f9a8d4);
}
.act-item.post .ai     { background: linear-gradient(135deg, #60a5fa, #818cf8); }
.act-item.announce .ai { background: linear-gradient(135deg, #fbbf24, #f472b6); }
.act-item.login .ai    { background: linear-gradient(135deg, #34d399, #60a5fa); }
.act-tx { min-width: 0; }
.act-t { font-size: 12.5px; color: #1e3a8a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-m { font-size: 10.5px; color: #94a3b8; margin-top: 1px; }
.act-empty { text-align: center; color: #cbd5e1; font-size: 12px; padding: 18px 0; }

/* ---------------- 响应式：竖屏 / 手机端 ---------------- */
@media (max-width: 860px) {
    body { overflow: auto; }
    .dash-wrap {
        width: 96vw;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .w { overflow: visible; padding: 16px; border-radius: 18px; }
    .w-charts { min-height: 210px; }                /* 单列时图表卡需要固定高度 */
    .clock { font-size: 40px; }
    .w-server .gauges { gap: 18px; }
    .w-music .m-list, .w-activity .act-list { max-height: 260px; }
    .act-list { max-height: 340px; }
}

/* 极矮屏（笔记本 768 高以下）：允许滚动，避免内容被压扁 */
@media (min-width: 861px) and (max-height: 560px) {
    body { overflow: auto; }
    .wrap { flex: 0 0 auto; }
    .dash-wrap { flex: 0 0 auto; min-height: 560px; }
}