/* ============================================================
   OneTap Toolbox — 共用样式（首页 + 所有单工具页面）
   ============================================================ */
:root{
  --bg:#f5f7fa;--card:#fff;--header:#fff;--text:#1e293b;--text2:#475569;
  --border:#e2e8f0;--accent:#3b82f6;--accent2:#2563eb;--input:#fff;
  --inborder:#cbd5e1;--code:#f1f5f9;--ok:#10b981;--err:#ef4444;
  --shadow:0 4px 6px -1px rgba(0,0,0,.1);--radius:16px;
}
html.dark,body.dark{
  --bg:#0f172a;--card:#1e293b;--header:#1e293b;--text:#e2e8f0;--text2:#94a3b8;
  --border:#334155;--accent:#3b82f6;--accent2:#60a5fa;--input:#1e293b;
  --inborder:#475569;--code:#0f172a;--ok:#34d399;--err:#f87171;
  --shadow:0 4px 6px -1px rgba(0,0,0,.5);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;}
body{background:var(--bg);color:var(--text);transition:background .2s,color .2s;min-height:100vh;display:flex;flex-direction:column;line-height:1.5;}
[hidden]{display:none!important;}
a{color:var(--accent);}

/* ---------- 顶部导航 ---------- */
.navbar{background:var(--header);border-bottom:1px solid var(--border);padding:.75rem 1.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;box-shadow:var(--shadow);position:sticky;top:0;z-index:100;}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--text);text-decoration:none;white-space:nowrap;}
.brand i{color:var(--accent);}
.nav-menu{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;}
.nav-menu a{text-decoration:none;color:var(--text2);cursor:pointer;display:flex;align-items:center;gap:.4rem;transition:.2s;font-weight:500;}
.nav-menu a:hover,.nav-menu a.active{color:var(--accent);}
.search-box{display:flex;align-items:center;background:var(--input);border:1px solid var(--inborder);border-radius:40px;padding:.4rem 1rem;flex:1;max-width:260px;}
.search-box i{color:var(--text2);margin-right:.5rem;}
.search-box input{background:transparent;border:none;outline:none;color:var(--text);width:100%;font-size:.9rem;}
.lang-switch{display:flex;gap:.25rem;align-items:center;background:var(--bg);padding:.2rem .4rem;border-radius:40px;border:1px solid var(--border);}
.lang-btn{background:transparent;border:none;color:var(--text2);font-size:.72rem;font-weight:600;padding:.25rem .5rem;border-radius:20px;cursor:pointer;transition:.2s;}
.lang-btn.active{background:var(--accent);color:#fff;}
.theme-toggle{background:transparent;border:1px solid var(--border);border-radius:40px;padding:.4rem .75rem;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:.4rem;transition:.2s;font-size:.85rem;}
.theme-toggle:hover{background:var(--border);}

/* ---------- 主体布局 ---------- */
main{flex:1;padding:2rem 1.5rem;max-width:1400px;margin:0 auto;width:100%;}
main.narrow{max-width:900px;}
.hero{margin-bottom:1rem;}
.hero h1{font-size:1.5rem;line-height:1.35;}
.privacy-banner{background:var(--card);border:1px solid var(--border);border-radius:40px;padding:.6rem 1.5rem;display:inline-flex;align-items:center;gap:.75rem;font-size:.85rem;color:var(--text2);margin-bottom:1.5rem;box-shadow:var(--shadow);}
.privacy-banner i{color:var(--ok);}
.category-title{font-size:1.2rem;margin:1.5rem 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--accent);display:inline-block;font-weight:600;}

/* ---------- 首页工具卡片（卡片 + 打开按钮） ---------- */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem;}
.tool-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.5rem;transition:.15s;}
.tool-card:hover{transform:translateY(-3px);border-color:var(--accent);}
.tool-name{font-weight:600;display:flex;align-items:center;gap:.5rem;}
.tool-name i{color:var(--accent);}
.tool-desc{color:var(--text2);font-size:.85rem;flex:1;}
.tool-card .btn{align-self:flex-start;text-decoration:none;}

