:root{font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,sans-serif;color:#182939;background:#e9eef2;font-synthesis:none}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}.app{width:100%;height:100dvh;display:flex;flex-direction:column;background:#f6f7f8}.topbar{flex:none;height:51px;padding:0 12px 0 18px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e1e5e8;z-index:4}.topbar strong{font-size:16px;white-space:nowrap}.header-actions{display:flex;align-items:center;gap:5px}.rating{border:1px solid #dce3e9;background:#f7fafc;color:#426079;border-radius:14px;height:28px;padding:0 8px;font-size:11px;font-weight:700}.more{border:0;background:transparent;width:34px;height:34px;font-size:26px;line-height:20px;color:#445768}.workspace{position:relative;flex:1;min-height:0;background:#eff2f4;overflow:hidden}.canvas-host{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair}.canvas-host canvas{width:100%;height:100%;display:block}.status-chip{position:absolute;top:9px;left:11px;max-width:calc(100% - 22px);border:1px solid #d8e0e6;background:#ffffffdb;color:#516475;border-radius:16px;padding:5px 10px;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 6px #253c4b0d}.status-chip span{margin-left:3px}.status-chip.running{color:#118b50;border-color:#b8e7ce}.status-chip.danger{color:#c43d40;border-color:#f1c7c8}.detail-panel{position:absolute;top:43px;left:11px;right:11px;z-index:3;background:#fff;border:1px solid #dae2e8;border-radius:10px;padding:11px 14px;box-shadow:0 8px 22px #20384d25;max-height:42%;overflow:auto}.detail-panel strong{font-size:13px}.detail-panel p{font-size:12px;margin:6px 0;color:#53697a}.detail-panel button{background:none;border:0;color:#257ab8;font-size:12px;padding:3px 0}.tool-chip{position:absolute;bottom:12px;left:50%;transform:translate(-50%);background:#23445e;color:#fff;border-radius:20px;padding:7px 8px 7px 12px;display:flex;gap:8px;align-items:center;white-space:nowrap;font-size:11px;box-shadow:0 4px 14px #183a5270}.tool-chip button{border:0;border-radius:12px;background:#fff;color:#24648c;padding:4px 9px;font-size:11px}.toolbar{flex:none;height:60px;display:grid;grid-template-columns:repeat(6,1fr);align-items:center;background:#fff;border-top:1px solid #e0e5e9;padding-bottom:env(safe-area-inset-bottom);z-index:4}.toolbar button{height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:1px 0;border:0;background:transparent;color:#657381;font-size:11px;white-space:nowrap}.toolbar button.active{color:#176eb7}.toolbar button:disabled{opacity:.32}.toolbar svg{width:20px;height:20px}.zoom-pop{position:absolute;right:10px;bottom:68px;z-index:6;display:flex;gap:5px;align-items:center;background:#fff;border:1px solid #dce4eb;padding:6px;border-radius:10px;box-shadow:0 7px 25px #18364d3a}.zoom-pop button{border:0;background:#e8f1f9;color:#236eaa;border-radius:6px;min-width:30px;height:30px}.zoom-pop span{font-size:11px;color:#5c7183}.scheme-panel{position:absolute;top:14px;right:14px;bottom:14px;left:14px;overflow:auto;background:#fff;border:1px solid #e0e5e9;border-radius:10px;padding:18px 20px}.scheme-panel b{font-size:16px}.scheme-panel p{font-size:14px;line-height:1.7;border-left:3px solid #2583c7;padding:9px 13px;margin:18px 0;background:#f4f8fb}.scheme-panel span{font-size:12px;color:#5f7587}.menu-shade{position:absolute;top:0;right:0;bottom:0;left:0;z-index:9;background:#10253579;display:flex;align-items:flex-end}.menu-panel{width:100%;background:#fff;border-radius:16px 16px 0 0;padding:15px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -8px 28px #1226382b}.menu-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.menu-heading strong{font-size:16px}.menu-heading button{border:0;background:#edf2f5;border-radius:50%;width:30px;height:30px;font-size:22px;color:#4f6678}.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.menu-grid button{border:1px solid #dce6ee;background:#f7fafc;border-radius:8px;padding:10px 2px;color:#4d6374;font-size:11px}.menu-grid button.chosen{border-color:#2583ca;background:#eaf5ff;color:#116daf}.menu-secondary{display:grid;gap:6px;margin-top:13px}.menu-secondary button{border:1px solid #dee6ec;background:#fff;border-radius:8px;text-align:left;padding:10px 12px;color:#2d586e;font-size:12px}.menu-panel p{font-size:11px;line-height:1.5;color:#81909d;margin:12px 0 0}.toast{position:absolute;bottom:75px;left:50%;transform:translate(-50%);z-index:10;background:#223849;color:#fff;border-radius:16px;padding:7px 12px;white-space:nowrap;font-size:11px}.canvas-host:focus{outline:0}@media(min-width:750px){.app{max-width:680px;margin:auto;box-shadow:0 0 34px #18374e2b}.topbar strong{font-size:18px}}@media(max-height:650px){.topbar{height:45px}.toolbar{height:53px}.toolbar button{height:47px}.toolbar svg{width:18px;height:18px}.status-chip{top:5px}}.draw-chip,.edit-strip{position:absolute;left:50%;transform:translate(-50%);bottom:8px;display:flex;align-items:center;gap:5px;max-width:calc(100% - 12px);padding:6px 8px;background:#fff;border:1px solid #dce5eb;border-radius:12px;box-shadow:0 3px 12px #263c5230;z-index:3;white-space:nowrap;font-size:11px;color:#38566d}.edit-strip{overflow-x:auto;width:max-content}.edit-strip span{font-weight:700;flex:none}.edit-strip button,.draw-chip button{border:0;border-radius:7px;background:#eaf3f9;color:#256b9a;padding:7px 8px;flex:none;font-size:11px}.edit-strip button:disabled,.draw-chip button:disabled{opacity:.35}.tool-chip{bottom:52px;z-index:4}.status-chip{top:6px;left:8px;font-size:10px;max-width:calc(100% - 16px)}.workspace{background:#f7f8fa}.toolbar{grid-template-columns:repeat(7,1fr)}.toolbar button{min-width:0;font-size:10px}.layout-button{position:absolute;top:6px;right:8px;z-index:3;border:1px solid #cbd9e3;background:#fff;color:#2a668f;border-radius:16px;padding:5px 9px;font-size:11px;font-weight:700;box-shadow:0 2px 6px #253c4b0d}.layout-button.active{background:#1c76b3;color:#fff;border-color:#1c76b3}.status-chip{max-width:calc(100% - 105px)}.add-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.add-grid button{border:1px solid #dbe4ec;background:#f7f9fb;border-radius:12px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;color:#284257;font-size:14px;font-weight:700}.add-grid small{font-size:10px;color:#748899;font-weight:400;white-space:nowrap}.button-preview{display:block;width:36px;height:36px;border:5px solid #e1e6ea;border-radius:50%;box-shadow:0 2px 5px #263c5240,inset 0 2px 3px #fff8}.button-preview.green{background:#24d82f}.button-preview.red{background:#e72c22}.catalog-sheet{width:100%;height:min(78dvh,760px);background:#fff;border-radius:16px 16px 0 0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:env(safe-area-inset-bottom)}.catalog-header{height:58px;flex:none;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #eef0f2;position:relative}.catalog-header h2{font-size:19px;margin:0}.catalog-header button{position:absolute;right:14px;background:none;border:0;font-size:30px;color:#8a939a;width:38px;height:38px}.catalog-body{display:flex;flex:1;min-height:0}.catalog-body nav{width:90px;flex:none;background:#f6f7f8;overflow:auto}.catalog-body nav button{display:block;width:100%;min-height:64px;border:0;background:none;color:#323c43;font-size:14px;padding:12px 5px}.catalog-body nav button.active{background:#fff;color:#087ef5;font-weight:700}.catalog-content{padding:16px 12px;overflow-y:auto;flex:1;min-width:0}.catalog-content h3{font-size:16px;font-weight:500;border-left:4px solid #087ef5;padding-left:8px;margin:0 0 20px}.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px}.catalog-grid button{padding:0;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:7px;color:#46515b;font-size:14px;line-height:1.4;min-width:0}.catalog-grid button:active{background:#eef7ff;border-radius:8px}.catalog-grid small{font-size:11px;color:#86929a}.catalog-image{width:82px;height:88px;display:flex;align-items:center;justify-content:center;overflow:hidden}.catalog-image img{max-width:100%;max-height:100%;object-fit:contain}.catalog-image.relay img{max-width:none;max-height:none;width:115px}.catalog-content>p{font-size:12px;line-height:1.6;color:#8b969d;margin-top:28px}@media(min-width:520px){.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-body nav{width:110px}}.app{position:relative}.toast{white-space:normal;text-align:center;max-width:calc(100% - 24px);width:max-content}.tool-chip{max-width:calc(100% - 16px);flex-wrap:wrap;justify-content:center;white-space:normal}