/* ZMCG V16.2 mobile tools - H5 presentation only */
.tool-app{background:linear-gradient(180deg,#eef5fc 0,#f7f9fc 42%,#f3f7fc 100%)}
.tools-hero,.tool-hero{margin:14px 16px 0;border-radius:28px;background:linear-gradient(135deg,#062b59 0%,#0d63ba 62%,#3a98ef 100%);color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}
.tools-hero{padding:24px 19px 18px}.tools-hero:after,.tool-hero:after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:-90px;top:-120px;background:radial-gradient(circle,rgba(126,207,255,.42),rgba(126,207,255,0) 67%)}
.tools-hero>*{position:relative;z-index:1}.tools-hero h1{font-size:29px;margin:7px 0 6px;letter-spacing:-.7px}.tools-hero p{font-size:12px;line-height:1.6;color:#d8eaff;margin:0}.tool-kicker{font-size:10px;letter-spacing:1.8px;color:#bcdcff;font-weight:900}.tools-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.tools-hero-stats span{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);border-radius:16px;text-align:center;padding:10px 5px}.tools-hero-stats b{display:block;font-size:18px}.tools-hero-stats small{display:block;color:#d5e9fc;font-size:9px;margin-top:3px}
.tool-filter-row{display:flex;gap:8px;overflow:auto;scrollbar-width:none;margin-bottom:10px}.tool-filter-row::-webkit-scrollbar{display:none}.tool-filter-row button{border:0;white-space:nowrap;border-radius:999px;padding:9px 13px;background:#e8f0f9;color:#58728d;font-weight:800;font-size:11px}.tool-filter-row button.active{background:var(--blue);color:#fff;box-shadow:0 7px 16px rgba(23,119,255,.18)}
.tool-hub-list{display:grid;gap:10px}.tool-hub-card{display:grid;grid-template-columns:50px 1fr 22px;gap:12px;align-items:center;background:#fff;border:1px solid #e3ebf5;border-radius:22px;padding:14px;box-shadow:0 8px 22px rgba(31,72,125,.06)}.tool-hub-card[hidden]{display:none}.tool-hub-ico{width:50px;height:50px;border-radius:16px;background:linear-gradient(145deg,#edf6ff,#dcecff);color:#1677ff;display:grid;place-items:center}.tool-hub-ico svg{width:25px;height:25px}.tool-hub-card small{display:block;color:#7f92a8;font-size:9px}.tool-hub-card b{display:block;font-size:14px;margin:3px 0;line-height:1.3}.tool-hub-card p{font-size:10px;color:#8796aa;line-height:1.45;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.tool-hub-go{color:#9aabba}.tool-hub-go svg{width:16px}
.tool-hero{display:grid;grid-template-columns:58px 1fr;gap:14px;padding:22px 18px;align-items:center}.tool-hero>*{position:relative;z-index:1}.tool-hero-icon{width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center}.tool-hero-icon svg{width:30px}.tool-hero h1{font-size:24px;line-height:1.15;margin:6px 0}.tool-hero p{font-size:11px;color:#d7eaff;line-height:1.5;margin:0}.tool-content{padding-top:12px}.tool-sync-card{background:#fff;border:1px solid #e2ebf5;border-radius:21px;padding:14px 15px;box-shadow:0 8px 22px rgba(31,72,125,.06)}.tool-sync-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.sync-pill{display:inline-flex;padding:5px 9px;border-radius:999px;background:#e8f3ff;color:#0f68c8;font-size:10px;font-weight:900}.tool-sync-top small{color:#8c9bad;font-size:9px;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tool-sync-card p{font-size:11px;line-height:1.55;color:#75879d;margin:9px 0 0}
.pc-tool-host{min-height:280px;background:#fff;border:1px solid #e2ebf5;border-radius:25px;padding:16px;box-shadow:var(--shadow)}.tool-connecting{min-height:245px;border:1px dashed #cbd9e8;border-radius:18px;background:linear-gradient(180deg,#fbfdff,#f4f8fd);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px;color:#6f8298}.tool-connecting b{font-size:15px;color:#264667;margin-top:12px}.tool-connecting p{font-size:11px;line-height:1.6;margin:7px 0 0}.spinner{width:30px;height:30px;border-radius:50%;border:3px solid #dce9f7;border-top-color:#1677ff;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.tool-notice{display:grid;grid-template-columns:34px 1fr;gap:11px;background:#edf6ff;border:1px solid #d7eafa;border-radius:20px;padding:13px 14px;color:#3f6387;margin:14px 0}.tool-notice>span{width:34px;height:34px;border-radius:12px;background:#fff;color:#1677ff;display:grid;place-items:center}.tool-notice svg{width:19px}.tool-notice b{font-size:12px;color:#204d7b}.tool-notice p{font-size:10px;line-height:1.55;margin:3px 0 0;color:#66809b}.tool-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 10px}.tool-action-grid a{background:#fff;border:1px solid #e3ebf5;border-radius:20px;min-height:84px;padding:13px;display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:10px;align-content:center}.tool-action-grid a>span{grid-row:1/3;width:32px;height:32px;border-radius:11px;background:#e9f3ff;color:#1677ff;display:grid;place-items:center}.tool-action-grid svg{width:18px}.tool-action-grid b{font-size:12px}.tool-action-grid small{font-size:9px;color:#8a99aa;margin-top:3px}
/* form primitives for Codex to use while porting existing PC forms */
.h5-tool-form{display:grid;gap:12px}.h5-tool-form .field-group{display:grid;gap:6px}.h5-tool-form label{font-size:12px;font-weight:800;color:#253e5d}.h5-tool-form input,.h5-tool-form select,.h5-tool-form textarea{width:100%;border:1px solid #d9e5f1;border-radius:15px;background:#f8fbfe;outline:0;padding:0 13px;color:#223b58;font-size:14px}.h5-tool-form input,.h5-tool-form select{height:48px}.h5-tool-form textarea{min-height:96px;padding-top:12px;resize:vertical}.h5-tool-form input:focus,.h5-tool-form select:focus,.h5-tool-form textarea:focus{border-color:#7db6f6;box-shadow:0 0 0 4px rgba(22,119,255,.08)}.h5-tool-form .field-help{font-size:9px;color:#8a9bad;line-height:1.5}.h5-tool-submit{height:50px;border:0;border-radius:16px;background:linear-gradient(135deg,#1677ff,#0d62c8);color:#fff;font-weight:900;font-size:15px}.h5-tool-secondary{height:46px;border:1px solid #d9e5f1;border-radius:15px;background:#fff;color:#315d88;font-weight:800}.h5-tool-result{margin-top:12px;border-radius:20px;background:#f5f9fe;border:1px solid #dde8f4;padding:14px}.h5-tool-result h3{font-size:14px;margin:0 0 7px}.h5-tool-result p{font-size:11px;line-height:1.55;color:#6f8299;margin:0}
.h5-tool-field{display:grid;gap:7px;margin:0}.h5-tool-field>span{font-size:12px;font-weight:800;color:#253e5d;line-height:1.45}.h5-tool-field input,.h5-tool-field select,.h5-tool-field textarea{width:100%;border:1px solid #d9e5f1;border-radius:14px;background:#f8fbfe;outline:0;padding:0 13px;color:#223b58;font-size:14px}.h5-tool-field input,.h5-tool-field select{height:50px}.h5-tool-field textarea{min-height:104px;padding-top:12px;resize:vertical}.h5-tool-field input:focus,.h5-tool-field select:focus,.h5-tool-field textarea:focus{border-color:#7db6f6;box-shadow:0 0 0 4px rgba(22,119,255,.08)}.h5-tool-field .field-help{font-size:10px;color:#8798ad;line-height:1.5}.h5-tool-group-title{margin:12px 0 0;padding:11px 13px;border-radius:14px;background:#eaf3ff;color:#1768d5;font-size:13px;font-weight:900}.h5-tool-result pre{white-space:pre-wrap;word-break:break-word;margin:8px 0 0;color:#51657e;font-size:10px;line-height:1.55;background:#fff;border-radius:12px;padding:11px;border:1px solid #e3ebf5;max-height:360px;overflow:auto}.h5-tool-result img{width:100%;max-width:220px;border-radius:12px;background:#fff}.h5-tool-hub-card{display:block;padding:16px;margin-bottom:10px;border-radius:18px;background:#fff;border:1px solid #e2ebf5;box-shadow:0 8px 22px rgba(22,72,130,.07);color:inherit}.h5-tool-hub-card b{display:block;font-size:15px;color:#193b62}.h5-tool-hub-card small{display:block;margin-top:6px;color:#7c8ca2;font-size:11px;line-height:1.6}
@media(max-width:360px){.tool-hub-card{grid-template-columns:44px 1fr 18px;padding:12px}.tool-hub-ico{width:44px;height:44px}.tool-hero{grid-template-columns:50px 1fr}.tool-hero-icon{width:50px;height:50px}}