/* ---------- 按钮 ---------- */
.btn-sm,.btn{background:var(--accent);border:1px solid var(--accent);color:#fff;padding:.4rem .9rem;border-radius:20px;font-size:.78rem;font-weight:500;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:.35rem;line-height:1.2;}
.btn-sm:hover,.btn:hover{background:var(--accent2);border-color:var(--accent2);}
.btn-sm.secondary,.btn.secondary{background:transparent;color:var(--accent);}
.btn-sm.secondary:hover,.btn.secondary:hover{background:var(--accent);color:#fff;}
.btn-sm.ghost,.btn.ghost{background:transparent;border-color:var(--border);color:var(--text2);}
.btn-sm.ghost:hover,.btn.ghost:hover{background:var(--border);color:var(--text);}
.btn-sm:disabled,.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ---------- 工具页 ---------- */
.breadcrumb{font-size:.85rem;margin-bottom:1rem;}
.breadcrumb a{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--text2);}
.breadcrumb a:hover{color:var(--accent);}
.tool-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;}
.tool-head{font-size:1.35rem;display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem;}
.tool-head i{color:var(--accent);}
.tool-lead{color:var(--text2);font-size:.88rem;margin-bottom:1.25rem;}
.tool-body{display:flex;flex-direction:column;gap:.9rem;}
.field{display:flex;flex-direction:column;gap:.35rem;}
.field-label{font-size:.82rem;font-weight:600;color:var(--text2);}
.io,textarea.io,input.io,select.io{width:100%;padding:.6rem .75rem;border-radius:10px;border:1px solid var(--inborder);background:var(--input);color:var(--text);font-size:.85rem;font-family:Consolas,'SFMono-Regular',Menlo,monospace;resize:vertical;}
select.io{font-family:inherit;}
.io:focus{outline:2px solid var(--accent);outline-offset:1px;}
.io[readonly]{background:var(--code);}
.tool-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}
.inline-group{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;}
.inline-group input,.inline-group select{flex:1;min-width:80px;padding:.45rem .6rem;border-radius:8px;border:1px solid var(--inborder);background:var(--input);color:var(--text);}
.inline-group .sep{color:var(--text2);}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;}
.check-line{display:flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--text2);cursor:pointer;}
.check-line input{width:auto;accent-color:var(--accent);}
.hint{font-size:.78rem;color:var(--text2);}
.status-ok{color:var(--ok);}
.status-err{color:var(--err);}
.kv{width:100%;border-collapse:collapse;font-size:.85rem;}
.kv th,.kv td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--border);vertical-align:top;word-break:break-all;}
.kv th{color:var(--text2);font-weight:600;white-space:nowrap;width:34%;}
.meter{height:8px;border-radius:20px;background:var(--border);overflow:hidden;}
.meter > i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s,background .2s;}

/* ---------- 设置 / 关于 ---------- */
.page-section{display:none;}
.page-section.active{display:block;}
.settings-card{background:var(--card);border-radius:var(--radius);padding:1.5rem;border:1px solid var(--border);max-width:640px;box-shadow:var(--shadow);}
.settings-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:.5rem;}
.settings-item:last-child{border-bottom:none;}
.settings-card p{margin-top:1rem;line-height:1.75;font-size:.9rem;}

/* ---------- 提示条 ---------- */
.toast{position:fixed;left:50%;bottom:2rem;transform:translate(-50%,1rem);background:var(--text);color:var(--bg);padding:.55rem 1.1rem;border-radius:30px;font-size:.82rem;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s;z-index:999;}
.toast.show{opacity:1;transform:translate(-50%,0);}

footer{text-align:center;padding:1.5rem;font-size:.8rem;color:var(--text2);border-top:1px solid var(--border);}

/* ---------- 响应式 / RTL ---------- */
@media(max-width:768px){
  .navbar{flex-direction:column;align-items:stretch;}
  .search-box{max-width:100%;}
  .brand{justify-content:center;}
  main{padding:1.25rem 1rem;}
}
html[dir="rtl"] .breadcrumb a i{transform:scaleX(-1);}