/* ==========================================================
   小周爱航拍番茄钟 · V18.0 风格皮肤层（对齐工具站 V25.0）
   ------------------------------------------------------------
   放在 common.css / responsive.css 之后、页面级 css 之前。
   做的事只有一件：把番茄钟原本的 12 套浅色换肤，整体拉进
   工具站 V18.0 的世界观 —— 深蓝星空背景 + 青蓝发光 + 玻璃卡片。

   换肤功能保留：12 个主题仍然存在，只是每个主题都变成
   「V18 深色玻璃 + 自己的强调色」，而不是 7 浅 5 深各挂各的。
   ========================================================== */

/* ----------------------------------------------------------
   1. 把 12 个主题的变量统一重映射到 V18 深色玻璃
   ---------------------------------------------------------- */
:root,
.theme-pro, .theme-paper, .theme-mint, .theme-kids, .theme-sakura, .theme-forest,
.theme-space, .theme-night, .theme-cyber, .theme-galaxy, .theme-ocean, .theme-ink {
    --bg: #050b1a;
    --surface: rgba(255, 255, 255, .05);
    --surface2: rgba(var(--rgb, 56, 189, 248), .12);
    --text: #dff2ff;
    --muted: #90b4cc;
    --hint: #6f93ad;
    --accent-soft: rgba(var(--rgb, 56, 189, 248), .18);
    --border: rgba(var(--rgb, 56, 189, 248), .28);
    --border-soft: rgba(255, 255, 255, .07);
    --radius: 12px;
    --radius-lg: 18px;
    --radius-pill: 99px;
    --shadow: 0 8px 30px rgba(0, 0, 0, .28);
    color-scheme: dark;
}

