:root { --ink:#172033; --muted:#7d879b; --line:#e8ebf2; --blue:#4169e1; --canvas:#f5f7fb; font-size:16px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
button,input,textarea,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:wait; opacity:.6; }
a { color:var(--blue); text-decoration:none; }
a:hover { color:#3153b6; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid #99b0f7; outline-offset:3px; }
svg { width:20px; height:20px; flex:none; }
[hidden] { display:none!important; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:226px; position:fixed; inset:0 auto 0 0; display:flex; flex-direction:column; background:#fff; border-right:1px solid var(--line); padding:24px 14px 18px; z-index:10; }
.brand { display:flex; align-items:center; min-height:42px; padding:0 3px 27px; }
.brand-identity { display:flex; align-items:center; gap:8px; width:100%; min-width:0; }
.brand-logo-frame { position:relative; display:block; width:96px; height:35px; overflow:hidden; flex:none; }
.brand-logo-image { position:absolute; left:0; top:50%; width:96px; max-width:none; height:auto; transform:translateY(-50%); }
.brand-logo-divider { width:1px; height:25px; background:#e2e7f0; flex:none; }
.brand-platform-name { color:#27344d; font-size:14px; font-weight:700; line-height:1.2; white-space:nowrap; }
nav { display:grid; gap:4px; }
.nav-item { min-height:43px; display:flex; align-items:center; gap:12px; border:0; border-radius:9px; padding:0 12px; color:#657087; background:transparent; text-decoration:none; font-size:14px; font-weight:500; text-align:left; }
.nav-item:hover { background:#f5f7fc; color:#304056; }
.nav-item.active { background:#edf2ff; color:#375dcc; font-weight:650; }
.nav-item svg { width:18px; height:18px; }
.nav-section { color:#929cac; font-size:12px; font-weight:600; letter-spacing:.1em; padding:27px 12px 10px; }
.sidebar-note { display:flex; align-items:center; gap:11px; margin:auto 5px 18px; padding:16px 8px; color:#8c96a8; font-size:12px; line-height:1.7; }
.small-logo { color:#536b9e; font-size:14px; font-weight:700; border-right:1px solid var(--line); padding-right:10px; }
.profile { display:flex; gap:10px; align-items:center; border-top:1px solid var(--line); padding:15px 4px 0; }
.profile>div { display:flex; flex-direction:column; min-width:0; }
.profile strong { font-size:13px; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile small { color:#8d97a8; font-size:12px; margin-top:4px; }
.avatar { width:32px; height:32px; display:grid; place-items:center; color:#4160b3; background:#e8eefc; border-radius:50%; font-size:12px; font-weight:600; flex:none; }
.logout { margin-left:auto; color:#7d879b; background:none; border:0; font-size:12px; padding:5px 0; }
.workspace { min-width:0; flex:1; margin-left:226px; display:flex; flex-direction:column; }
.topbar { min-height:78px; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 30px; position:sticky; top:0; z-index:5; backdrop-filter:blur(12px); }
.topbar h1 { font-size:18px; margin:0; letter-spacing:-.02em; }
.header-actions { display:flex; align-items:center; gap:20px; }
.guide-link { color:#7b869a; font-size:14px; }
.primary-button,.secondary-button { min-height:38px; border:0; border-radius:8px; color:#fff; background:var(--blue); padding:9px 15px; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:7px; line-height:1.4; }
.primary-button { box-shadow:0 5px 13px #4169e11c; }
.primary-button:hover { color:white; background:#365cce; }
.primary-button svg { width:16px; height:16px; }
.secondary-button { background:#fff; color:#59677e; border:1px solid #dfe5ef; }
.secondary-button:hover { background:#f7f9fd; }
.content { padding:24px 30px 34px; width:100%; max-width:1550px; margin:0 auto; flex:1; }
.page-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:2px 0 23px; }
.page-intro h2 { font-size:20px; margin:0 0 9px; font-weight:650; letter-spacing:-.025em; }
.page-intro p { margin:0; color:#7c879a; font-size:14px; line-height:1.7; }
.total-label { color:#7d89a0; background:#edf1f8; padding:7px 12px; border-radius:7px; font-size:13px; white-space:nowrap; }
.panel { background:#fff; border:1px solid #e9ecf2; border-radius:12px; box-shadow:0 2px 7px rgba(30,44,70,.025); padding:20px; }
.catalog-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.catalog-heading h2 { font-size:16px; margin:0; }
.search-box { display:flex; gap:9px; align-items:center; background:#f8fafe; border:1px solid #e6eaf1; border-radius:8px; padding:0 12px; width:320px; color:#94a0b4; }
.search-box svg { width:17px; }
.search-box input { border:0; padding:11px 0; background:none; min-width:0; width:100%; color:var(--ink); font-size:14px; outline:none; }
.search-box:focus-within { border-color:#91a7e5; box-shadow:0 0 0 3px #edf2ff; }
.search-box input:focus-visible { outline:none; }
input::placeholder,textarea::placeholder { color:#a0a9b8; }
.filter-row { display:flex; flex-wrap:wrap; gap:8px; padding:21px 0 18px; border-bottom:1px solid #eef1f6; }
.filter-tab { border:0; border-radius:7px; background:transparent; color:#768297; padding:7px 12px; font-size:14px; }
.filter-tab:hover { background:#f5f7fc; }
.filter-tab.selected { background:#edf2ff; color:#3b60cb; font-weight:600; }
.results-heading { display:flex; justify-content:space-between; color:#8c97a8; font-size:12px; padding:18px 0; }
.tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.tool-card { border:1px solid #e7ebf3; border-radius:10px; padding:19px 18px 0; display:flex; flex-direction:column; min-width:0; transition:border-color .15s,box-shadow .15s; }
.tool-card:hover { border-color:#cdd8f4; box-shadow:0 5px 18px #23375a08; }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tool-icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; background:#edf2ff; color:#4267d1; flex:none; }
.tool-icon svg { width:21px; height:21px; }
.tone-1 { background:#ebf9f1; color:#2a9a67; }.tone-2 { background:#fff7e8; color:#c38b2c; }.tone-3 { background:#f4efff; color:#8665c4; }.tone-4 { background:#eaf6fc; color:#368aae; }
.badge { font-size:12px; padding:4px 7px; border-radius:5px; background:#f4f6fa; color:#8590a3; white-space:nowrap; }
.badge.published { background:#edf8f1; color:#379064; }.badge.draft { background:#f1f4f9; color:#8390a4; }.badge.offline { background:#fff6e7; color:#b38b47; }
.tool-card h3 { font-size:16px; line-height:1.5; margin:16px 0 8px; overflow-wrap:anywhere; }
.tool-description { color:#7c879b; font-size:14px; line-height:1.8; margin:0 0 20px; white-space:pre-wrap; overflow-wrap:anywhere; flex:1; }
.tool-meta { display:flex; justify-content:space-between; gap:8px; color:#929cad; font-size:12px; padding-bottom:16px; }
.tool-meta>span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:44%; }
.card-actions { border-top:1px solid #edf0f5; display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:13px 0; font-size:13px; min-height:49px; }
.open-tool { display:inline-flex; align-items:center; gap:5px; font-weight:600; }.open-tool svg { width:14px; height:14px; }
.manage-actions { display:flex; align-items:center; gap:11px; }.manage-actions button { padding:0; border:0; background:none; color:#77849a; font-size:13px; }.manage-actions button:hover { color:var(--blue); }.manage-actions .delete-button { color:#b58b8b; }
.unpublished { color:#9da6b6; font-size:12px; }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:340px; padding:35px 20px 45px; }
.empty-icon { color:#879ecf; background:#f1f5fd; width:64px; height:64px; border-radius:17px; display:grid; place-items:center; }.empty-icon svg { width:28px; height:28px; }
.empty-state h3 { margin:20px 0 10px; font-size:17px; font-weight:600; }.empty-state p { color:#97a1b2; font-size:14px; margin:0 0 22px; line-height:1.8; }
.footer { text-align:center; font-size:12px; padding:0 20px 22px; color:#a4acba; }
.guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.guide-panel { padding:24px; }.guide-panel h2 { font-size:17px; margin:18px 0 12px; }.guide-panel p,.guide-panel li { color:#7b879b; font-size:14px; line-height:1.95; }.guide-panel ol,.guide-panel ul { padding-left:21px; }.guide-panel li { padding-left:4px; margin:8px 0; }.guide-bottom { margin-top:16px; }.guide-bottom h2 { margin-top:0; }.guide-bottom .primary-button { margin-top:12px; }.info-note { background:#f7f9fd; padding:12px; border-radius:8px; font-size:13px; color:#7b89a3; line-height:1.8; }
dialog { border:1px solid #e1e7f1; border-radius:14px; padding:0; width:min(600px,calc(100% - 32px)); max-height:90dvh; color:var(--ink); box-shadow:0 25px 85px #17203333; }
dialog::backdrop { background:#17203370; backdrop-filter:blur(2px); }
.dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:23px 24px 18px; border-bottom:1px solid var(--line); }.dialog-head h2 { margin:0; font-size:19px; }.dialog-head p { margin:8px 0 0; font-size:13px; color:#8a96a9; }
.icon-button { width:32px; height:32px; display:grid; place-items:center; border:1px solid #e2e6ee; background:#fff; border-radius:8px; color:#8793a5; }
.form-content { padding:20px 24px; }.kind-picker { border:0; padding:0; margin:0 0 20px; display:flex; gap:12px; }.kind-picker legend { font-size:14px; font-weight:600; margin-bottom:10px; }.kind-picker label { padding:12px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:8px; font-size:14px; flex:1; cursor:pointer; }.kind-picker label:has(:checked) { background:#f4f7ff; border-color:#a4b8ee; color:var(--blue); }.kind-picker svg { width:17px; }.kind-picker input { accent-color:var(--blue); }
.field { display:flex; flex-direction:column; gap:9px; font-size:14px; font-weight:600; margin-bottom:18px; }.field input,.field textarea,.field select { width:100%; min-width:0; background:#fff; border:1px solid #dfe5ee; border-radius:8px; color:#43506a; padding:11px 12px; font-size:14px; font-weight:400; }.field textarea { resize:vertical; line-height:1.7; }.field input[type=file] { background:#f8fafe; border-style:dashed; padding:16px 12px; }.field-help { color:#8b98ac; font-size:12px; line-height:1.8; margin:8px 0; }.file-current { font-size:12px; color:#3b966c; }
.dialog-actions { display:flex; justify-content:flex-end; gap:9px; padding:17px 24px; border-top:1px solid var(--line); background:#fcfdff; }.form-error { color:#b94e52; background:#fff2f2; border:1px solid #f3dede; padding:10px 12px; border-radius:7px; font-size:14px; line-height:1.6; margin-bottom:12px; }
#confirm { max-width:460px; }.confirm-message { color:#748098; padding:0 24px; margin:22px 0; line-height:1.8; font-size:14px; }#confirm-error { margin:0 24px 20px; }
#toast { position:fixed; bottom:32px; left:50%; transform:translateX(-50%); color:#fff; background:#293a59; border-radius:9px; box-shadow:0 5px 25px #17203326; padding:13px 22px; font-size:14px; z-index:100; max-width:90%; }
.login-page { min-height:100dvh; display:grid; place-items:center; padding:30px 20px; background:radial-gradient(ellipse at 25% 0%,#eaf0ff 0,transparent 55%),var(--canvas); }.login-card { width:min(430px,100%); padding:34px 36px 28px; background:#fff; border:1px solid #e2e8f3; border-radius:16px; box-shadow:0 18px 60px #34507e0d; }.login-brand { display:flex; }.login-brand .brand-logo-frame { width:120px; height:40px; }.login-brand .brand-logo-image { width:120px; }.login-brand .brand-platform-name { font-size:15px; }.login-heading { margin:31px 0 25px; }.login-heading>p { font-size:12px; color:#8398c3; letter-spacing:.15em; margin:0 0 11px; }.login-heading h1 { font-size:22px; letter-spacing:-.03em; margin:0 0 11px; }.login-heading>span { font-size:14px; color:#8b97a9; }.login-card form>.primary-button { width:100%; margin-top:4px; min-height:44px; }.login-card>small { display:block; text-align:center; font-size:12px; color:#a0aaba; margin-top:22px; }
.runner-content { display:flex; flex-direction:column; }.runner-caption { display:flex; justify-content:space-between; align-items:center; gap:16px; color:#7d89a0; font-size:13px; margin-bottom:16px; line-height:1.8; }.runner-caption a { flex:none; }.tool-frame { width:100%; min-height:calc(100dvh - 225px); flex:1; background:#fff; border:1px solid var(--line); border-radius:10px; }
.initial-state { min-height:100dvh; display:grid; place-items:center; font-size:14px; color:#7d879b; }.error-state { margin:30px; }.error-state h2 { font-size:18px; }.error-state p { font-size:14px; color:#8190a6; }
@media(min-width:1700px) { .tool-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1200px) { .tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:850px) { .guide-grid { grid-template-columns:1fr; }.catalog-heading { align-items:flex-start; flex-direction:column; }.search-box { width:100%; }.tool-meta { flex-wrap:wrap; }.tool-meta>span:first-child { max-width:100%; } }
@media(max-width:720px) { .sidebar { width:68px; padding:24px 9px 14px; }.brand { justify-content:center; padding:0 0 27px; }.brand-identity { justify-content:center; }.brand-logo-frame { width:35px; height:35px; }.brand-logo-image { width:166px; }.brand-logo-divider,.brand-platform-name,.nav-item>span,.nav-section,.sidebar-note,.profile>div,.logout { display:none; }.nav-item { justify-content:center; padding:0; }.nav-item svg { width:20px; height:20px; }.sidebar nav+nav { margin-top:20px; }.profile { margin-top:auto; justify-content:center; padding-top:15px; }.workspace { margin-left:68px; }.topbar { min-height:70px; padding:12px 16px; }.header-actions { gap:8px; }.guide-link { display:none; }.topbar h1 { font-size:17px; }.content { padding:20px 16px; }.page-intro { align-items:flex-start; }.page-intro h2 { font-size:18px; }.page-intro p { font-size:13px; }.total-label { display:none; }.panel { padding:16px; }.tool-grid { grid-template-columns:1fr; }.filter-row { gap:4px; }.filter-tab { padding:7px 9px; font-size:13px; }.empty-state { padding:25px 8px; min-height:320px; }.footer { font-size:12px; }.runner-caption { flex-direction:column; align-items:flex-start; }.login-brand .brand-logo-frame { width:120px; }.login-brand .brand-logo-image { width:120px; }.login-brand .brand-logo-divider,.login-brand .brand-platform-name { display:block; }.login-brand .brand-identity { justify-content:flex-start; } }
@media(max-width:420px) { .login-card { padding:28px 24px; }.login-heading h1 { font-size:20px; }.dialog-head { padding:20px 18px 16px; }.form-content { padding:18px; }.dialog-actions { padding:15px; flex-wrap:wrap; }.kind-picker { flex-direction:column; }.topbar .primary-button { font-size:13px; padding:8px 10px; }.topbar .primary-button svg { display:none; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }