/*头部文件*/
/* ==================== 超美观响应式导航：手机自动两行 ==================== */
.site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1000;
    padding-top: env(safe-area-inset-top);
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    font-size: 28px;
    font-weight: bold;
    color: #111827;
    white-space: nowrap;
}

.logo img {
    height: 76px;
}

.logo span {
    color: #ff6b35;
}


/* 导航核心：手机自动换行 + 居中 + 美观 */
.nav-links {
    display: flex;
    flex-wrap: wrap;           /* 关键！允许换行 */
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.nav-links a {
    color: #333;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 12px;
    transition: all 0.3s;
    white-space: nowrap;
    background: transparent;
}

.nav-links a:hover {
    background: rgba(17, 24, 39, 0.06);     /* 原来是浅橙 → 改为浅 111827 */
    color: #111827;                        /* 原来是橙色字 → 改为主题黑 */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.20); /* 阴影颜色等价替换 */
}

/* 手机端：两行布局，字体稍小，间距紧凑 */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        text-align: center;
        padding: 6px 0;
    }
    .logo {
        margin-bottom: 6px;
        font-size: 24px;
    }
    .logo img {
        height: 56px;
    }
    .nav-links {
        gap: 12px 20px;  /* 垂直12px，水平20px */
    }
    .nav-links a {
        font-size: 16px;
        padding: 10px 18px;
        border-radius: 50px;
    }
}

/*主页*/
:root {
    --primary: #FF6A3D;
    --accent: #1A9FFF;
    --bg: #fafbfc;
    --card-bg: #ffffff;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Segoe UI", sans-serif;
    background: var(--bg);
    color: #333;
    line-height: 1.6;
}
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

header {
    background: white;
    padding: 24px 0;
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 100;
}
.logo {
    font-size: 32px;
    font-weight: 900;
    background: linear-gradient(120deg, #FF6A3D, #FF8E53);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.logo i { margin-right: 8px; color: #FF6A3D; }

/* 标题 */
.page-title {
    text-align: center;
    font-size: 34px;
    font-weight: 800;
    margin: 20px 0 12px;
    color: #222;
}
.page-desc {
    text-align: center;
    color: #666;
    font-size: 18px;
    margin-bottom: 50px;
}

.tools-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 30px;
    margin-bottom: 80px;
}
.tool-card {
    background: var(--card-bg);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: all 0.3s;
    display: flex;
    align-items: stretch;
}
.tool-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.tool-img {
    width: 60%;
    object-fit: contain;
}
.tool-content {
    width: 50%;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tool-label {
    font-size: 13px;
    color: var(--primary);
    margin-bottom: 8px;
    font-weight: 600;
}
.tool-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #222;
}
.tool-desc {
    color: #666;
    font-size: 15px;
    margin-bottom: 20px;
    line-height: 1.5;
}
.tool-btn {
    display: inline-block;
    color: white;
        background: #111827;

    padding: 10px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    width: fit-content;
}
.tool-btn:hover { background: #1f2937; }

footer {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-size: 14px;
    border-top: 1px solid #eee;
}

@media (max-width: 768px) {
    .tools-grid { grid-template-columns: 1fr; gap: 30px; }
    .tool-card { flex-direction: column; }
    .tool-img, .tool-content { width: 100%; }
    .tool-img { height: 180px; }
    .page-title { font-size: 28px; }
}

/* 翻译工具布局 */
.translate-container {
    max-width: 1100px;
    margin: 50px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    overflow: hidden;
}

/*翻译工具*/
.translate-box {
    padding: 30px;
    display: flex;
    flex-direction: column;
    height: 400px;
    box-sizing: border-box;
}
.lang-select {
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 16px;
    background: #fafafa;
}
textarea {
    flex: 1;
    padding: 20px;
    font-size: 18px;
    line-height: 1.6;
    border: none;
    resize: none;
    outline: none;
    background: #f8f9fa;
    border-radius: 8px;
}
.right-box textarea {
    background: #eef7ff;
    color: #1a0dab;
}
.action-bar {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.char-count {
    color: #888;
    font-size: 14px;
}
.swap-lang {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
}
.translate-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 14px 36px;
    font-size: 18px;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(102,126,234,0.4);
    transition: all 0.3s;
}
.translate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102,126,234,0.5);
}
.translate-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}
#copy-btn {
    background: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
}
@media (max-width: 768px) {
    .translate-container { grid-template-columns: 1fr; }
    .swap-lang { display: none; }
}