/* 各主题只保留自己的强调色（换肤还在，观感统一了） */
:root, .theme-pro, .theme-space { --rgb: 56, 189, 248; --accent: #38bdf8; }
.theme-paper { --rgb: 212, 175, 110; --accent: #e0b866; }
.theme-mint { --rgb: 52, 211, 153; --accent: #34d399; }
.theme-kids { --rgb: 255, 122, 69; --accent: #ff7a45; }
.theme-sakura { --rgb: 244, 114, 182; --accent: #f472b6; }
.theme-forest { --rgb: 124, 178, 92; --accent: #8fbd6e; }
.theme-night { --rgb: 120, 140, 165; --accent: #9fb4d0; }
.theme-cyber { --rgb: 168, 85, 247; --accent: #a855f7; }
.theme-galaxy { --rgb: 129, 140, 248; --accent: #818cf8; }
.theme-ocean { --rgb: 14, 165, 183; --accent: #0ea5b8; }
.theme-ink { --rgb: 201, 168, 106; --accent: #c9a86a; }

/* 提示色在深底上要提亮 */
.err { color: #ff8f8f !important; }
.ok { color: #7bd88f !important; }

/* ----------------------------------------------------------
   2. 星空背景（与工具站 V18 完全一致）
   ---------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    background: linear-gradient(170deg, #050b1a 0%, #0f1735 50%, #0a2040 100%) fixed;
    color: var(--text);
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, #ffffff, transparent),
        radial-gradient(1px 1px at 40px 70px, #c0e8ff, transparent),
        radial-gradient(2px 2px at 90px 40px, #fff, transparent),
        radial-gradient(1px 1px at 130px 80px, #90d8ff, transparent),
        radial-gradient(2px 2px at 160px 120px, #ffffff, transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: .32;
    z-index: -1;
    pointer-events: none;
    animation: pmStarMove 80s linear infinite;
}

@keyframes pmStarMove {
    0% { background-position: 0 0; }
    100% { background-position: 200px 200px; }
}

#boot { background: radial-gradient(circle at 50% 40%, #10244a 0%, #050b1a 70%); color: #90b4cc; }
#boot .boot-logo { filter: drop-shadow(0 0 18px rgba(56, 189, 248, .8)); }

/* ----------------------------------------------------------
   3. 顶栏 / 导航：V18 的发光描边
   ---------------------------------------------------------- */
.topbar {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: .7;
}

.brand { color: #fff; text-shadow: 0 0 12px rgba(var(--rgb, 56, 189, 248), .55); }
.avatar { border: 1px solid var(--border); border-radius: 50%; box-shadow: 0 0 12px rgba(var(--rgb, 56, 189, 248), .35); }

.back { color: var(--muted); }
.back:hover { color: var(--accent); text-shadow: 0 0 10px rgba(var(--rgb, 56, 189, 248), .6); }

.nav-list { background: var(--surface); border-color: var(--border); }
.nav-item:hover { background: var(--surface2); }
.nav-item.active {
    background: linear-gradient(90deg, var(--accent-soft), transparent);
    box-shadow: inset 3px 0 0 var(--accent);
    color: #fff;
}

/* ----------------------------------------------------------
   4. 卡片 / 列表：V18 玻璃 + 落影
   ---------------------------------------------------------- */
.card,
.nav-list,
.tcard,
.badge-cell {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.card-title { color: #90d8ff; letter-spacing: .5px; }

.metric {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.metric .v { color: #fff; text-shadow: 0 0 14px rgba(var(--rgb, 56, 189, 248), .45); }

.list-item:hover, .row:hover { background: rgba(255, 255, 255, .03); }

.empty-state { color: var(--hint); }

.bar { background: rgba(0, 0, 0, .3); }
.bar-in {
    background: linear-gradient(90deg, var(--accent), var(--accent));
    box-shadow: 0 0 12px rgba(var(--rgb, 56, 189, 248), .55);
}

/* ----------------------------------------------------------
   5. 按钮 / 胶囊：V18 的 99px 胶囊 + 流光
   ---------------------------------------------------------- */
.btn {
    border-radius: var(--radius-pill);
    padding: 8px 18px;
    font-size: 13px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    transition: transform .2s, background .2s, color .2s, box-shadow .2s;
}

.btn:hover {
    background: rgba(var(--rgb, 56, 189, 248), .26);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(var(--rgb, 56, 189, 248), .28);
}

.btn:active { transform: scale(.97); }

.btn.primary {
    background: linear-gradient(90deg, var(--accent), var(--accent));
    background-size: 200% 100%;
    border-color: transparent;
    color: #041021;
    font-weight: 700;
    animation: pmStream 2.5s linear infinite;
}

.btn.primary:hover { filter: brightness(1.08); }

@keyframes pmStream {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.pill { background: var(--surface); }
.pill.on {
    background: linear-gradient(90deg, var(--accent), var(--accent));
    background-size: 200% 100%;
    border-color: transparent;
    color: #041021;
    font-weight: 600;
    animation: pmStream 2.5s linear infinite;
}

.tabs .tab { border-radius: var(--radius-pill); background: var(--surface); }
.tabs .tab.on {
    background: linear-gradient(90deg, var(--accent), var(--accent));
    background-size: 200% 100%;
    border-color: transparent;
    color: #041021;
    font-weight: 600;
    animation: pmStream 2.5s linear infinite;
}

.switch.on { background: var(--accent); }

/* ----------------------------------------------------------
   6. 表单 / 弹窗 / 提示
   ---------------------------------------------------------- */
input[type=text], input[type=number], input[type=date], select, textarea {
    background: rgba(0, 0, 0, .32);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: #eaf7ff;
    transition: box-shadow .2s, border-color .2s;
}

input::placeholder, textarea::placeholder { color: #6f93ad; }

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--rgb, 56, 189, 248), .18);
}

.modal {
    background: linear-gradient(160deg, rgba(8, 18, 38, .98), rgba(11, 28, 58, .98));
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.modal-mask { background: rgba(4, 10, 20, .72); }

.toast {
    background: linear-gradient(90deg, var(--accent), var(--accent));
    background-size: 200% 100%;
    color: #041021;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
    animation: pmStream 2.5s linear infinite, popIn .25s both;
}

.badge-cell.on { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 14px rgba(var(--rgb, 56, 189, 248), .3); }
.tcard.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 16px rgba(var(--rgb, 56, 189, 248), .3); }

.tbl th { color: #90d8ff; }
.tbl th, .tbl td { border-bottom-color: rgba(255, 255, 255, .07); }

.foot { color: #6f93ad; }

/* 主题卡里的浅色预览块：改成对应的深色预览，免得颜色对不上 */
.tcard .preview.pro { background: linear-gradient(135deg, #0b1220 55%, #38bdf8 55%); }
.tcard .preview.paper { background: linear-gradient(135deg, #101a2c 55%, #e0b866 55%); }
.tcard .preview.mint { background: linear-gradient(135deg, #0a1a16 55%, #34d399 55%); }
.tcard .preview.kids { background: linear-gradient(135deg, #1a1220 55%, #ff7a45 55%); }
.tcard .preview.sakura { background: linear-gradient(135deg, #1a0f16 55%, #f472b6 55%); }
.tcard .preview.forest { background: linear-gradient(135deg, #0d1a0c 55%, #8fbd6e 55%); }
.tcard .preview.space { background: linear-gradient(135deg, #0B1226 55%, #38BDF8 55%); }
.tcard .preview.night { background: linear-gradient(135deg, #0A0A0B 55%, #9fb4d0 55%); }
.tcard .preview.cyber { background: linear-gradient(135deg, #0D0A1A 55%, #A855F7 55%); }
.tcard .preview.galaxy { background: linear-gradient(135deg, #0F0B21 55%, #818CF8 55%); }
.tcard .preview.ocean { background: linear-gradient(135deg, #04141F 55%, #0EA5B8 55%); }
.tcard .preview.ink { background: linear-gradient(135deg, #141414 55%, #C9A86A 55%); }

/* ----------------------------------------------------------
   7. 三端（断点与工具站一致：1025 / 641 / 640 / 480）
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
    .wrap { max-width: 100%; }
}

@media (max-width: 640px) {
    .btn { padding: 9px 16px; }
    .card { padding: 13px; }
    /* 手机上输入框 16px，防止 iOS 聚焦时自动放大页面 */
    input[type=text], input[type=number], input[type=date], select, textarea { font-size: 16px; }
}

@media (max-width: 480px) {
    .grid2, .grid3, .grid4 { grid-template-columns: 1fr 1fr; }
    .brand { font-size: 14px; }
}

@media print {
    body { background: #fff !important; color: #111 !important; }
    body::before { display: none; }
}