@charset "utf-8";
/* ===== 卡通主题 —— 与 read 首页同风格：蓝天白云 + 白色卡片 + 黑色贴纸标签 =====
   在各工具页所有样式之后引入，覆盖原有浅灰玻璃外壳，玩法区域样式保留 */

/* ---------- 蓝天渐变 + 漂浮云朵 ---------- */
body {
    background: linear-gradient(180deg, #2e8fe8 0%, #4aa3ef 34%, #8cc7f5 68%, #d9edfb 100%) !important;
}
body .bg {
    background: linear-gradient(180deg, #2e8fe8 0%, #4aa3ef 34%, #8cc7f5 68%, #d9edfb 100%) !important;
    overflow: hidden;
}
body .bg::before,
body .bg::after {
    content: "";
    position: absolute;
    background: url("../../assets/cloud-1.webp") no-repeat center / contain;
    mix-blend-mode: screen;
    pointer-events: none;
    animation: cartoonDrift 12s ease-in-out infinite alternate;
}
body .bg::before {
    width: 46vw; height: 46vw;
    max-width: 640px; max-height: 640px;
    left: -12%; top: 42%;
    opacity: 0.92;
}
body .bg::after {
    width: 26vw; height: 26vw;
    max-width: 360px; max-height: 360px;
    right: -4%; top: 8%;
    opacity: 0.85;
    animation-duration: 10s;
    animation-direction: alternate-reverse;
}
@keyframes cartoonDrift {
    from { transform: translateX(0); }
    to   { transform: translateX(4vw); }
}

/* ---------- 顶部：首页同款 Logo 图片 ---------- */
body .tool-top .brand img.logo-img,
body .topbar .brand img.logo-img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 10px;
    transition: transform 0.3s ease;
}
body .tool-top .brand:hover img.logo-img,
body .topbar .brand:hover img.logo-img {
    transform: scale(1.08) rotate(-3deg);
}

/* ---------- 返回按钮：白色毛玻璃小胶囊 ---------- */
body .back-btn,
body .back,
body .tlinks a.back-btn {
    background: rgba(255, 255, 255, 0.75) !important;
    color: #2e8fe8 !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 20px !important;
    font-weight: 600;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 16px rgba(23, 62, 102, 0.16);
    transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out,
                transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
body .back-btn:hover,
body .back:hover {
    background: #fff !important;
    color: #1976d2 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(23, 62, 102, 0.22);
}

/* ---------- 主体卡片：白色圆角卡 + 蓝色投影 ---------- */
body .main,
body .page {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 2px solid #fff !important;
    border-radius: 30px !important;
    box-shadow: 0 18px 44px rgba(23, 90, 160, 0.2) !important;
}
body .page-title { color: #1f2430 !important; }

/* ---------- 输入框 ---------- */
body input[type="text"],
body textarea {
    background: #fff !important;
    border: 1.5px solid #dfeefc !important;
    border-radius: 12px !important;
    color: #1f2430 !important;
}
body input[type="text"]:focus,
body textarea:focus {
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.18) !important;
}
body label { color: #4a6076 !important; }

/* ---------- 主按钮：卡通蓝 ---------- */
body .btn-start,
body .btn-generate,
body .btn-play,
body .btn-next,
body .btn-close {
    background: #2196f3 !important;
    border: none !important;
    border-radius: 14px !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(33, 150, 243, 0.35);
}
body .btn-start:hover,
body .btn-generate:hover,
body .btn-play:hover,
body .btn-next:hover,
body .btn-close:hover {
    background: #1976d2 !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(33, 150, 243, 0.42);
}
body .btn-start:active,
body .btn-generate:active,
body .btn-play:active,
body .btn-next:active {
    transform: translateY(0) scale(0.97);
}
body .btn-start:disabled,
body .btn-play:disabled,
body .btn-next:disabled,
body .btn-close:disabled {
    background: #b9c8d6 !important;
    box-shadow: none;
    transform: none;
}

/* ---------- 次要按钮：白底描边 ---------- */
body .btn-reset,
body .btn-action {
    background: #fff !important;
    border: 1.5px solid #dfeefc !important;
    border-radius: 12px !important;
    color: #2196f3 !important;
    font-weight: 600;
}
body .btn-reset:hover,
body .btn-action:hover {
    background: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #fff !important;
}

/* ---------- 教学工具目录页（tool/index.html） ---------- */
body .head .eyebrow {
    background: rgba(255, 255, 255, 0.75);
    color: #ff2442;
    border: 1px solid rgba(255, 36, 66, 0.35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
body .tcard {
    background: #fff !important;
    border: 2px solid #fff !important;
    border-radius: 24px !important;
    box-shadow: 0 14px 34px rgba(23, 90, 160, 0.14) !important;
}
body .tcard:hover {
    transform: translateY(-6px) rotate(-1deg) !important;
    box-shadow: 0 22px 46px rgba(23, 90, 160, 0.24) !important;
}
body .tcard .go {
    background: #2196f3 !important;
    color: #fff !important;
}
body .tcard .ico {
    background: #eaf4fe !important;
    border-radius: 18px !important;
}
body .tools .note,
body .copyright { color: rgba(255, 255, 255, 0.85) !important; }

/* ---------- 移动端微调 ---------- */
@media (max-width: 600px) {
    body .bg::before { width: 70vw; height: 70vw; top: 55%; }
    body .bg::after { width: 42vw; height: 42vw; top: 4%; }
}