/*
Theme Name: ToolStation
Theme URI: https://example.com/toolstation
Author: You
Author URI: https://example.com
Description: 多语言在线工具主题（图片压缩/水印/随机转盘/抛硬币/尺寸调整/裁剪），包含后台【主题设置】【新增工具】入口，支持前端语言自动识别与切换。
Version: 0.2.3
Text Domain: toolstation
Requires at least: 6.0
Tested up to: 6.6
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:#0b0b0c; color:#e7e7ea; }
a { color:#7aa2ff; text-decoration:none; }
a:hover { text-decoration:underline; }
.container { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }

/* 首页标题和描述居中 */
.home .container > h1,
.home .container > p {
  text-align: center;
}

.home .container > h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.home .container > p {
  font-size: 1.1rem;
  color: #c7c7ca;
  margin-bottom: 2rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.header, .footer { background:#141418; border-bottom:1px solid #24242a; }
.footer { border-top:1px solid #24242a; border-bottom:none; }
.header .inner, .footer .inner { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }

/* 移动端菜单按钮 */
.mobile-menu-btn { display:none; background:none; border:none; padding:.5rem; cursor:pointer; }
.hamburger { display:flex; flex-direction:column; width:20px; height:16px; justify-content:space-between; }
.hamburger span { width:100%; height:2px; background:#e7e7ea; border-radius:1px; transition:all 0.3s ease; }
.mobile-menu-btn.active .hamburger span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.mobile-menu-btn.active .hamburger span:nth-child(2) { opacity:0; }
.mobile-menu-btn.active .hamburger span:nth-child(3) { transform:rotate(-45deg) translate(7px,-6px); }

/* 移动端侧边栏 - 桌面端隐藏 */
.mobile-sidebar { display:none; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:700; }
/* 桌面端导航样式 */
.desktop-nav { display:flex; align-items:center; gap:.75rem; }
.desktop-nav a { padding:.5rem .75rem; border-radius:.5rem; }
.desktop-nav a.active, .pill { background:#1b1b22; border:1px solid #2a2a33; }
/* WP 菜单基础样式 */
.desktop-nav .nav-menu { list-style:none; display:flex; align-items:center; gap:.25rem; margin:0; padding:0; }
.desktop-nav .nav-menu > li { position:relative; }
.desktop-nav .nav-menu a { display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .7rem; border-radius:.5rem; color:#e7e7ea; }
.desktop-nav .nav-menu .current-menu-item > a,
.desktop-nav .nav-menu .current-menu-ancestor > a { background:#1b1b22; border:1px solid #2a2a33; }
/* 二级菜单下拉（桌面） */
.desktop-nav .nav-menu .menu-item-has-children { position:relative; }
.desktop-nav .nav-menu .menu-item-has-children::before { content:''; position:absolute; left:0; right:0; top:100%; height:8px; }
.desktop-nav .nav-menu .sub-menu { list-style:none; position:absolute; left:0; top:100%; min-width:200px; background:#0f0f14; border:1px solid #24242a; border-radius:.6rem; padding:.4rem; margin:0; display:none; box-shadow:0 6px 24px rgba(0,0,0,.35); z-index:1000; }
.desktop-nav .nav-menu .sub-menu li a { display:flex; padding:.5rem .6rem; border-radius:.4rem; white-space:nowrap; }
.desktop-nav .nav-menu .sub-menu li a:hover { background:#1b1b22; }
.desktop-nav .nav-menu .menu-item-has-children > a::after { content:'▾'; opacity:.8; font-size:.85em; }
.desktop-nav .nav-menu .menu-item-has-children:hover > .sub-menu,
.desktop-nav .nav-menu .menu-item-has-children:focus-within > .sub-menu { display:block; }
/* 语言切换与菜单对齐 */
.desktop-nav [data-lang] { margin-left:.5rem; }
.header .inner .desktop-nav .nav-menu { flex: 0 1 auto; }
.grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); }
.card { background:#111116; border:1px solid #24242a; border-radius:12px; padding:1rem; }
.card h3 { margin:.25rem 0 .5rem; font-size:1.05rem; }
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .9rem; border-radius:.65rem; border:1px solid #2a2a33; background:#1b1b22; color:#e7e7ea; cursor:pointer; font-size:.95rem; font-weight:500; transition:all 0.2s ease; text-decoration:none; }
.btn:hover { background:#24242a; border-color:#3a3a44; text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn.primary { background:#2a335b; border-color:#3b4781; color:#fff; }
.btn.primary:hover { background:#3b4781; border-color:#4a5a9e; }
.btn.secondary { background:#4a4a56; border-color:#5a5a66; }
.btn.secondary:hover { background:#5a5a66; border-color:#6a6a76; }
.btn.success { background:#28a745; border-color:#28a745; color:#fff; }
.btn.success:hover { background:#218838; border-color:#1e7e34; }
.btn.outline { background:transparent; border:1px solid #4a4a56; color:#e7e7ea; }
.btn.outline:hover { background:#4a4a56; border-color:#5a5a66; }
.badge { display:inline-block; padding:.2rem .5rem; border-radius:999px; background:#222230; border:1px solid #33334a; font-size:.75rem; }
.input, .select { width:100%; padding:.55rem .7rem; border-radius:.5rem; border:1px solid #2a2a33; background:#0e0e13; color:#e7e7ea; }
.range { width:100%; }
.canvas-wrap { background:#0d0d12; border:1px dashed #2a2a33; border-radius:12px; padding:1rem; text-align:center; }
.flex { display:flex; gap:.75rem; }
.stack { display:flex; flex-direction:column; gap:.6rem; }
.row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.kv { display:grid; grid-template-columns: 140px 1fr; gap:.5rem .75rem; }
hr.sep { border:0; border-top:1px solid #24242a; margin:1rem 0; }
.lang-switch { font-size:.9rem; display:flex; gap:.5rem; align-items:center; }
small.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:#a6a6b2; }
.notice { padding:.6rem .8rem; border-radius:.5rem; background:#12121a; border:1px solid #24242a; }
.pills { display:flex; gap:.5rem; flex-wrap:wrap; }
.hidden { display:none; }
.tool-cols { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
@media (max-width: 900px){ .tool-cols { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .kv { grid-template-columns: 1fr; }
}
/* 移动端导航与下拉（简化：二级菜单默认展开为内联列表） */
@media (max-width: 900px){
  .mobile-menu-btn { display:block; }
  .desktop-nav { display:none; }
  
  /* 移动端侧边栏 */
  .mobile-sidebar { display:block; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; visibility:hidden; opacity:0; transition:all 0.3s ease; }
  .mobile-sidebar.open { visibility:visible; opacity:1; }
  
  .mobile-sidebar-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); }
  
  .mobile-sidebar-content { position:absolute; top:0; right:0; width:280px; height:100%; background:#0f0f14; border-left:1px solid #24242a; transform:translateX(100%); transition:transform 0.3s ease; display:flex; flex-direction:column; }
  .mobile-sidebar.open .mobile-sidebar-content { transform:translateX(0); }
  
  .mobile-sidebar-header { padding:1rem; border-bottom:1px solid #24242a; display:flex; align-items:center; justify-content:space-between; }
  .mobile-sidebar-brand { display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem; }
  .mobile-sidebar-close { background:none; border:none; color:#e7e7ea; font-size:1.2rem; padding:.25rem; cursor:pointer; border-radius:.25rem; }
  .mobile-sidebar-close:hover { background:#1b1b22; }
  
  .mobile-sidebar-nav { flex:1; padding:1rem 0; overflow-y:auto; }
  
  /* 移动端菜单样式 */
  .mobile-nav-menu { display:flex; flex-direction:column; gap:.25rem; list-style:none; margin:0; padding:0 1rem; }
  .mobile-nav-menu > li, .mobile-nav-menu > a { display:block; }
  .mobile-nav-menu a { display:flex; align-items:center; padding:.75rem 1rem; border-radius:.5rem; color:#e7e7ea; text-decoration:none; font-size:.95rem; }
  .mobile-nav-menu a:hover, .mobile-nav-menu a.active { background:#1b1b22; }
  
  /* 移动端二级菜单 */
  .mobile-nav-menu .sub-menu { list-style:none; margin:0; padding:0; max-height:0; overflow:hidden; transition:max-height 0.3s ease, margin 0.3s ease; }
  .mobile-nav-menu .sub-menu a { padding:.6rem 1rem .6rem 2rem; font-size:.9rem; color:#c7c7ca; }
  .mobile-nav-menu .menu-item-has-children > a { cursor:pointer; }
  .mobile-nav-menu .menu-item-has-children > a::after { content:'▶'; margin-left:auto; opacity:.6; transition:transform 0.3s ease; font-size:.8em; }
  .mobile-nav-menu .menu-item-has-children.expanded > a::after { transform:rotate(90deg); }
  .mobile-nav-menu .menu-item-has-children.expanded .sub-menu { max-height:500px; margin:.25rem 0 .5rem; }
  
  /* 移动端语言切换 */
  .mobile-lang-section { margin-top:1.5rem; padding:0 1rem; }
  .mobile-lang-title { font-size:.85rem; color:#a6a6b2; margin-bottom:.75rem; padding:0 1rem; text-transform:uppercase; letter-spacing:.5px; }
  .mobile-lang-options { display:flex; flex-direction:column; gap:.25rem; }
  .mobile-lang-item { display:flex; align-items:center; justify-content:space-between; padding:.65rem .85rem; border-radius:.5rem; color:#e7e7ea; text-decoration:none; font-size:.9rem; }
  .mobile-lang-item:hover { background:#1b1b22; }
  .mobile-lang-item.active { background:#171720; border:1px solid #2a2a33; }
  .mobile-lang-item .check { opacity:.9; font-size:1rem; }
}