/*翻译清除效果*/
.clear-btn {
    background: none;
    border: none;
    padding: 6px 8px;
    cursor: pointer;
    color: #aaa;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clear-btn:hover {
    background: #ffe6e6;
    color: #ff4d4f;
}

.clear-btn svg {
    width: 18px;
    height: 18px;
}

/* usercss用户中心 */

.user-layout {
    max-width: 1200px;
    margin: 20px auto 60px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* 左侧侧边栏 */
.user-sidebar {
    width: 230px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    border: 1px solid #e5e7eb;
    padding: 18px 16px 14px;
    position: sticky;
    top: 80px;
}

.user-sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg,#fb7185,#fb923c);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:700;
    font-size:20px;
}

.user-name {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.user-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.08);
    color: #d97706;
    font-size: 11px;
    margin-top: 2px;
}

.user-sidebar-nav-title {
    font-size: 12px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 10px 0 4px;
}

.user-sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.user-sidebar-nav li {
    margin-bottom: 2px;
}

.user-sidebar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 10px;
    color: #4b5563;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}

.user-sidebar-link i {
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.user-sidebar-link:hover {
    background: #f3f4f6;
    color: #111827;
    transform: translateX(1px);
}

.user-sidebar-link.active {
    background: #0f172a;
    color: #f9fafb;
}

.user-sidebar-divider {
    border-top: 1px dashed #e5e7eb;
    margin: 10px 0 8px;
}

/* 右侧主体内容 */
.user-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.user-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    padding: 18px 20px 18px;
}

.user-card-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom: 12px;
}

.user-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    display:flex;
    align-items:center;
    gap:6px;
}

.user-card-sub {
    font-size: 12px;
    color: #9ca3af;
}

.user-tag {
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px 8px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:11px;
}

/* 会员信息区块 */
.user-info-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
    gap:10px 18px;
    font-size: 13px;
    color:#4b5563;
}

.user-info-item-label {
    font-size:12px;
    color:#9ca3af;
    margin-bottom:2px;
}

.user-info-item-value {
    font-weight:500;
}

/* ========== 全局 Flash 提示样式 ========== */
.flash-wrapper {
    max-width: 720px;
    margin: 10px auto 0;
    padding: 0 12px;
}

.flash-message {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 14px;
}

.flash-message.warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

/*====================翻译手机适配==================*/
/* ========== GPT翻译页：手机端全屏适配 ========== */
@media (max-width: 768px) {

    /* 页面整体边距更小 */
    .container {
        padding: 12px 10px 24px;
    }

    /* 两个翻译文本框：宽度满屏，但高度更矮 */
    #source-text,
    #target-text {
        width: 100%;
        min-height: 120px;          /* 通用高度 */
        max-height: 180px;
        font-size: 14px;
        line-height: 1.5;
        padding: 10px 12px;
        border-radius: 10px;
    }

    /* 上方输入框稍微高一点 */
    #source-text {
        min-height: 140px;          /* 输入框更高 */
    }

    /* 下方输出框更矮 */
    #target-text {
        min-height: 140px;          /* 输出更紧凑 */
    }

    .translate-box {
        width: 100%;
        padding: 12px 12px 14px;
        border-radius: 12px;
        margin-bottom: 10px;
    }

    .lang-select {
        height: 38px;
        font-size: 14px;
        padding: 0 8px;
        margin-bottom: 8px;
    }

    .action-bar {
        margin-top: 6px;
        gap: 8px;
    }

    .translate-btn {
        width: 100%;
        padding: 10px 0;
        font-size: 15px;
        border-radius: 999px;
    }
}
/* ========== 修复翻译页手机版中间大空白 ========== */
@media (max-width: 768px) {

    /* 强制容器改为完全的竖排布局 */
    .translate-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* 让每个翻译块紧凑贴合，不产生多余高度 */
    .translate-box {
        width: 100% !important;
        margin: 0 !important;
        height: auto !important;
    }
}

/*===========toast 提示=============*/
/* toast 容器：水平居中，固定在顶部 */
.toast-container {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}

/* 单条提示 */
.toast {
    min-width: 260px;
    max-width: 90vw;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    color: #fff;
    margin-bottom: 8px;
}

