:root{--ink:#10223b;--muted:#65758b;--line:#e3e9f2;--blue:#1976d2;--blue2:#0d5fc1;--bg:#f5f8fc;--card:#fff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px Inter,Arial,sans-serif}
.tools-top{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5%;position:sticky;top:0;z-index:10;box-shadow:0 2px 14px #18304a0d}
.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#0e67d7,#22a4ff);color:#fff;display:grid;place-items:center;font-weight:800}.brand b{display:block;font-size:15px}.brand small{display:block;color:var(--muted);margin-top:3px}
nav{display:flex;gap:8px}nav a{padding:10px 13px;border-radius:9px;text-decoration:none;color:#526278;font-weight:600}nav a.active,nav a:hover{background:#edf5ff;color:var(--blue)}
.wrap{max-width:1220px;margin:auto;padding:42px 22px 70px}.hero{padding:12px 0 28px}.eyebrow{color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.14em}.hero h1{font-size:38px;line-height:1.12;margin:10px 0}.hero p{color:var(--muted);max-width:740px;font-size:16px}.hero-note{display:inline-block;margin-top:12px;padding:9px 13px;background:#edf7ef;color:#28613a;border-radius:9px;font-size:12px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 24px}.filter{border:1px solid var(--line);background:#fff;border-radius:22px;padding:9px 15px;color:#506078;cursor:pointer;font-weight:700}.filter.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.tool{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:19px;min-height:205px;display:flex;flex-direction:column;box-shadow:0 6px 20px #1d35570a;transition:.18s}.tool:hover{transform:translateY(-2px);box-shadow:0 12px 28px #1d355718;border-color:#c9d9ef}.icon{width:42px;height:42px;border-radius:12px;background:#eef5ff;display:grid;place-items:center;font-size:21px}.tool h3{font-size:16px;margin:13px 0 7px}.tool p{color:var(--muted);font-size:12px;line-height:1.5;margin:0 0 14px;flex:1}.tool button{border:0;background:#0f6bd7;color:#fff;border-radius:9px;padding:10px 12px;font-weight:800;cursor:pointer}.tool button:hover{background:#095bb9}
.modal{position:fixed;inset:0;background:#10223b99;display:grid;place-items:center;padding:18px;z-index:30}.modal.hidden{display:none}.modal-card{width:min(920px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 24px 80px #07152666}.modal-head{display:flex;justify-content:space-between;gap:20px;padding:22px;border-bottom:1px solid var(--line)}.modal-head h2{margin:4px 0}.modal-head p{margin:0;color:var(--muted)}.modal-head span{font-size:11px;font-weight:800;color:var(--blue);text-transform:uppercase}.modal-head button{border:0;background:#eef2f7;border-radius:10px;width:38px;height:38px;font-size:24px;cursor:pointer}.modal-body{padding:22px}.drop{border:2px dashed #b9cbe2;border-radius:14px;padding:28px;text-align:center;background:#f8fbff}.drop input{display:none}.pick{display:inline-block;background:#126bd5;color:#fff;padding:10px 16px;border-radius:9px;font-weight:800;cursor:pointer}.file-list{margin-top:14px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}.row input,.row select,.row textarea{padding:9px;border:1px solid #ccd7e5;border-radius:8px}.action{border:0;background:#126bd5;color:#fff;padding:10px 15px;border-radius:9px;font-weight:800;cursor:pointer}.secondary{border:1px solid #ccd7e5;background:#fff;color:#33445a;padding:9px 14px;border-radius:9px;font-weight:700;cursor:pointer}.status{padding:0 22px 18px;color:#40536b;min-height:20px}.progress{height:5px;background:#e7edf5}.progress.hidden{display:none}.progress div{height:100%;width:0;background:#126bd5;transition:.2s}.preview{max-width:100%;max-height:380px;border:1px solid var(--line);border-radius:8px}.checkgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.checkgrid label{padding:8px;border:1px solid var(--line);border-radius:8px}.hint{font-size:12px;color:#718096;margin-top:7px}
footer{text-align:center;padding:24px;color:#718096;border-top:1px solid var(--line);background:#fff}
@media(max-width:980px){.grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){nav{display:none}.grid{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:30px}}@media(max-width:460px){.grid{grid-template-columns:1fr}}

/* Main-screen integrated toolbox layout */
.editor-hero{margin:10px 0 34px;background:linear-gradient(135deg,#0d63c9 0%,#1689ef 55%,#43b4ff 100%);color:#fff;border-radius:24px;padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:28px;box-shadow:0 18px 45px rgba(13,99,201,.22);cursor:pointer;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.2)}
.editor-hero:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.09);right:-90px;top:-120px}.editor-hero:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.06);left:38%;bottom:-130px}
.editor-hero-main,.editor-open{position:relative;z-index:1}.editor-hero-main{display:flex;align-items:flex-start;gap:20px;min-width:0}.editor-hero-icon{width:70px;height:70px;flex:0 0 70px;border-radius:19px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:35px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.editor-hero-copy h2{font-size:31px;margin:5px 0 8px}.editor-hero-copy p{margin:0 0 14px;max-width:780px;line-height:1.55;color:rgba(255,255,255,.91)}.hero-badge{font-size:11px;font-weight:800;letter-spacing:.12em;color:#dff2ff}.editor-hero .mini-features{display:flex;gap:8px;flex-wrap:wrap}.editor-hero .mini-features span{font-size:11px;font-weight:700;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.16)}
.editor-open{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto}.editor-open>span{font-size:10px;font-weight:900;letter-spacing:.14em;opacity:.8}.editor-hero .primary{border:0;background:#fff;color:#0b5fbe;border-radius:11px;padding:12px 17px;font-weight:900;cursor:pointer;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.12)}.editor-hero .primary:hover{transform:translateY(-1px)}
.workspace-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 14px}.workspace-head h2{margin:5px 0 4px;font-size:25px}.workspace-head p{margin:0;color:var(--muted)}.tool-count{background:#eaf3ff;color:#0e67c8;border:1px solid #cfe2fa;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:900;white-space:nowrap}.tool-strip-note{margin:0 0 14px;padding:10px 13px;border:1px solid #dce8f5;background:#f8fbff;color:#607089;border-radius:10px;font-size:12px}.home-tool-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.home-tool-grid .tool{min-height:0;height:100%;padding:14px;border-radius:14px;cursor:pointer;box-shadow:0 4px 15px rgba(29,53,87,.06)}.home-tool-grid .tool:hover{transform:translateY(-3px);border-color:#b8d3f1;box-shadow:0 12px 26px rgba(29,53,87,.12)}.home-tool-grid .tool:focus{outline:3px solid rgba(25,118,210,.2);outline-offset:2px}.tool-topline{display:flex;align-items:center;justify-content:space-between;gap:7px}.home-tool-grid .icon{width:36px;height:36px;border-radius:10px;font-size:18px}.tool-cat{font-size:8px;text-transform:uppercase;letter-spacing:.05em;font-weight:900;color:#718096;background:#f2f6fb;border-radius:999px;padding:4px 6px;white-space:nowrap}.home-tool-grid .tool h3{font-size:14px;margin:10px 0 5px}.home-tool-grid .tool p{font-size:11px;line-height:1.45;margin-bottom:10px}.tool-open{font-size:11px;font-weight:900;color:#126bd5;border-top:1px solid #edf1f6;padding-top:9px}.tool-open span{float:right;font-size:15px}.home-tool-grid .tool button{display:none}
@media(max-width:1100px){.home-tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:850px){.editor-hero{padding:22px;align-items:flex-start}.editor-open{align-items:stretch}.home-tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.editor-hero{flex-direction:column}.editor-open{width:100%;align-items:flex-start}.editor-hero .primary{width:100%}.editor-hero-copy h2{font-size:26px}.workspace-head{align-items:flex-start;flex-direction:column}.home-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.editor-hero-main{gap:12px}.editor-hero-icon{width:54px;height:54px;flex-basis:54px;font-size:27px}.home-tool-grid{grid-template-columns:1fr}.home-tool-grid .tool{padding:13px}}