/* =========================================
   全局页面骨架与主题 (海内外共用)
   路径: /static/shared/css/main-layout.css
========================================= */

/* 1. 基础重置 */
body {
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 100vh;
    color: #fff;
    background-color: #111827; /* 默认深色底 */
}

/* 🌟 2. 差异化主题 (Theming) 🌟 */
/* 国内版背景 (通过给 body 加 class="theme-cn" 激活) */
body.theme-cn {
    background-image: url('/static/images/depot_hero_1.jpg'); /* 替换为你的真实背景路径 */
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
}
/* 海外版背景 (通过给 body 加 class="theme-global" 激活) */

body.theme-global {
    background-image: url('/static/images/depot_hero_1.jpg'); /* 替换为你的真实背景路径 */
    background-color: #1f2937;

    /* 🌟 补充以下三行代码，让背景图完美铺满 🌟 */
    background-size: cover;          /* 让图片等比例缩放，完全覆盖整个屏幕背景 */
    background-position: center top; /* 图片居中对齐，重点展示上半部分 */
    background-attachment: fixed;    /* 背景图固定，当页面往下滚动时，背景图不跟着跑 */
}

/* 3. 页面主容器 */

.content {
    width: 100%; min-width: 800px;
    display: flex; flex-direction: column; align-items: center;
    box-sizing: border-box;
    padding-top: 0; /* 🌟 重点 1：去掉顶部的空隙，让 Logo 区域紧贴导航栏 */
}

.content-header {
    text-align: center; margin-bottom: 40px; width: 100%;
}

/* 🌟 重点 2：给包裹 Logo 的链接加一个全宽的纯白背景板 */
.content-header > a {
    display: block;
    width: 100%;
    background-color: #ffffff; /* 纯白底色，完美遮挡后面的背景图 */
    padding: 30px 0; /* 上下留点呼吸空间 */
    margin-bottom: 50px; /* 把下方的搜索框推开 */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); /* 底部加一道极淡的高级阴影，增加层次感 */
}

/* Logo 样式 */
.logo {
    max-width: 400px; height: auto; position: relative; z-index: 2;
    margin: 0 auto; /* 保证居中 */
    display: block;
}
h1 { font-size: 80px; font-weight: bold; margin: 0 0 10px 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.4); }
.description { font-size: 24px; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); margin-bottom: 40px; }

.content-header { text-align: center; margin-bottom: 40px; width: 100%; }

/* Logo 样式 */
.logo { max-width: 400px; height: auto; position: relative; z-index: 2; margin-bottom: 10px; }
h1 { font-size: 80px; font-weight: bold; margin: 0 0 10px 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.4); }
.description { font-size: 24px; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); margin-bottom: 40px; }

/* 4. 搜索表单 */
form { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 20px; }

input[type="text"] {
    padding: 14px 20px; font-size: 16px; width: 450px;
    border: 2px solid rgba(255,255,255,0.2); border-radius: 30px;
    background: rgba(255,255,255,0.9); color: #333;
    transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
input[type="text"]:focus { border-color: #007bff; background: #fff; outline: none; box-shadow: 0 0 0 4px rgba(0,123,255,0.2); }

button {
    padding: 14px 32px; font-size: 16px; font-weight: bold; color: #FFF;
    background-color: #1564d9; border: none; border-radius: 30px;
    cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
button:hover { background-color: #ff7200; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.2); }
button:active { transform: translateY(0); }

/* 5. 提示信息 (加载、错误) */
.loading-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(4px);
    display: none; justify-content: center; align-items: center; flex-direction: column; z-index: 9999;
}
.bar-container { display: flex; gap: 6px; }
.bar { width: 6px; height: 24px; background-color: #3b82f6; animation: stretch 1.2s infinite ease-in-out; border-radius: 3px; }
.bar:nth-child(2) { animation-delay: 0.1s; } .bar:nth-child(3) { animation-delay: 0.2s; }
.bar:nth-child(4) { animation-delay: 0.3s; } .bar:nth-child(5) { animation-delay: 0.4s; }
@keyframes stretch { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(2); } }
.loading-text { margin-top: 16px; font-size: 14px; font-weight: 600; color: #fff; letter-spacing: 1px; }

.error-container {
    background-color: #fef2f2; border-left: 5px solid #ef4444; padding: 16px 24px;
    border-radius: 8px; margin: 20px auto; max-width: 600px; text-align: left; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.error { color: #991b1b; margin: 0 0 8px 0; font-size: 15px; font-weight: bold; }
.error-note { color: #b91c1c; font-size: 13px; margin: 0; }

/* 6. 搜索历史胶囊 */
.search-history-container {
    margin: 20px auto; display: flex; align-items: center; justify-content: center; gap: 12px;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); padding: 8px 20px;
    border-radius: 30px; width: fit-content; max-width: 90%;
}
.history-label { color: #fff; font-size: 14px; font-weight: bold; opacity: 0.9; }
.history-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.history-list::-webkit-scrollbar { display: none; }
.history-tag {
    background: rgba(255,255,255,0.15); color: #fff; padding: 6px 14px; border-radius: 20px;
    font-size: 13px; cursor: pointer; transition: all 0.2s; white-space: nowrap; border: 1px solid rgba(255,255,255,0.1);
}
.history-tag:hover { background: #fff; color: #1564d9; transform: translateY(-1px); }
.clear-history { color: #ffeb3b; font-size: 13px; cursor: pointer; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.3); }
.clear-history:hover { color: #fff59d; }