/* 成功样式 */
.toast-success {
    background: #22c55e;
}

/* 失败样式 */
.toast-error {
    background: #ef4444;
}
/*=====搜索框====*/

/* ================== 首页顶部 IP 搜索条 ================== */
.search-box {
    max-width: 900px;
    margin: 36px auto 30px;
    padding: 0 16px;
}

.ip-search-form {
    width: 100%;
}

.ip-search-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 主体：白色圆角 输入框 + 橙色按钮 */
.ip-search-main {
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border-radius: 999px;
    border: 2px solid #111827; /* 橙色描边 */
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.22);
    overflow: hidden;
}

.ip-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 14px 20px;
    font-size: 15px;
    border-radius: 999px 0 0 999px;
    color: #111827;
}

.ip-search-input::placeholder {
    color: #9ca3af;
}

/* 右侧橙色按钮（两行文字） */
.ip-search-btn {
    border: none;
    outline: none;
    cursor: pointer;

    flex: 0 0 230px;      /* 按钮长度，你可以改成 240/260 等 */
    padding: 10px 28px;

    border-radius: 999px;
    color: #ffffff;
        background: linear-gradient(135deg, #1f2937, #111827);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: inherit;
}

.ip-search-btn-main {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
}

.ip-search-btn-sub {
    font-size: 15px;
    opacity: 0.9;
    line-height: 1.1;
    margin-top: 2px;
}

.ip-search-btn:hover {
    filter: brightness(1.05);
}

/* 下方小提示文案 */
.ip-search-helper {
    font-size: 12px;
    color: #6b7280;
    padding-left: 10px;
}

/* 手机端保持好看 */
@media (max-width: 640px) {
    .ip-search-main {
        flex-direction: column;
        border-radius: 18px;
    }

    .ip-search-input {
        border-radius: 16px 16px 0 0;
    }

    .ip-search-btn {
        width: 100%;
        flex: 0 0 auto;
        border-radius: 0 0 16px 16px;
        min-height: 42px;
        padding: 10px 22px;
    }

    .ip-search-helper {
        padding-left: 2px;
    }
}


/*追加logo字体*/
.site-header .logo-text {
    font-family: "Inter",
                 "Poppins",
                 -apple-system, BlinkMacSystemFont,
                 "PingFang SC", "Microsoft YaHei", sans-serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.2px;
    color: #111827;
}

/*多语言选择器*/
/* ========== 多语言下拉选择器（导航最右） ========== */
/* ================== Language Dropdown (Ultra Minimal) ================== */
.lang-dd.lang-right{
  margin-left: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* 顶部触发按钮：无边框、像文字 */
.lang-dd-btn{
  height: 32px;
  padding: 0 6px;
  border: none;                 /* ❌ 去掉外边框 */
  background: transparent;      /* ❌ 去掉底色 */
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .15s ease, opacity .15s ease;
  box-shadow: none;             /* ❌ 去掉阴影 */
}

.lang-dd-btn:hover{
  color: #000;
  opacity: .85;                 /* 轻微反馈 */
}

.lang-dd-label{
  min-width: 20px;              /* CN / EN 不抖动 */
  text-align: center;
}

.lang-dd-caret{
  font-size: 11px;
  opacity: .6;
  transform: translateY(-1px);
}

/* 下拉菜单：依然保留“卡片感” */
.lang-dd-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 100px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(17,24,39,0.14);
  padding: 8px;
  display: none;
  z-index: 2000;
}

.lang-dd-menu.open{
  display: block;
}

/* 下拉项：极简块 */
.lang-dd-item{
  width: 100%;
  text-align: center;           /* CN / EN 居中更干净 */
  padding: 8px 10px;
  border-radius: 10px;
  border: none;
  background: transparent;      /* 默认无底色 */
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  margin: 2px 0;
}

/* hover（未选中） */
.lang-dd-item:hover{
  background: #f3f4f6;
}

/* ✅ 选中态：深色底 + 白字 */
.lang-dd-item.active{
  background: #111827;
  color: #ffffff;
}

/* 手机端略微收紧 */
@media (max-width: 768px){
  .lang-dd-btn{
    font-size: 12px;
    padding: 0 4px;
  }
  .lang-dd-menu{
    min-width: 96px;
  }
}