* { margin:0; padding:0; box-sizing:border-box; }
:root {
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-secondary: #2c2c2e;
    --text: #ffffff;
    --text-secondary: #8e8e93;
    --text-tertiary: #636366;
    --border: rgba(255,255,255,0.08);
    --button-bg: #0a84ff;
    --shadow-inset: inset 0 0 0 1px rgba(255,255,255,0.08);
}
body.light {
    --bg: #f2f2f7;
    --surface: #ffffff;
    --surface-secondary: #e5e5ea;
    --text: #000000;
    --text-secondary: #6e6e73;
    --text-tertiary: #8e8e93;
    --border: rgba(0,0,0,0.08);
    --button-bg: #0071e3;
    --shadow-inset: inset 0 0 0 1px rgba(0,0,0,0.08);
}
html, body { height:100%; }
body { background:var(--bg); font-family:-apple-system, "SF Pro Text", sans-serif; color:var(--text); overflow:hidden; transition:background 0.3s, color 0.3s; }

.mdui-spinner svg circle {
    stroke-width: 5.5 !important;
    stroke: var(--button-bg) !important;
}
.content-loading .mdui-spinner svg circle {
    stroke-width: 6.5 !important;
}
.content-loading .mdui-spinner { width:36px; height:36px; }
.loading-tip .mdui-spinner { width:36px; height:36px; }

.home-container {
    max-width:720px; margin:0 auto;
    height:100vh; height:100dvh;
    display:flex; flex-direction:column;
    padding:0 20px;
}

.home-header {
    flex-shrink:0;
    padding-top:calc(44px + env(safe-area-inset-top, 0px));
    padding-bottom:20px;
    background:var(--bg);
    position:relative;
    z-index:10;
}
.header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.header-text h1 { font-size:30px; font-weight:700; color:var(--text); letter-spacing:-0.5px; line-height:1.15; }
.header-text p { font-size:13px; color:var(--text-tertiary); margin-top:4px; }
.header-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }
.icon-btn { background:var(--surface-secondary); border:none; border-radius:50%; width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--text); cursor:pointer; font-size:16px; transition:all 0.2s; }
.icon-btn:active { transform:scale(0.94); background:var(--border); }

.content-area {
    flex:1; min-height:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:20px;
}
.tools-container { opacity:1; transition:opacity 0.3s ease; }
.tools-container.loading { opacity:0; pointer-events:none; }

.content-loading {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:40px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
    background:rgba(0,0,0,0.85); backdrop-filter:blur(8px); padding:24px 32px; border-radius:28px;
    z-index:100; opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease;
    pointer-events:none;
}
body.light .content-loading { background:rgba(255,255,255,0.9); }
.content-loading.show { opacity:1; visibility:visible; }
.content-loading-text { font-size:14px; font-weight:500; color:var(--text-secondary); }

.section-title { font-size:13px; font-weight:600; color:var(--text-secondary); margin:4px 0 10px 0; padding-left:2px; display:flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:0.6px; }
.section-title:not(:first-child) { margin-top:20px; }
.section-title i { font-size:12px; color:var(--button-bg); }

.tools-grid {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
}
.tool-card {
    background:var(--surface); border-radius:15px; padding:14px;
    display:flex; flex-direction:column; gap:10px; cursor:pointer;
    transition:all 0.2s ease; border:0.5px solid var(--border);
    min-height:104px;
}
.tool-card:active { transform:scale(0.97); background:var(--surface-secondary); }
.tool-icon {
    width:38px; height:38px; background:var(--button-bg); border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    font-size:17px; color:white; flex-shrink:0;
}
.tool-info { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; }
.tool-name { font-size:14.5px; font-weight:600; margin-bottom:3px; color:var(--text); line-height:1.25; }
.tool-desc {
    font-size:11.5px; color:var(--text-secondary); line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.error-state { text-align:center; padding:60px 20px; color:var(--text-secondary); }
.error-state i { font-size:40px; color:var(--error); margin-bottom:16px; display:block; opacity:0.8; }
.error-state p { font-size:14px; margin-bottom:16px; }
.error-state button { padding:10px 20px; border-radius:20px; border:none; background:var(--surface-secondary); color:var(--text); cursor:pointer; font-size:14px; }

.footer { margin-top:36px; text-align:center; padding:20px; color:var(--text-secondary); font-size:12px; border-top:0.5px solid var(--border); }

.panel-overlay {
    position:fixed; top:0; left:0; width:100%; height:100%; z-index:999;
    background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:all 0.3s ease;
}
.panel-overlay.active { opacity:1; visibility:visible; }

.settings-panel, .about-panel {
    position:fixed; top:0; right:0; height:100%; z-index:1000;
    background:var(--surface); transform:translateX(100%); transition:transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    display:flex; flex-direction:column; box-shadow:-4px 0 20px rgba(0,0,0,0.5);
}
.settings-panel { width:340px; max-width:85%; }
.about-panel { width:400px; max-width:92%; z-index:1001; }
.settings-panel.open, .about-panel.open { transform:translateX(0); }

.settings-header { display:flex; align-items:center; padding:16px 20px; border-bottom:0.5px solid var(--border); gap:12px; flex-shrink:0; }
.settings-header h2 { font-size:18px; font-weight:600; color:var(--text); }
.settings-close { background:transparent; border:none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); cursor:pointer; font-size:20px; transition:all 0.2s; }
.settings-close:active { background:var(--surface-secondary); }
.settings-body, .about-body { flex:1; overflow-y:auto; padding:16px 20px; -webkit-overflow-scrolling:touch; }
.about-body { padding:0 20px 24px; }
.settings-group { border-bottom:0.5px solid var(--border); padding:0 0 12px 0; margin-bottom:12px; }
.settings-group-title { font-size:12px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:12px; padding-top:4px; }
.settings-item { display:flex; justify-content:space-between; align-items:center; padding:10px 0; gap:12px; }
.settings-item-label { font-size:15px; color:var(--text); }
.settings-item-desc { font-size:12px; color:var(--text-tertiary); margin-top:2px; }
.toggle-switch { width:44px; height:26px; border-radius:13px; background:var(--border); position:relative; cursor:pointer; transition:background 0.25s; flex-shrink:0; }
.toggle-switch.active { background:var(--button-bg); }
.toggle-switch::after { content:''; position:absolute; width:22px; height:22px; border-radius:50%; background:white; top:2px; left:2px; transition:transform 0.25s ease; box-shadow:0 2px 4px rgba(0,0,0,0.2); }
.toggle-switch.active::after { transform:translateX(18px); }
.settings-select { background:var(--surface-secondary); color:var(--text); border:0.5px solid var(--border); padding:6px 12px; border-radius:8px; font-size:14px; font-family:inherit; cursor:pointer; outline:none; }
.settings-select:focus { border-color:var(--button-bg); }
.settings-select option { background:var(--surface-secondary); color:var(--text); }

