.shell{width:100%;max-width:none;margin:0;grid-template-columns:250px minmax(0,1fr)}
.sidebar{left:0;padding-left:12px;padding-right:12px}
.main{width:100%;min-width:0}
.view{max-width:none;margin:0}
@media(min-width:801px){
  html,body{height:100%;overflow:hidden}
  .shell{height:100dvh;min-height:0;overflow:hidden}
  .sidebar{position:relative;top:auto;height:100dvh;overflow:hidden}
  .main{height:100dvh;overflow-y:auto;overscroll-behavior-y:contain}
}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;flex:none}
.nav-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tool-view{padding:0 0 48px!important;width:100%}
.tool-hero{min-height:165px;background:linear-gradient(110deg,#eef3ff,#f8faff 60%,#eef8f6);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:26px 32px;overflow:hidden}
.tool-hero h1{font-size:30px;letter-spacing:-.04em;margin:0 0 8px}
.tool-hero p:last-child{font-size:13px;color:#71809a;margin:0}
.tool-hero-mark{color:#cad7ff;line-height:1}
.tool-hero-mark svg{width:86px;height:86px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.tool-gallery-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:28px 32px 17px}
.tool-gallery-head strong{font-size:17px;letter-spacing:-.03em}
.tool-gallery-head p{font-size:12px;line-height:1.5;color:#8b99ad;margin:5px 0 0}
.tool-gallery-head>span{font-size:11px;color:#3c62d6;font-weight:800;background:#e8eeff;border-radius:999px;padding:8px 11px;white-space:nowrap}
.tool-gallery{padding:0 32px;display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px}
.tool-card{min-width:0;min-height:158px;padding:20px 18px;text-align:left;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:15px;background:#fff;border:1px solid #e2e8f2;border-radius:15px;color:#34435f;box-shadow:0 4px 14px #263a6808;transition:border-color .16s,box-shadow .16s,transform .16s}
.tool-card:hover,.tool-card:focus-visible{border-color:#8ba3ea;box-shadow:0 12px 26px #436bd521;transform:translateY(-2px);outline:none}
.tool-card-icon,.tool-dialog-icon{width:43px;height:43px;border-radius:11px;background:#e8eeff;color:#4264d8;display:grid;place-items:center;flex:none}
.tool-card-icon svg,.tool-dialog-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tool-card-copy{min-width:0}.tool-card strong{display:block;font-size:14px;line-height:1.4}.tool-card small{display:block;font-size:11px;line-height:1.55;color:#8b99ad;margin-top:6px}
.tool-card-arrow{position:absolute;right:18px;top:18px;color:#a2afc6;font-size:15px}
.tool-dialog{border:0;border-radius:20px;padding:0;width:min(1280px,calc(100vw - 42px));height:min(860px,calc(100dvh - 34px));max-width:none;max-height:none;overflow:hidden;box-shadow:0 30px 95px #10224666;background:#fff;color:var(--ink)}
.tool-dialog::backdrop{background:#10203c9c;backdrop-filter:blur(5px)}
.tool-dialog-shell{height:100%;display:flex;flex-direction:column;min-height:0}
.tool-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:18px 26px;border-bottom:1px solid #e8edf5;flex:none}
.tool-dialog-heading{display:flex;align-items:center;gap:13px;min-width:0}
.tool-dialog-heading p{margin:0 0 3px;font-size:10px;font-weight:750;color:#7b8aaa}
.tool-dialog-heading h2{margin:0;font-size:19px;letter-spacing:-.03em}
#tool-close{border:0;background:#f2f5fa;color:#64738f;width:34px;height:34px;border-radius:10px;font-size:23px;line-height:1}
#tool-close:hover{background:#e5ecfa;color:#244bc4}
.tool-dialog-intro{display:flex;align-items:center;justify-content:space-between;gap:15px;flex:none;padding:12px 26px;color:#74839b;font-size:12px}
.tool-dialog-intro p{margin:0}.tool-dialog-intro span{font-size:11px;color:#4f8c6c;background:#eaf5ee;border-radius:999px;padding:6px 9px;white-space:nowrap}
.tool-dialog-grid{min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,340px);border-top:1px solid #edf1f7}
.tool-stage{min-width:0;min-height:0;background:#f7f9fd;overflow:auto;padding:20px 24px 25px}
.tool-stage-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px}
.tool-stage-title strong{font-size:13px}.tool-stage-title small{font-size:10px;color:#9ba8bb}
.tool-preview{height:min(54vh,540px);min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:#ecf0f7;border:1px solid #e1e7f2;border-radius:14px;position:relative}
.tool-preview img{display:block;max-width:90%;max-height:90%;object-fit:contain;box-shadow:0 8px 25px #1b2b4b2a}
.tool-preview video{max-width:100%;max-height:100%;width:100%;height:100%;background:#172135}
.tool-preview audio{width:min(520px,90%)}
.tool-preview iframe{width:100%;height:100%;border:0;background:#fff}
.tool-companion{position:absolute;z-index:2;right:12px;bottom:12px;max-width:155px;min-width:90px;padding:8px;background:#ffffffed;border:1px solid #dce5f2;border-radius:9px;box-shadow:0 4px 15px #1d2b4824;display:grid;gap:5px;overflow:hidden}
.tool-companion strong{font-size:10px;color:#536785}.tool-companion img{max-width:130px;max-height:80px;object-fit:contain;box-shadow:none}.tool-companion span{font-size:10px;color:#71809a;word-break:break-all}
.pdf-preview-toolbar{width:100%;height:40px;flex:none;display:flex;align-items:center;justify-content:center;gap:15px;background:#f8faff;border-bottom:1px solid #dfe6f2;color:#657793;font-size:11px}
.pdf-preview-toolbar button{border:1px solid #d7e1f2;border-radius:6px;background:#fff;color:#3f60bb;font-size:11px;padding:5px 10px}
.pdf-preview-toolbar button:disabled{opacity:.35;cursor:default}
.pdf-preview-surface{flex:1;width:100%;min-height:0;overflow:auto;display:grid;place-items:center;padding:14px}
.pdf-preview-surface canvas{max-width:100%;background:#fff;box-shadow:0 6px 20px #1d2d4d2b}
.tool-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;color:#9aa8be}
.tool-empty svg{width:54px;height:54px;fill:none;stroke:#b8c5dd;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.tool-empty p{max-width:300px;margin:0;font-size:12px;line-height:1.7}
.tool-selected-files{padding:14px 0 0;display:grid;gap:6px}
.tool-file-list-title{font-size:11px;color:#7888a2;margin:3px 0}
.tool-file-row{min-width:0;display:flex;align-items:center;gap:8px;border:1px solid #e4eaf3;border-radius:8px;background:#fff;padding:7px 10px;font-size:11px;color:#52617a}
.tool-file-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.tool-file-row small{color:#9ba9bc;flex:none}
.tool-file-row button{border:1px solid #dfe7f4;border-radius:6px;background:#f8faff;color:#5270b6;font-size:12px;width:23px;height:23px;padding:0}
.tool-file-row button:disabled{opacity:.3;cursor:default}
.tool-settings{min-width:0;min-height:0;overflow:auto;padding:20px;border-left:1px solid #e8edf5;display:flex;flex-direction:column;gap:15px}
.tool-setting-head strong{font-size:13px;color:#354460}
.tool-setting-head p{margin:6px 0 0;color:#8b9aaf;font-size:11px;line-height:1.55}
.tool-file-picker{position:relative;min-height:82px;border:1.5px dashed #a8b9df;border-radius:12px;padding:13px;background:#f9fbff;display:flex;align-items:center;gap:12px;cursor:pointer}
.tool-file-picker:hover{border-color:#5879df;background:#f0f5ff}
.tool-file-picker b{display:grid;place-items:center;width:39px;height:39px;border-radius:10px;background:#e4ecff;color:#4165d5;font-size:22px;font-weight:450}
.tool-file-picker strong{display:block;font-size:12px;color:#3a4b6a}.tool-file-picker small{display:block;margin-top:5px;font-size:10px;color:#8d9ab0}
.tool-file-picker input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tool-options{display:grid;gap:12px}
.tool-field{display:grid;gap:6px;font-size:11px;font-weight:750;color:#56657f}
.tool-field input,.tool-field select{width:100%;min-height:40px;border:1px solid #dce4f0;background:#fff;border-radius:8px;padding:8px 10px;color:#263955;outline:none;font-size:12px}
.tool-field input:focus,.tool-field select:focus{border-color:#7191ec;box-shadow:0 0 0 3px #e4ebff}
.tool-field input[type=color]{padding:3px}.tool-field input[type=range]{padding:5px;min-height:22px;accent-color:#456be3}
.tool-tip{font-size:11px;color:#8292aa;margin:0;line-height:1.5}
.tool-dialog-foot{flex:none;min-height:70px;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:11px 24px;border-top:1px solid #e7ecf5;background:#fff}
.tool-dialog-foot>div{display:flex;gap:9px;flex:none}
.tool-dialog-foot button{min-height:39px;font-size:12px}
.tool-status{margin:0;font-size:11px;line-height:1.5;color:#6d7e99}.tool-status.error{color:#ba4340}
.wm-tabs,.wm-toolbar{display:flex;align-items:center;gap:5px;padding:4px;border-radius:10px;background:#eef2f9}
.wm-tabs button,.wm-toolbar button{border:0;background:transparent;border-radius:7px;padding:8px 11px;color:#70819e;font-size:11px;font-weight:750;flex:1}
.wm-tabs button.active,.wm-toolbar button.active{background:#fff;color:#355fe9;box-shadow:0 2px 8px #1e3c7720}
.wm-coordinates{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.wm-coordinates .tool-setting-head{grid-column:1/-1}
.wm-canvas-wrap{flex:1;width:100%;min-height:0;display:grid;place-items:center;overflow:auto;padding:12px;touch-action:none}
.wm-canvas{max-width:none;background:#fff;box-shadow:0 8px 24px #142a4d30;cursor:crosshair;touch-action:none}
.wm-toolbar{width:min(340px,calc(100% - 20px));margin-top:10px;flex:none}
.wm-canvas-help{font-size:10px;color:#71819b;text-align:center;margin:7px 12px 12px;flex:none}
.tool-dialog-open{overflow:hidden}
@media(max-width:960px){.tool-dialog-grid{grid-template-columns:minmax(0,1fr) 280px}.tool-gallery{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}
@media(max-width:800px){.shell{display:block}.sidebar{position:relative;width:100%;height:auto;min-height:0;padding:10px 14px}.brand{padding:0 0 8px;font-size:15px}.brand img{width:29px;height:29px}.side-caption,.management-caption{display:none}.sidebar nav{display:flex;overflow-x:auto;gap:3px}.sidebar nav .nav-link{flex:none;white-space:nowrap;padding:8px 10px;font-size:11px;min-height:35px}.sidebar nav .nav-link em{display:none}.tool-hero{padding:22px 18px}.tool-gallery-head{padding:20px 18px 13px}.tool-gallery{padding:0 18px}.tool-hero-mark{display:none}.tool-dialog{width:calc(100vw - 12px);height:calc(100dvh - 12px);border-radius:12px}.tool-dialog-grid{grid-template-columns:1fr;overflow:auto;display:flex;flex-direction:column}.tool-stage{overflow:visible;padding:14px}.tool-preview{height:300px;min-height:260px}.tool-settings{overflow:visible;border-left:0;border-top:1px solid #e8edf5;padding:16px}.tool-dialog-foot{padding:10px 14px}.tool-dialog-intro{padding:8px 14px}.tool-dialog-head{padding:12px 14px}}
@media(max-width:520px){.tool-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.tool-card{min-height:142px;padding:12px}.tool-card strong{font-size:12px}.tool-card small{font-size:10px}.tool-card-icon{width:35px;height:35px}.tool-gallery-head p{display:none}.tool-dialog-heading h2{font-size:16px}.tool-dialog-foot{flex-wrap:wrap}.tool-dialog-foot>div{width:100%}.tool-dialog-foot button{flex:1}.tool-preview{height:270px;min-height:230px}}

/* 视频与音频菜单：按本项目提供的完整套图还原搜索、分类和预览卡片。 */
.video-catalog-active .main{background:#f7f8fa}
.video-catalog-active .topbar{height:60px;padding-inline:30px}
.video-mode{background:#f7f8fa;padding-bottom:0!important}
.video-mode>.tool-hero,.video-mode>.tool-gallery-head,.video-mode>#tool-cards{display:none}
.video-catalog{padding:26px 30px 50px;min-height:calc(100vh - 135px)}
.video-catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.video-catalog-heading h2{margin:0;font-size:22px;font-weight:850;letter-spacing:-.04em;color:#253247}
.video-catalog-heading span{font-size:12px;color:#8390a6;white-space:nowrap}
.video-search{display:flex;align-items:center;gap:10px;width:100%;height:49px;margin:20px 0 13px;padding:0 12px 0 15px;border:1px solid #e3e8f0;border-radius:10px;background:#fff}
.video-search:focus-within{border-color:#9db3ff;box-shadow:0 0 0 3px #2f5bea14}
.video-search>span{font-size:23px;line-height:1;color:#909caf}
.video-search input{flex:1;min-width:0;border:0;outline:0;background:none;color:#26364d;font-size:12px}
.video-search input::placeholder{color:#a1acbc}
.video-search kbd{font-family:inherit;font-size:10px;color:#98a5b8;border:1px solid #e4e9f1;border-radius:5px;padding:3px 5px;white-space:nowrap}
.video-filters{display:flex;align-items:center;gap:5px;margin:0 0 18px;overflow-x:auto;scrollbar-width:thin;padding:2px 0 6px}
.video-filters button{flex:none;border:1px solid transparent;background:transparent;border-radius:8px;padding:9px 11px;color:#77869d;font-size:11px;font-weight:750;white-space:nowrap}
.video-filters button:hover{color:#355fe9;background:#eef2ff}
.video-filters button.active{border-color:#e5eaf2;background:#fff;color:#355fe9;box-shadow:0 3px 12px #17203e0a}
.video-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:18px}
.video-card{min-width:0;border:1px solid #e5eaf1;border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 3px 14px #24334c08;transition:box-shadow .2s,transform .2s}
.video-card:hover,.video-card:focus-visible{outline:none;box-shadow:0 15px 32px #24334c19;transform:translateY(-2px)}
.video-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 19px 6px}
.video-card-head h3{margin:0;font-size:15px;font-weight:800;letter-spacing:-.03em;line-height:1.4;color:#28344b}
.video-card-category{flex:none;border-radius:100px;background:#eef2ff;color:#355fe9;padding:5px 8px;font-size:10px;font-weight:750;white-space:nowrap}
.video-card-summary{min-height:34px;margin:0;padding:0 19px;color:#8390a4;font-size:11px;line-height:1.55}
.video-card-preview{height:204px;margin:6px 12px 0;position:relative;overflow:hidden;border-radius:9px;background:#edf3fc}
.video-preview-button{display:block;width:100%;height:100%;padding:0;border:1px solid #ebeff5;border-radius:9px;background:#f4f7fc;overflow:hidden;text-align:left}
.video-preview-button img{display:block;width:100%;height:100%;object-fit:cover}
.video-preview-open{position:absolute;right:9px;top:9px;z-index:1;background:#fffffff2;border:1px solid #dce5f3;border-radius:7px;padding:6px 9px;color:#335bc9;font-size:10px;font-weight:800;box-shadow:0 3px 12px #0d1b3520}
.video-preview-button:hover .video-preview-open,.video-preview-button:focus-visible .video-preview-open{background:#fff;box-shadow:0 5px 16px #0d1b3535}
.video-preview-status{position:absolute;right:5px;bottom:5px;pointer-events:none;background:#fffffff0;border:1px solid #e9eef6;border-radius:6px;padding:5px 8px;color:#60708c;font-size:10px}
.video-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:0;padding:12px 19px 14px;border-top:1px solid #f0f2f6}
.video-card-note{font-size:10px;color:#8897a8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.video-card-action{flex:none;padding:4px 0;border:0;background:transparent;color:#355fe9;font-size:11px;font-weight:800}
.video-card-action:hover{text-decoration:underline}
.video-no-results{text-align:center;padding:80px 20px;color:#8695ac;font-size:13px}
@media(max-width:1300px){.video-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.video-catalog-active .topbar{height:56px;padding-inline:18px}.video-catalog{padding:20px 16px 42px}.video-catalog-heading h2{font-size:20px}}
@media(max-width:680px){.video-cards{grid-template-columns:1fr}.video-card-preview{height:auto;aspect-ratio:2.5/1}.video-search kbd{display:none}}
@media(prefers-reduced-motion:reduce){.video-card{transition:none}}

/* 实用工具：四类功能共用一个可检索的列表。 */
.tool-view{background:#f7f8fa;min-height:calc(100vh - 110px);padding:14px 20px 30px!important}
.utilities-controls,.utilities-list,.utilities-empty{width:100%;max-width:none;margin-left:0;margin-right:0}
.utilities-controls{padding:12px;background:#fff;border:1px solid #e6ebf3;border-radius:13px;box-shadow:0 3px 14px #24334c08}
.utilities-search{height:44px;display:flex;align-items:center;gap:10px;padding:0 13px;background:#fafbfe;border:1px solid #e2e8f1;border-radius:9px}
.utilities-search:focus-within{border-color:#8ba6f3;box-shadow:0 0 0 3px #315fe516}
.utilities-search-icon{font-size:23px;line-height:1;color:#8898af}
.utilities-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#26364d;font-size:13px}
.utilities-search input::placeholder{color:#9ca9bb}
.utilities-search kbd{font-family:inherit;font-size:10px;color:#9ca9bb;border:1px solid #e3e9f2;border-radius:5px;padding:4px 6px;white-space:nowrap}
.utilities-filters{display:flex;align-items:center;gap:7px;margin-top:10px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.utilities-filter{display:inline-flex;align-items:center;gap:7px;flex:none;border:1px solid #e5eaf2;background:#fff;border-radius:8px;padding:8px 11px;color:#6f7e95;font-size:12px;font-weight:750;white-space:nowrap}
.utilities-filter small{font-size:10px;color:#97a5b7;font-weight:750}
.utilities-filter:hover{border-color:#a9baf0;color:#355fe9}
.utilities-filter.active{color:#355fe9;border-color:#cddaff;background:#eef3ff}
.utilities-filter.active small{color:#4e70d5}
.utilities-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.utilities-list{margin-top:12px;border:1px solid #e5eaf2;border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 3px 14px #24334c08}
.utilities-list:empty{display:none}
.utilities-row{width:100%;min-height:78px;display:flex;align-items:center;gap:15px;padding:13px 20px;border:0;border-bottom:1px solid #edf0f5;background:#fff;text-align:left;color:#26344b}
.utilities-row:last-child{border-bottom:0}
.utilities-row:hover,.utilities-row:focus-visible{position:relative;z-index:1;background:#f8faff;outline:2px solid #b9c9f8;outline-offset:-2px}
.utilities-row-icon{width:42px;height:42px;display:grid;place-items:center;flex:none;border-radius:10px;background:#eaf0ff;color:#4266da}
.utilities-row-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.utilities-row-copy{display:block;min-width:0;flex:1}
.utilities-row-copy strong{display:block;font-size:14px;line-height:1.4;font-weight:800}
.utilities-row-copy small{display:block;margin-top:4px;color:#8794a8;font-size:11px;line-height:1.55}
.utilities-row-category{flex:none;min-width:76px;text-align:center;background:#f0f3f8;color:#64738d;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:750}
.utilities-row-arrow{flex:none;min-width:67px;text-align:right;color:#3c62d6;font-size:11px;font-weight:800}
.utilities-empty{text-align:center;margin-top:12px;padding:55px 20px;background:#fff;border:1px solid #e5eaf2;border-radius:13px;color:#8392a7;font-size:13px}
.utilities-empty[hidden]{display:none}
.utilities-empty button{padding:8px 12px;border:1px solid #cddaff;border-radius:8px;background:#eef3ff;color:#355fe9;font-size:11px;font-weight:800}
@media(max-width:800px){.tool-view{padding:12px 12px 28px!important}.utilities-controls{padding:10px}.utilities-row{padding:12px 13px;gap:11px}.utilities-row-icon{width:36px;height:36px}.utilities-row-category{min-width:0}}
@media(max-width:520px){.utilities-search kbd{display:none}.utilities-row{min-height:76px}.utilities-row-copy strong{font-size:13px}.utilities-row-copy small{font-size:10px}.utilities-row-category{display:none}.utilities-row-arrow{min-width:0;font-size:0}.utilities-row-arrow::after{content:'↗';font-size:15px}}

/* 工具工作台弹出时先渐显，再轻微回弹。 */
@keyframes toolDialogJellyIn{0%{opacity:0;transform:translateY(14px) scale(.965)}68%{opacity:1;transform:translateY(-3px) scale(1.012)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toolBackdropIn{from{opacity:0}to{opacity:1}}
.tool-dialog[open],.video-dialog[open]{animation:toolDialogJellyIn .36s cubic-bezier(.2,.8,.2,1) both;transform-origin:center center}
.tool-dialog[open]::backdrop,.video-dialog[open]::backdrop{animation:toolBackdropIn .24s ease-out both}
@media(prefers-reduced-motion:reduce){.tool-dialog[open],.video-dialog[open],.tool-dialog[open]::backdrop,.video-dialog[open]::backdrop{animation:none}}