.settings-link { display:flex; justify-content:space-between; align-items:center; padding:12px 0; cursor:pointer; gap:12px; transition:opacity 0.15s; }
.settings-link:active { opacity:0.6; }
.settings-link-text { display:flex; align-items:center; gap:10px; font-size:15px; color:var(--text); }
.settings-link-text i { font-size:15px; color:var(--button-bg); width:18px; text-align:center; }
.settings-link .chev { color:var(--text-tertiary); font-size:13px; }

.author-card { display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 0 22px; border-bottom:0.5px solid var(--border); }
.author-avatar { width:88px; height:88px; border-radius:50%; object-fit:cover; background:var(--surface-secondary); border:2px solid var(--border); box-shadow:0 4px 16px rgba(0,0,0,0.4); margin-bottom:14px; }
.author-avatar-fallback { width:88px; height:88px; border-radius:50%; display:none; align-items:center; justify-content:center; background:var(--button-bg); color:#fff; font-size:34px; margin-bottom:14px; font-weight:700; }
.author-name { font-size:19px; font-weight:700; color:var(--text); margin-bottom:4px; }
.author-sub { font-size:12.5px; color:var(--text-tertiary); margin-bottom:16px; }
.author-gh { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:12px; background:var(--surface-secondary); color:var(--text); text-decoration:none; font-size:14px; font-weight:500; transition:all 0.2s; border:0.5px solid var(--border); }
.author-gh:active { transform:scale(0.97); background:var(--border); }
.author-gh i { font-size:16px; }

.faq-item { background:var(--surface-secondary); border-radius:14px; margin-bottom:10px; overflow:hidden; }
.faq-q { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; font-size:14px; font-weight:500; color:var(--text); transition:background 0.15s; }
.faq-q:active { background:var(--border); }
.faq-q .arrow { font-size:11px; color:var(--text-tertiary); transition:transform 0.25s; flex-shrink:0; }
.faq-item.open .faq-q .arrow { transform:rotate(180deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height 0.3s ease; font-size:13px; color:var(--text-secondary); line-height:1.65; }
.faq-item.open .faq-a { max-height:600px; }
.faq-a-inner { padding:0 16px 14px; }
.faq-a-inner code { background:var(--surface); padding:2px 6px; border-radius:5px; font-family:"SF Mono","Menlo",monospace; font-size:12px; color:var(--text); }
.faq-a-inner strong { color:var(--text); font-weight:600; }
.faq-a-inner a { color:var(--button-bg); }

.tool-iframe-container {
    position:fixed; top:0; left:0; width:100%; height:100%; z-index:1000;
    background:var(--bg); display:none; flex-direction:column;
}
.tool-iframe-container.active { display:flex; }

.tool-navbar { display:flex; align-items:center; padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top, 0px)); background:var(--surface); border-bottom:0.5px solid var(--border); gap:16px; flex-shrink:0; }
.back-btn { background:var(--surface-secondary); border:none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); font-size:18px; transition:all 0.2s; }
.back-btn:active { transform:scale(0.94); background:var(--border); }
.tool-title { font-size:17px; font-weight:600; color:var(--text); }

.iframe-wrapper { position:relative; flex:1; width:100%; overflow:hidden; }
.tool-iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; background:var(--bg); }
.loading-tip { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:rgba(0,0,0,0.85); backdrop-filter:blur(8px); padding:20px 28px; border-radius:24px; }
body.light .loading-tip { background:rgba(255,255,255,0.9); }
.loading-tip.hide { display:none; }
.loading-text { font-size:14px; color:var(--text-secondary); font-weight:500; }

/* 外部网站沉浸式 */
.tool-iframe-container.immersive .tool-navbar { display:none; }
.tool-iframe-container.immersive .iframe-wrapper { flex:1; }

.toast {
    position:fixed; bottom:40px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--surface); color:var(--text); padding:12px 24px; border-radius:14px;
    font-weight:590; font-size:14px; opacity:0; pointer-events:none; transition:all 0.3s;
    z-index:5000; box-shadow:0 8px 32px rgba(0,0,0,0.4), var(--shadow-inset);
    display:flex; align-items:center; gap:8px; max-width:90%; text-align:center;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast i { color:var(--button-bg); }
.toast.error i { color:var(--error); }

@media (max-width: 480px) {
    .tools-grid { gap:10px; }
    .tool-card { padding:12px; min-height:96px; }
    .tool-icon { width:34px; height:34px; font-size:15px; border-radius:10px; }
    .tool-name { font-size:13.5px; }
    .tool-desc { font-size:11px; }
}