:root{--bg:#f6f7fb;--card:#fff;--ink:#182033;--muted:#64748b;--line:#d9deea;--accent:#244c9a;--soft:#eef3ff;--danger:#b91c1c;--ok:#0f766e;--shadow:0 10px 30px rgba(15,23,42,.08)}
*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans','Yu Gothic',Meiryo,sans-serif;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}.flow-app{height:100vh;display:grid;grid-template-rows:auto 1fr;background:var(--bg)}.flow-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;background:#fff;border-bottom:1px solid var(--line);z-index:5}.brand{display:flex;align-items:center;gap:10px;min-width:220px}.brand img{width:34px;height:34px;border-radius:8px}.brand h1{font-size:18px;line-height:1.2;margin:0}.brand small{display:block;color:var(--muted);font-weight:500}.top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.usage-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#f8fafc;border-radius:999px;padding:7px 10px;color:#334155;font-size:13px}.btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer;font-weight:700;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px}.btn:hover{background:#f8fafc}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn.danger{color:var(--danger);border-color:#fecaca}.btn.small{font-size:12px;padding:5px 8px;border-radius:8px}.flow-layout{min-height:0;display:grid;grid-template-columns:280px 1fr 360px}.palette{background:#fff;border-right:1px solid var(--line);padding:14px;overflow:auto}.palette h2,.inspector h2{font-size:16px;margin:0 0 10px}.palette-section{margin:0 0 16px}.palette-section h3{font-size:13px;margin:0 0 8px;color:#475569}.palette-grid{display:grid;gap:8px}.palette button{width:100%;justify-content:flex-start}.hint{font-size:12px;color:var(--muted);line-height:1.6}.canvas-wrap{position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(circle at 1px 1px,#d9deea 1px,transparent 0);background-size:22px 22px}.canvas-toolbar{position:absolute;left:12px;top:12px;z-index:3;display:flex;gap:8px;flex-wrap:wrap}.flow-canvas{position:absolute;inset:0;overflow:auto;cursor:default;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}.flow-space{position:relative;width:1800px;height:2600px;min-width:100%;min-height:100%}.flow-lines{position:absolute;inset:0;width:1800px;height:2600px;pointer-events:auto;z-index:1;overflow:visible}.flow-node{position:absolute;width:260px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);z-index:2;overflow:visible}.node-delete{display:none;position:absolute;right:-11px;top:-11px;width:34px;height:34px;align-items:center;justify-content:center;border:2px solid #fff;border-radius:999px;background:#b91c1c;color:#fff;font-size:20px;font-weight:900;line-height:1;box-shadow:0 8px 20px rgba(15,23,42,.22);cursor:pointer;z-index:6;touch-action:none}.flow-node.selected .node-delete{display:flex}.node-delete:hover{background:#991b1b}.flow-node.selected{outline:3px solid rgba(36,76,154,.25);border-color:var(--accent)}.flow-node.running{border-color:#f59e0b}.flow-node.done{border-color:#10b981}.flow-node.error{border-color:#ef4444}.node-head{display:flex;align-items:center;justify-content:space-between;gap:8px;background:linear-gradient(135deg,#f8fbff,#eef4ff);padding:10px 12px;cursor:grab;border-bottom:1px solid var(--line);touch-action:none}.node-head:active{cursor:grabbing}.node-title{font-weight:900;font-size:14px}.node-sub{font-size:11px;color:var(--muted)}.node-body{padding:10px 12px;font-size:12px;color:#334155;line-height:1.55}.node-preview{max-height:88px;overflow:hidden;white-space:pre-wrap;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px;margin-top:8px}.port{position:absolute;width:28px;height:28px;border-radius:50%;background:var(--accent);border:4px solid #fff;box-shadow:0 0 0 1px var(--accent),0 6px 16px rgba(15,23,42,.18);cursor:pointer;z-index:4;touch-action:none}.port::after{content:"";position:absolute;inset:-10px;border-radius:50%}.port.in{left:50%;top:-14px;transform:translateX(-50%)}.port.out{left:50%;bottom:-14px;transform:translateX(-50%)}.port.pending{background:#f59e0b;box-shadow:0 0 0 2px #f59e0b}
.flow-edge{fill:none;stroke:var(--accent);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:stroke;cursor:pointer}.flow-edge.hit{stroke:rgba(0,0,0,.001);stroke-width:22;pointer-events:stroke;cursor:pointer}.flow-edge.draft{stroke:#f59e0b;stroke-dasharray:7 5;pointer-events:none;cursor:default}
.status-dot{font-size:11px;border-radius:999px;padding:2px 7px;background:#e2e8f0;color:#475569}.status-dot.running{background:#fef3c7;color:#92400e}.status-dot.done{background:#dcfce7;color:#166534}.status-dot.error{background:#fee2e2;color:#991b1b}.inspector{background:#fff;border-left:1px solid var(--line);padding:14px;overflow:auto}.field{margin:0 0 12px}.field label{display:block;font-size:12px;font-weight:800;color:#475569;margin:0 0 5px}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:#fff;color:var(--ink)}.field textarea{min-height:120px;resize:vertical;line-height:1.55}.field textarea.prompt-editor{min-height:220px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}.answer-box{white-space:pre-wrap;border:1px solid var(--line);border-radius:12px;background:#fbfdff;padding:10px;min-height:120px;max-height:420px;overflow:auto;font-size:13px;line-height:1.7}.log-box{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.55;white-space:pre-wrap;background:#0f172a;color:#e5e7eb;border-radius:12px;padding:10px;min-height:120px;max-height:260px;overflow:auto}.badge{display:inline-block;border-radius:999px;padding:2px 7px;background:var(--soft);color:var(--accent);font-weight:800;font-size:11px}.danger-text{color:var(--danger)}.ok-text{color:var(--ok)}.split-row{display:flex;gap:8px;flex-wrap:wrap}.empty{color:var(--muted);font-size:13px;line-height:1.7}.edge-label{font-size:11px;fill:#475569}.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.42);display:flex;align-items:center;justify-content:center;z-index:20}.modal{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(15,23,42,.35);padding:18px}.modal h2{margin:0 0 10px}.hidden{display:none!important}@media(max-width:1100px){.flow-layout{grid-template-columns:220px 1fr}.inspector{position:absolute;right:0;top:65px;bottom:0;width:360px;z-index:4;box-shadow:var(--shadow)}}@media(max-width:760px){.flow-app{height:100dvh}.flow-topbar{align-items:flex-start;flex-direction:column;padding:10px 12px;gap:8px}.brand{min-width:0}.brand h1{font-size:16px}.brand small{font-size:11px}.top-actions{gap:6px}.usage-pill{font-size:11px;padding:5px 8px}.btn{min-height:40px;padding:9px 10px;border-radius:12px}.flow-layout{grid-template-rows:auto 1fr auto;grid-template-columns:1fr;min-height:0}.palette{display:block;border-right:0;border-bottom:1px solid var(--line);padding:8px 10px;max-height:132px;overflow:auto}.palette-section{margin:0 0 8px}.palette-section:first-child p{display:none}.palette h2{font-size:13px;margin-bottom:4px}.palette-section h3{display:none}.palette-grid{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.palette .btn{white-space:nowrap;width:auto;flex:0 0 auto;font-size:12px}.canvas-wrap{min-height:0}.canvas-toolbar{left:8px;right:8px;top:8px;gap:6px;overflow-x:auto;flex-wrap:nowrap}.canvas-toolbar .btn{white-space:nowrap;flex:0 0 auto;font-size:12px}.inspector{display:block;position:relative;right:auto;top:auto;bottom:auto;width:auto;max-height:34dvh;border-left:0;border-top:1px solid var(--line);box-shadow:none;padding:10px;overflow:auto}.inspector h2{font-size:13px;margin:0 0 6px}.answer-box{max-height:120px}.log-box{min-height:72px;max-height:120px}.flow-space{width:1200px;height:2600px;padding-top:72px}.flow-lines{width:1200px;height:2600px}.flow-node{width:250px;border-radius:18px}.node-body{font-size:12px}.port{width:34px;height:34px;border-width:5px}.node-delete{width:38px;height:38px;right:-13px;top:-13px;font-size:22px}.field textarea.prompt-editor{min-height:160px}.port.in{top:-17px}.port.out{bottom:-17px}.flow-edge.hit{stroke-width:28}}

/* v6: inspector sidebar removed; node editing and logs are modal/floating UI */
.flow-layout{grid-template-columns:280px 1fr}.palette h2{font-size:16px;margin:0 0 10px}.run-log-toast{position:fixed;right:14px;bottom:14px;z-index:18;max-width:min(560px,calc(100vw - 28px));width:auto;border:1px solid rgba(148,163,184,.45);background:#0f172a;color:#e5e7eb;border-radius:999px;padding:10px 14px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans','Yu Gothic',Meiryo,sans-serif;font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 16px 40px rgba(15,23,42,.28);cursor:pointer;text-align:left}.run-log-toast:hover{background:#111c33}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}.modal-head h2{margin:0}.modal-close{width:38px;height:38px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:22px;font-weight:900;line-height:1;cursor:pointer}.modal-close:hover{background:#f8fafc}.node-modal{width:min(760px,calc(100vw - 28px))}.log-modal{width:min(760px,calc(100vw - 28px))}.full-log{min-height:360px;max-height:calc(100vh - 160px);overflow:auto}.field textarea.prompt-editor{min-height:260px}.modal .split-row{align-items:center;justify-content:flex-start}
@media(max-width:1100px){.flow-layout{grid-template-columns:220px 1fr}.inspector{display:none!important}}
@media(max-width:760px){.flow-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}.run-log-toast{left:10px;right:10px;bottom:10px;max-width:none;border-radius:14px;padding:10px 12px;font-size:11px}.modal-backdrop{align-items:flex-end}.modal{width:100%;max-height:88dvh;border-radius:18px 18px 0 0;padding:14px}.node-modal{width:100%}.full-log{min-height:240px;max-height:70dvh}.field textarea.prompt-editor{min-height:190px}.flow-space{padding-bottom:64px}}

/* v7: checkbox row for raw-data option */
.field.check-field{margin:0 0 12px}
.field.check-field label{display:flex;align-items:flex-start;gap:10px;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fbfdff;color:#334155;font-size:13px;font-weight:800;line-height:1.45;cursor:pointer}
.field.check-field input[type="checkbox"]{width:18px;height:18px;min-width:18px;margin:1px 0 0;padding:0;accent-color:var(--accent);cursor:pointer}
.check-field-text{display:flex;flex-direction:column;gap:2px}
.check-field-text small{font-size:11px;font-weight:600;color:var(--muted);line-height:1.45}
@media(max-width:760px){.field.check-field label{padding:12px 12px;font-size:13px}.field.check-field input[type="checkbox"]{width:22px;height:22px;min-width:22px}}

/* v10: refined Agent Flow UI */
.canvas-toolbar{right:12px;padding-right:300px;align-items:center}
.run-log-toast{position:absolute;right:12px;top:12px;bottom:auto;z-index:4;max-width:min(280px,calc(100% - 24px));border:1px solid rgba(148,163,184,.42);background:rgba(15,23,42,.94);color:#f8fafc;border-radius:14px;padding:9px 12px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans','Yu Gothic',Meiryo,sans-serif;font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 14px 34px rgba(15,23,42,.26);cursor:pointer;text-align:left}.run-log-toast::before{content:none!important;display:none!important}.run-log-toast:hover{background:#111827;transform:translateY(-1px)}
.flow-space{transform-origin:0 0;transition:transform .14s ease}.node-preview{max-height:none;overflow:visible;white-space:pre-wrap;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px;margin-top:8px}.flow-node{width:300px}.node-body{overflow:visible}.node-delete{display:none;position:absolute;right:-12px;top:-12px;width:34px;height:34px;align-items:center;justify-content:center;border:2px solid #fff;border-radius:999px;background:linear-gradient(135deg,#fb7185,#be123c);color:#fff;font-size:20px;font-weight:900;line-height:1;box-shadow:0 10px 22px rgba(190,18,60,.28),0 2px 8px rgba(15,23,42,.18);cursor:pointer;z-index:6;touch-action:none;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}.flow-node.selected .node-delete,.flow-node:hover .node-delete{display:flex}.node-delete:hover{transform:scale(1.08);filter:saturate(1.08);box-shadow:0 14px 28px rgba(190,18,60,.34),0 3px 10px rgba(15,23,42,.22)}.node-delete:active{transform:scale(.96)}.modal-close{width:38px;height:38px;border:1px solid #fecdd3;border-radius:999px;background:#fff1f2;color:#be123c;font-size:22px;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(190,18,60,.12)}.modal-close:hover{background:#ffe4e6;color:#9f1239;transform:translateY(-1px)}
@media(max-width:760px){.canvas-toolbar{right:8px;padding-right:0;padding-top:46px}.run-log-toast{left:auto;right:8px;top:8px;bottom:auto;max-width:min(260px,calc(100% - 16px));border-radius:12px;padding:8px 10px;font-size:11px}.flow-node{width:280px}.node-delete{display:flex;width:38px;height:38px;right:-13px;top:-13px;font-size:22px}}

/* 2026-05-23: cloud saved flows + compact node output preview */
.node-preview{
  max-height:none;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  line-height:1.35;
  cursor:pointer;
}
.node-modal .answer-box{
  max-height:70vh;
  white-space:pre-wrap;
}
.cloud-flow-section{
  border-top:1px solid var(--line);
  padding-top:14px;
}
.compact-field{margin-bottom:8px}.compact-field input{padding:8px 10px}
.palette-grid.two-col{grid-template-columns:1fr 1fr}.palette-grid.two-col .btn{justify-content:center;font-size:12px;padding:8px 6px}
.cloud-flow-status{font-size:12px;color:var(--muted);line-height:1.5;margin:9px 0 8px}.saved-flows-list{display:grid;gap:8px}.saved-flow-empty{font-size:12px;padding:8px;color:var(--muted)}
.saved-flow-item{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:stretch;border:1px solid var(--line);border-radius:12px;background:#f8fafc;padding:6px;transition:border-color .15s,background .15s,box-shadow .15s}.saved-flow-item.active{border-color:var(--accent);background:#eef3ff;box-shadow:0 8px 20px rgba(36,76,154,.10)}
.saved-flow-load{min-width:0;border:0;background:transparent;text-align:left;cursor:pointer;padding:4px 6px;border-radius:8px}.saved-flow-load:hover{background:#fff}.saved-flow-name{display:block;font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.saved-flow-load small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.saved-flow-delete{width:30px;height:30px;border:0;border-radius:999px;background:#fee2e2;color:#991b1b;font-size:18px;font-weight:900;line-height:1;cursor:pointer;align-self:center}.saved-flow-delete:hover{background:#fecaca;color:#7f1d1d}
@media (max-width:760px){.palette-grid.two-col{grid-template-columns:1fr}.saved-flow-item{grid-template-columns:1fr auto}}

/* 2026-05-23: multiple saved flow UI polish + centered close buttons + node frame fix */
.flow-space{
  overflow:visible;
  min-width:2200px;
  min-height:3200px;
  padding-bottom:160px;
}
.flow-lines{
  overflow:visible;
}
.flow-node{
  border:1.5px solid var(--line);
  background-clip:padding-box;
  overflow:visible;
  contain:none;
}
.flow-node.selected{
  outline-offset:2px;
}
.node-body{
  overflow:visible;
}
.node-preview{
  display:block;
  max-width:100%;
  min-width:0;
  min-height:24px;
  max-height:26px;
  line-height:1.35;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.node-preview::after{
  content:"クリックで全文表示";
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
  line-height:1;
}
.node-modal .answer-box{
  max-height:70vh;
  overflow:auto;
  white-space:pre-wrap;
}
.node-delete,
.modal-close,
.saved-flow-delete{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  text-align:center;
  font-size:0 !important;
  line-height:1;
}
.node-delete::before,
.modal-close::before,
.saved-flow-delete::before{
  content:"×";
  display:block;
  line-height:1;
  transform:translateY(-1px);
  font-family:Arial, Helvetica, sans-serif;
  font-weight:900;
}
.node-delete::before{font-size:21px;color:#fff;}
.modal-close::before{font-size:24px;color:#be123c;}
.saved-flow-delete::before{font-size:19px;color:#991b1b;}
.flow-node.selected .node-delete,
.flow-node:hover .node-delete{
  display:inline-flex;
}
.saved-flow-delete:hover::before{color:#7f1d1d;}
.modal-close:hover::before{color:#9f1239;}
.cloud-flow-section .hint-mini{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
@media(max-width:760px){
  .flow-space{min-width:1500px;min-height:3200px;padding-bottom:180px;}
  .node-delete::before{font-size:23px;}
}

/* 2026-05-23: saved flow dates + zoom line stability */
.saved-flow-dates{
  display:grid;
  gap:2px;
  margin-top:4px;
}
.saved-flow-dates small{
  display:block;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.25;
}
.node-preview{
  height:26px;
  max-height:26px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.node-preview::after{
  content:none !important;
}
.flow-lines{
  transform:none;
  transform-origin:0 0;
}
.flow-edge{
  vector-effect:non-scaling-stroke;
}
@media(max-width:760px){
  .saved-flow-dates small{font-size:10px;}
}


/* 2026-05-23: allow all default nodes to be deleted + prevent rounded frame clipping */
.flow-node{
  border:0 !important;
  border-radius:18px !important;
  background:#fff;
  overflow:visible !important;
  box-shadow:var(--shadow);
  isolation:isolate;
}
.flow-node::before{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid var(--line);
  border-radius:18px;
  pointer-events:none;
  z-index:5;
  box-sizing:border-box;
}
.flow-node.selected::before{
  border-color:var(--accent);
}
.flow-node.running::before{border-color:#f59e0b;}
.flow-node.done::before{border-color:#10b981;}
.flow-node.error::before{border-color:#ef4444;}
.node-head{
  border-radius:18px 18px 0 0;
  margin:0;
  position:relative;
  z-index:2;
  background-clip:padding-box;
}
.node-body{
  position:relative;
  z-index:2;
}
.port,
.node-delete{
  z-index:8;
}
.node-delete{
  border:2px solid #fff !important;
}
.flow-node .node-delete{
  display:none;
}
.flow-node.selected .node-delete,
.flow-node:hover .node-delete{
  display:inline-flex;
}
@media(max-width:760px){
  .flow-node{border-radius:18px !important;}
  .flow-node::before{border-radius:18px;}
}

/* 2026-05-23: result node markdown popup + save button order + saved flow limit UI */
.markdown-body{
  line-height:1.75;
  color:var(--ink);
}
.markdown-body p{margin:0 0 0.72em;}
.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{
  margin:1.05em 0 .48em;
  line-height:1.35;
  color:#0f172a;
}
.markdown-body h3{font-size:18px;border-bottom:1px solid #e2e8f0;padding-bottom:6px;}
.markdown-body h4{font-size:16px;}
.markdown-body h5,.markdown-body h6{font-size:14px;}
.markdown-body ul{margin:.35em 0 .85em 1.25em;padding:0;}
.markdown-body li{margin:.25em 0;}
.markdown-body code{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.92em;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:6px;
  padding:1px 5px;
}
.markdown-body pre{
  background:#0f172a;
  color:#e5e7eb;
  border-radius:12px;
  padding:12px;
  overflow:auto;
  white-space:pre-wrap;
}
.markdown-body pre code{
  background:transparent;
  border:0;
  color:inherit;
  padding:0;
}
.palette-grid.two-col #newCloudFlowBtn{order:1;}
.palette-grid.two-col #saveCloudFlowBtn{order:2;}

/* 2026-05-23: save panel + canvas add button refinement */
.save-panel{display:flex;flex-direction:column;gap:14px;}
.current-flow-info{display:grid;gap:8px;margin-top:10px;}
.flow-info-card{border:1px solid rgba(36,76,154,.16);background:linear-gradient(135deg,#fbfdff,#eef3ff);border-radius:16px;padding:12px;box-shadow:0 8px 20px rgba(36,76,154,.07);}
.flow-info-title{font-weight:900;font-size:14px;color:var(--accent);margin:0 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.flow-info-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid rgba(148,163,184,.25);padding:7px 0;font-size:12px;}
.flow-info-row:first-of-type{border-top:0;}
.flow-info-row span{color:var(--muted);}
.flow-info-row strong{font-weight:800;color:#24324b;text-align:right;}
.canvas-add-node-btn{position:absolute;left:18px;bottom:18px;z-index:10;width:58px;height:58px;border:1px solid rgba(36,76,154,.18);border-radius:20px;background:linear-gradient(135deg,#244c9a,#5177c7);color:#fff;font-size:34px;font-weight:900;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 42px rgba(36,76,154,.28),0 4px 12px rgba(15,23,42,.12);cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;}
.canvas-add-node-btn:hover{transform:translateY(-2px) scale(1.03);filter:saturate(1.04);box-shadow:0 22px 50px rgba(36,76,154,.34),0 5px 14px rgba(15,23,42,.16);}
.canvas-add-node-btn:active{transform:translateY(0) scale(.98);}

.add-workflow-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:12px;border:1px solid rgba(36,76,154,.16);border-radius:16px;background:linear-gradient(135deg,#f8fbff,#ffffff);}
.add-workflow-actions .btn{box-shadow:0 8px 20px rgba(36,76,154,.12);}
.add-workflow-actions span{font-size:12px;color:var(--muted);line-height:1.5;}
@media(max-width:760px){.add-workflow-actions{align-items:stretch;gap:8px}.add-workflow-actions .btn{width:100%;justify-content:center}.add-workflow-actions span{font-size:11px}}

.add-node-modal{width:min(960px,calc(100vw - 32px));}
.add-node-modal-body{display:grid;gap:18px;}
.node-picker-section h3{font-size:14px;margin:0 0 6px;color:#334155;}
.node-picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.node-picker-card,.template-card{border:1px solid rgba(148,163,184,.35);background:#fff;border-radius:16px;padding:12px;text-align:left;cursor:pointer;box-shadow:0 8px 20px rgba(15,23,42,.05);transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease;}
.node-picker-card:hover,.template-card:hover{transform:translateY(-1px);border-color:rgba(36,76,154,.45);background:#fbfdff;box-shadow:0 12px 28px rgba(36,76,154,.12);}
.node-picker-card strong,.template-card strong{display:block;color:var(--accent);font-size:13px;margin-bottom:5px;}
.node-picker-card span,.template-card span{display:block;color:var(--muted);font-size:12px;line-height:1.55;}
/* Avoid red close buttons; use the site's blue accent. */
.modal-close,.saved-flow-delete,.node-delete{font-size:0;color:transparent;display:inline-flex;align-items:center;justify-content:center;}
.modal-close{border:1px solid rgba(36,76,154,.18)!important;background:#eef3ff!important;color:transparent!important;box-shadow:0 6px 16px rgba(36,76,154,.12)!important;}
.modal-close:hover{background:#dbe8ff!important;transform:translateY(-1px);}
.modal-close::before{content:"×";font-size:24px!important;line-height:1;color:var(--accent)!important;font-weight:900;}
.saved-flow-delete{background:#eef3ff!important;color:transparent!important;border:1px solid rgba(36,76,154,.12)!important;}
.saved-flow-delete:hover{background:#dbe8ff!important;}
.saved-flow-delete::before{content:"×";font-size:19px!important;line-height:1;color:var(--accent)!important;font-weight:900;}
.node-delete{background:linear-gradient(135deg,#244c9a,#5177c7)!important;color:transparent!important;box-shadow:0 10px 22px rgba(36,76,154,.28),0 2px 8px rgba(15,23,42,.18)!important;}
.node-delete:hover{box-shadow:0 14px 28px rgba(36,76,154,.34),0 3px 10px rgba(15,23,42,.22)!important;}
.node-delete::before{content:"×";font-size:21px!important;line-height:1;color:#fff!important;font-weight:900;}
@media(max-width:760px){
  .canvas-add-node-btn{left:12px;bottom:12px;width:54px;height:54px;border-radius:18px;font-size:31px;}
  .node-picker-grid,.template-grid{grid-template-columns:1fr;}
  .add-node-modal{width:calc(100vw - 24px);}
  .palette{max-height:240px;}
}

/* 2026-05-23: compact save panel + mobile drawer + node result button */
.mobile-menu-btn{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--accent);
  border-radius:12px;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(15,23,42,.06);
}
.save-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;}
.save-panel-head h3{margin:0!important;font-size:15px!important;color:#334155!important;}
 .panel-close-btn{
  display:none;
  position:relative;
  flex:0 0 36px;
  border:0;
  background:transparent;
  color:transparent;
  border-radius:999px;
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0!important;
  margin:0!important;
  font-size:0;
  line-height:0;
  cursor:pointer;
  align-items:center;
  justify-content:center!important;
  box-shadow:none;
}
.panel-close-btn::before,
.panel-close-btn::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:2.4px;
  border-radius:999px;
  background:var(--accent);
  transform-origin:center;
}
.panel-close-btn::before{transform:translate(-50%,-50%) rotate(45deg);}
.panel-close-btn::after{transform:translate(-50%,-50%) rotate(-45deg);}
.panel-close-btn:hover{background:transparent;transform:scale(1.05);}
.panel-close-btn:active{transform:translateY(0);}
.panel-close-btn:focus-visible{outline:2px solid rgba(36,76,154,.35);outline-offset:2px;}
.save-panel-backdrop{display:none;position:fixed;inset:0;border:0;background:rgba(15,23,42,.42);z-index:18;cursor:pointer;}
.node-result-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;border:1px solid rgba(36,76,154,.18);background:linear-gradient(135deg,#eef3ff,#ffffff);color:var(--accent);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:900;cursor:pointer;box-shadow:0 6px 16px rgba(36,76,154,.10);}
.node-result-btn:hover{background:#eef3ff;box-shadow:0 8px 20px rgba(36,76,154,.14);}
.node-result-btn.error{border-color:#fecaca;background:#fff7f7;color:#991b1b;}
.current-flow-section,.compact-field,.hint-mini,.palette-grid.two-col{display:none!important;}
.current-flow-info{display:none!important;}

@media(max-width:760px){
  .flow-topbar{position:relative;padding-left:0!important;}
  .mobile-menu-btn{display:inline-flex;position:static!important;left:auto!important;top:auto!important;z-index:30;}
  .save-panel{position:fixed!important;left:0;top:0;bottom:0;width:min(86vw,320px);max-height:none!important;display:block!important;transform:translateX(-105%);transition:transform .22s ease;z-index:25;border-right:1px solid var(--line)!important;border-bottom:0!important;padding:16px 14px!important;box-shadow:0 24px 70px rgba(15,23,42,.28);overflow:auto!important;}
  .save-panel.open{transform:translateX(0);}
  .save-panel-backdrop.open{display:block;}
  .panel-close-btn{display:inline-flex!important;position:absolute!important;top:10px!important;right:10px!important;left:auto!important;z-index:3;}
  .save-panel-head{padding-right:38px;}
  .flow-layout{grid-template-columns:1fr!important;grid-template-rows:1fr!important;}
  .canvas-wrap{min-height:0;}
  .save-panel .palette-section h3{display:block!important;}
  .cloud-flow-status{margin-top:6px;}
  body.save-panel-open{overflow:hidden;}
}

/* 2026-05-23: Flow name editor above toolbar buttons + log at bottom right */
.canvas-toolbar{
  align-items:flex-start!important;
  padding-right:0!important;
  max-width:calc(100% - 24px);
}
.flow-toolbar-title{
  flex:0 0 100%;
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 2px;
  min-height:34px;
  max-width:min(520px,100%);
}
.flow-name-display{
  width:auto!important;
  min-width:0!important;
  max-width:min(480px,calc(100vw - 160px));
  min-height:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  padding:6px 11px!important;
  border:1px solid rgba(36,76,154,.16)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.92)!important;
  color:#1e293b!important;
  box-shadow:0 8px 20px rgba(15,23,42,.08)!important;
  cursor:text!important;
}
.flow-name-display:hover,
.flow-name-display:focus-visible{
  background:#fff!important;
  border-color:rgba(36,76,154,.36)!important;
  box-shadow:0 0 0 3px rgba(36,76,154,.12),0 8px 20px rgba(15,23,42,.08)!important;
  outline:none;
}
.flow-name-text{
  display:block;
  min-width:0;
  max-width:100%;
  color:#1e293b;
  font-size:13px;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.flow-name-edit-hint{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:3px;
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  line-height:1;
  opacity:.84;
}
.flow-name-edit-hint::before{
  content:"✎";
  font-size:12px;
  line-height:1;
  transform:translateY(-1px);
}
.flow-name-edit-input{
  width:min(420px,calc(100vw - 120px));
  min-height:34px;
  border:1px solid rgba(36,76,154,.28);
  border-radius:999px;
  background:#fff;
  color:#1e293b;
  font-size:13px;
  font-weight:900;
  padding:6px 12px;
  outline:none;
  box-shadow:0 8px 20px rgba(15,23,42,.10);
}
.flow-name-edit-input:focus{box-shadow:0 0 0 3px rgba(36,76,154,.16),0 8px 20px rgba(15,23,42,.10);}
.flow-name-save-btn{
  flex:0 0 auto;
  min-height:34px;
  border:1px solid rgba(36,76,154,.28);
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:12px;
  font-weight:900;
  padding:6px 13px;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(36,76,154,.16);
}
.flow-name-save-btn:hover,
.flow-name-save-btn:focus-visible{
  filter:brightness(.96);
  outline:none;
  box-shadow:0 0 0 3px rgba(36,76,154,.16),0 8px 20px rgba(36,76,154,.16);
}
.flow-name-save-btn.hidden{display:none!important;}

.run-log-toast{
  top:auto!important;
  left:auto!important;
  right:12px!important;
  bottom:12px!important;
}
@media(max-width:760px){
  .canvas-toolbar{left:8px!important;right:8px!important;top:8px!important;padding-top:0!important;max-width:calc(100% - 16px);}
  .flow-toolbar-title{min-height:32px;margin-bottom:0;}
  .flow-name-display{max-width:calc(100vw - 24px);min-height:32px!important;padding:5px 10px!important;gap:7px!important;}
  .flow-name-text{font-size:12px;}
  .flow-name-edit-hint{font-size:11px;opacity:1;}
  .flow-name-edit-input{width:calc(100vw - 86px);min-height:32px;font-size:12px;}
  .flow-name-save-btn{min-height:32px;font-size:11px;padding:5px 10px;}
  .run-log-toast{right:8px!important;bottom:8px!important;top:auto!important;left:auto!important;max-width:min(260px,calc(100% - 16px));}
  .flow-space{padding-bottom:70px;}
}

/* 2026-05-23: remove saved flow header line and delete-x frame */
.cloud-flow-section{
  border-top:0!important;
  padding-top:0!important;
}
.saved-flow-delete{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  padding:0!important;
  color:transparent!important;
}
.saved-flow-delete:hover{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.saved-flow-delete::before{
  color:var(--accent)!important;
  font-size:19px!important;
}


/* 実行中ノードの結果欄: 未実行テキストではなく1行スケルトンを表示 */
.node-result-skeleton{
  display:block;
  width:100%;
  height:14px;
  margin-top:10px;
  border-radius:999px;
  background:linear-gradient(90deg, #edf2f7 0%, #f8fafc 42%, #edf2f7 84%);
  background-size:200% 100%;
  animation:nodeResultSkeleton 1.15s ease-in-out infinite;
}
@keyframes nodeResultSkeleton{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
@media (prefers-reduced-motion: reduce){
  .node-result-skeleton{animation:none;}
}


/* 2026-05-23: add new-save button and keep all toolbar items left aligned */
.canvas-toolbar{
  justify-content:flex-start!important;
  align-content:flex-start!important;
  text-align:left!important;
}
.canvas-toolbar .btn{
  justify-content:center;
}
.flow-toolbar-title{
  justify-content:flex-start!important;
  text-align:left!important;
}
#newSaveFlowBtn{
  border-color:rgba(36,76,154,.22);
  color:var(--accent);
  background:#fff;
}
#newSaveFlowBtn:hover{
  background:#eef3ff;
}
@media(max-width:760px){
  .canvas-toolbar{
    justify-content:flex-start!important;
    align-items:flex-start!important;
    overflow-x:auto;
  }
}


/* 2026-05-23: place toolbar buttons directly under Flow name, left aligned */
.canvas-toolbar{
  left:12px!important;
  right:auto!important;
  top:12px!important;
  width:auto!important;
  max-width:calc(100% - 24px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  align-content:flex-start!important;
  gap:6px!important;
  padding:0!important;
  text-align:left!important;
}
.flow-toolbar-title{
  width:auto!important;
  flex:0 0 auto!important;
  max-width:min(520px,calc(100vw - 32px))!important;
  margin:0!important;
}
.flow-toolbar-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  width:auto!important;
  max-width:calc(100vw - 32px)!important;
  text-align:left!important;
}
.flow-toolbar-actions .btn{
  flex:0 0 auto!important;
}
.flow-name-edit-input:not(.hidden) + .flow-name-edit-hint,
.flow-toolbar-title:has(.flow-name-edit-input:not(.hidden)) .flow-name-edit-hint{
  display:none!important;
}
@media(max-width:760px){
  .canvas-toolbar{
    left:8px!important;
    right:auto!important;
    top:8px!important;
    max-width:calc(100% - 16px)!important;
    overflow:visible!important;
  }
  .flow-toolbar-title{
    max-width:calc(100vw - 16px)!important;
  }
  .flow-toolbar-actions{
    max-width:calc(100vw - 16px)!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    padding-bottom:2px!important;
    -webkit-overflow-scrolling:touch;
  }
  .flow-toolbar-actions .btn{
    white-space:nowrap!important;
  }
}

/* 2026-05-23: while editing Flow name, remove the edit pill itself (not only the text) */
.flow-name-display.hidden,
.flow-toolbar-title.is-editing .flow-name-display,
.flow-name-text.hidden,
.flow-toolbar-title.is-editing .flow-name-text,
.flow-toolbar-title.is-editing .flow-name-edit-hint{
  display:none!important;
  width:0!important;
  min-width:0!important;
  height:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}


/* 2026-05-23: pan the canvas by dragging empty background */
.flow-canvas{
  cursor:grab;
}
.flow-canvas.panning{
  cursor:grabbing!important;
  user-select:none;
}
.flow-canvas.panning .flow-space,
.flow-canvas.panning .flow-lines{
  cursor:grabbing!important;
}
.flow-node,
.flow-node *{
  cursor:auto;
}
.node-head{
  cursor:grab;
}
.node-head:active{
  cursor:grabbing;
}
.port,
.node-delete,
.node-result-btn{
  cursor:pointer;
}


/* 2026-05-24: prevent mojibake in edit/close/delete UI by avoiding symbol glyphs */
.flow-name-edit-hint::before{
  content:none!important;
  display:none!important;
}

.modal-close,
.saved-flow-delete,
.node-delete{
  position:relative!important;
  font-size:0!important;
  color:transparent!important;
  text-indent:-9999px!important;
  overflow:hidden!important;
}
.modal-close::before,
.modal-close::after,
.saved-flow-delete::before,
.saved-flow-delete::after,
.node-delete::before,
.node-delete::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  display:block!important;
  width:14px!important;
  height:2px!important;
  border-radius:999px!important;
  background:var(--accent)!important;
  transform-origin:center!important;
  text-indent:0!important;
}
.modal-close::before,
.saved-flow-delete::before,
.node-delete::before{
  transform:translate(-50%,-50%) rotate(45deg)!important;
}
.modal-close::after,
.saved-flow-delete::after,
.node-delete::after{
  transform:translate(-50%,-50%) rotate(-45deg)!important;
}
.node-delete::before,
.node-delete::after{
  width:15px!important;
  background:#fff!important;
}
.saved-flow-delete::before,
.saved-flow-delete::after{
  width:13px!important;
  background:var(--accent)!important;
}
.modal-close::before,
.modal-close::after{
  width:15px!important;
  background:var(--accent)!important;
}
.panel-close-btn{
  font-size:0!important;
  color:transparent!important;
  text-indent:-9999px!important;
  overflow:hidden!important;
}
.panel-close-btn::before,
.panel-close-btn::after{
  text-indent:0!important;
}


/* 2026-05-24: keep node delete button anchored to each node top-right */
.flow-node{
  position:absolute!important;
  overflow:visible!important;
}
.flow-node > .node-delete{
  position:absolute!important;
  top:-12px!important;
  right:-12px!important;
  left:auto!important;
  bottom:auto!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  padding:0!important;
  margin:0!important;
  z-index:20!important;
  transform:none;
}
.flow-node > .node-delete:hover{
  transform:scale(1.08);
}
.flow-node > .node-delete:active{
  transform:scale(.96);
}
@media(max-width:760px){
  .flow-node > .node-delete{
    top:-13px!important;
    right:-13px!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    max-width:38px!important;
  }
}

/* 2026-05-24: unify account area UI in agents.html */
.flow-topbar .top-actions{
  align-items:center!important;
  gap:8px!important;
}
.flow-topbar .top-actions .usage-pill,
.flow-topbar .top-actions .btn{
  min-height:32px!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:700!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
}
.flow-topbar .top-actions .usage-pill{
  background:#f8fafc!important;
  border:1px solid var(--line)!important;
  color:#334155!important;
}
.flow-topbar .top-actions .btn:not(.primary){
  background:#f8fafc!important;
  border:1px solid var(--line)!important;
  color:#334155!important;
  box-shadow:none!important;
}
.flow-topbar .top-actions .btn:not(.primary):hover{
  background:#eef2f7!important;
  color:var(--ink)!important;
}
.flow-topbar .top-actions .btn.primary{
  min-height:32px!important;
  font-size:13px!important;
}
@media(max-width:760px){
  .flow-topbar .top-actions{
    gap:6px!important;
  }
  .flow-topbar .top-actions .usage-pill,
  .flow-topbar .top-actions .btn{
    min-height:30px!important;
    padding:6px 9px!important;
    font-size:12px!important;
  }
}

/* 2026-05-24: hide auth buttons correctly even under unified top-actions button styles */
.flow-topbar .top-actions .btn.hidden,
.flow-topbar .top-actions #loginBtn.hidden,
.flow-topbar .top-actions #logoutBtn.hidden{
  display:none!important;
}


/* Stock input node: open popup only from the explicit stock/code area */
.node-stock-open{
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  border:1px solid rgba(36,76,154,.16);
  background:#f8fbff;
  color:#334155;
  border-radius:999px;
  padding:6px 10px;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  box-shadow:none;
}
.node-stock-open:hover{background:#eef3ff;border-color:rgba(36,76,154,.28);}
.node-stock-text{
  display:inline-block;
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:760px){
  .node-stock-open{min-height:34px;padding:7px 10px;}
  .node-stock-text{max-width:185px;}
}

/* 2026-05-24: rectangle multi-select + copy/paste support */
.selection-box{
  position:absolute;
  z-index:9;
  pointer-events:none;
  border:1.5px solid var(--accent);
  background:rgba(36,76,154,.10);
  border-radius:8px;
}

/* 2026-05-24: Undo button */
.btn:disabled,
.btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
  background:#f8fafc;
}
.btn:disabled:hover,
.btn[disabled]:hover{
  background:#f8fafc;
}


/* デフォルトFlowは常に1件残し、削除できない固定Flowとして表示する */
.saved-flow-item.is-default-flow{
  border-style:solid;
  background:#f8fafc;
}
.saved-flow-fixed{
  align-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(36,76,154,.12);
  background:#eef3ff;
  color:var(--accent);
  font-size:11px;
  font-weight:800;
}

/* 2026-05-24: agents header/account area aligned with index.html */
.flow-topbar{
  flex-wrap:nowrap!important;
  align-items:center!important;
}
.flow-topbar .brand{
  flex:0 0 auto;
}
.flow-topbar .top-actions{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
  min-width:0;
}
.flow-topbar .auth-user{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
  flex:0 1 auto;
}
.flow-topbar .usage-status.usage-card{
  display:inline-flex!important;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  min-width:138px;
  max-width:260px;
  padding:4px 8px!important;
  border-radius:12px!important;
  background:#fff!important;
  border:1px solid #dbeafe!important;
  box-shadow:0 3px 10px rgba(15,23,42,.04);
  color:#0f172a!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}
.flow-topbar .auth-status{
  font-size:11px;
  font-weight:700;
  color:#475569;
  line-height:1.1;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.flow-topbar #usageStatusBody{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  width:100%;
  min-width:0;
}
.flow-topbar .usage-card-compact{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  white-space:nowrap;
  max-width:100%;
}
.flow-topbar .usage-card-compact strong{
  font-size:12px;
  line-height:1;
  font-weight:800;
  color:#0f172a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.flow-topbar .usage-progress{
  display:block;
  width:100%;
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:#e2e8f0;
}
.flow-topbar .usage-progress-bar{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#60a5fa,#2563eb);
  transition:width .25s ease;
}
.flow-topbar .usage-status.paid{
  border-color:#bbf7d0!important;
  background:#f0fdf4!important;
  color:#166534!important;
}
.flow-topbar .usage-status.paid .usage-card-compact strong{
  color:#166534;
}
.flow-topbar .usage-status.paid .usage-progress{
  background:#dcfce7;
}
.flow-topbar .usage-status.paid .usage-progress-bar{
  background:linear-gradient(90deg,#4ade80,#16a34a);
}
.flow-topbar .usage-status.limit-reached{
  border-color:#fecaca!important;
  background:#fff7f7!important;
}
.flow-topbar .usage-status.limit-reached .usage-card-compact strong{
  color:#b91c1c;
}
.flow-topbar .usage-status.limit-reached .usage-progress,
.flow-topbar .usage-status.paid.limit-reached .usage-progress{
  background:#fee2e2!important;
}
.flow-topbar .usage-status.limit-reached .usage-progress-bar,
.flow-topbar .usage-status.paid.limit-reached .usage-progress-bar{
  background:linear-gradient(90deg,#fb7185,#ef4444)!important;
}
.flow-topbar .usage-status.paid.limit-reached{
  border-color:#fecaca!important;
  background:#fff7f7!important;
  color:#b91c1c!important;
}
.flow-topbar .usage-status.paid.limit-reached .usage-card-compact strong{
  color:#b91c1c!important;
}
.flow-topbar .top-actions .btn{
  flex:0 0 auto;
  white-space:nowrap!important;
}
.flow-topbar .top-actions #normalAnalysisBtn{
  order:20;
}
.flow-topbar .top-actions #logoutBtn{
  order:99;
}
.flow-topbar .top-actions #loginBtn{
  order:10;
}
@media(max-width:760px){
  .flow-topbar{
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:4px!important;
    padding:6px 6px!important;
    overflow:hidden;
  }
  .mobile-menu-btn{
    flex:0 0 28px!important;
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    font-size:15px!important;
    padding:0!important;
  }
  .flow-topbar .brand{
    gap:4px!important;
    min-width:0!important;
    flex:0 1 auto;
  }
  .flow-topbar .brand img{
    width:22px!important;
    height:22px!important;
    border-radius:6px!important;
  }
  .flow-topbar .brand h1{
    font-size:12px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .flow-topbar .top-actions{
    gap:3px!important;
    flex:1 1 auto;
    min-width:0;
    overflow:visible;
  }
  .flow-topbar .auth-user{
    flex:1 1 118px;
    min-width:92px;
    max-width:148px;
  }
  .flow-topbar .usage-status.usage-card{
    width:100%;
    min-width:0!important;
    max-width:148px;
    padding:2px 4px!important;
    border-radius:9px!important;
  }
  .flow-topbar .auth-status{
    font-size:8.8px!important;
    letter-spacing:-.04em;
  }
  .flow-topbar .usage-card-compact strong{
    font-size:8.8px!important;
    letter-spacing:-.05em;
  }
  .flow-topbar .usage-progress{
    height:2px!important;
  }
  .flow-topbar .top-actions .btn{
    min-height:28px!important;
    height:28px!important;
    padding:4px 5px!important;
    border-radius:999px!important;
    font-size:10px!important;
    line-height:1!important;
    letter-spacing:-.04em;
  }
  .flow-topbar .top-actions #loginBtn{
    max-width:82px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .flow-topbar .top-actions #normalAnalysisBtn{
    max-width:54px;
  }
  .flow-topbar .top-actions #logoutBtn{
    max-width:54px;
  }
}
@media(max-width:390px){
  .flow-topbar .brand h1{font-size:11px!important;}
  .flow-topbar .auth-user{max-width:128px;min-width:82px;}
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-compact strong{font-size:8.2px!important;}
  .flow-topbar .top-actions .btn{font-size:9.2px!important;padding-inline:4px!important;}
}

/* 2026-05-24: show cropped AI input prompt in node modal */
.node-modal .prompt-preview-box{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12px;
  line-height:1.55;
  background:#f8fafc;
  max-height:52vh;
}
.node-modal .answer-box.compact{
  min-height:auto;
  max-height:96px;
}

/* 2026-05 additions: portfolio, rerun, preflight, wheel zoom */
.flow-node{min-width:260px}.node-rerun{position:absolute;right:36px;top:8px;width:22px;height:22px;border:1px solid #cbd5e1;background:#fff;color:#244c9a;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;line-height:1;cursor:pointer;z-index:2}.node-rerun:hover{background:#eef3ff;border-color:#244c9a}.node-delete{z-index:2}.flow-node.running .node-rerun{opacity:.45;pointer-events:none}.status-dot.skipped{background:#f1f5f9;color:#475569}.portfolio-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}.portfolio-table{width:100%;border-collapse:collapse;min-width:720px}.portfolio-table th,.portfolio-table td{border-bottom:1px solid #e5e7eb;padding:6px;text-align:left;font-size:12px}.portfolio-table th{background:#f8fafc;color:#475569;font-weight:700}.portfolio-table input{width:100%;border:1px solid #d9deea;border-radius:8px;padding:6px 7px;background:#fff}.small-editor{min-height:96px}.node-picker-grid,.template-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.flow-canvas{overscroll-behavior:contain}.flow-canvas.panning{cursor:grabbing}.flow-node.portfolioInput .badge,.flow-node.bearishScenarioAi .badge{background:#fff1f2;color:#9f1239;border-color:#fecdd3}


/* Node edit icon: absolute overlay so node layout/size does not change */
.node-edit{
  position:absolute;
  right:62px;
  top:8px;
  width:22px;
  height:22px;
  border:1px solid #cbd5e1;
  background:#fff;
  color:#244c9a;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  z-index:3;
  box-shadow:0 4px 10px rgba(15,23,42,.08);
}
.node-edit svg{width:13px;height:13px;display:block;fill:currentColor;pointer-events:none;}
.node-edit:hover{background:#eef3ff;border-color:#244c9a;transform:translateY(-1px);}
.node-edit:active{transform:translateY(0) scale(.96);}
.flow-node.running .node-edit{opacity:.72;}
@media(max-width:760px){
  .node-edit{right:64px;top:8px;width:24px;height:24px;}
  .node-edit svg{width:14px;height:14px;}
}

/* 2026-05-24: refined node action buttons */
.flow-node .node-actions{
  position:absolute;
  top:8px;
  right:10px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  z-index:9;
  pointer-events:auto;
}
.flow-node .node-action-btn,
.flow-node .node-edit,
.flow-node .node-rerun{
  position:static !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  padding:0 !important;
  border:1px solid rgba(36,76,154,.22) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.94) !important;
  color:#244c9a !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  font-size:10px !important;
  box-shadow:0 4px 10px rgba(15,23,42,.08) !important;
  cursor:pointer;
  transition:background .12s ease,border-color .12s ease,transform .12s ease,box-shadow .12s ease;
}
.flow-node .node-action-btn:hover,
.flow-node .node-edit:hover,
.flow-node .node-rerun:hover{
  background:#eef3ff !important;
  border-color:#244c9a !important;
  transform:translateY(-1px);
  box-shadow:0 7px 14px rgba(36,76,154,.16) !important;
}
.flow-node .node-action-btn:active,
.flow-node .node-edit:active,
.flow-node .node-rerun:active{
  transform:scale(.96);
}
.flow-node .node-edit svg{
  width:12px !important;
  height:12px !important;
  fill:currentColor;
  pointer-events:none;
}
.flow-node .node-rerun span{
  display:block;
  transform:translateX(1px) scale(.9);
  pointer-events:none;
}
.flow-node .node-head{
  padding-right:78px !important;
  min-height:52px;
}
.flow-node.running .node-rerun{
  opacity:.45;
  pointer-events:none;
}
.flow-node .node-delete{
  right:-12px !important;
  top:-12px !important;
  z-index:10 !important;
}
@media(max-width:760px){
  .flow-node .node-actions{top:8px;right:10px;gap:6px;}
  .flow-node .node-action-btn,
  .flow-node .node-edit,
  .flow-node .node-rerun{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    min-height:26px !important;
  }
  .flow-node .node-head{padding-right:86px !important;}
}

/* 2026-05-24: place edit/rerun controls on the right side of node-body */
.flow-node .node-head{
  padding-right:12px !important;
}
.flow-node .node-body{
  position:relative;
  min-height:52px;
  padding-right:58px !important;
}
.flow-node .node-body-content{
  min-width:0;
}
.flow-node .node-body-actions{
  position:absolute !important;
  top:8px !important;
  right:8px !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  gap:6px !important;
  z-index:8;
  pointer-events:auto;
}
.flow-node .node-body-actions .node-action-btn,
.flow-node .node-body-actions .node-edit,
.flow-node .node-body-actions .node-rerun{
  position:static !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  padding:0 !important;
  border:1px solid rgba(36,76,154,.28) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#244c9a !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  font-size:11px !important;
  font-weight:900 !important;
  box-shadow:0 4px 10px rgba(15,23,42,.10) !important;
  cursor:pointer;
}
.flow-node .node-body-actions .node-edit span{
  display:block;
  font-size:11px;
  font-weight:900;
  line-height:1;
  transform:translateY(-.5px);
}
.flow-node .node-body-actions .node-rerun span{
  display:block;
  font-size:10px;
  line-height:1;
  transform:translateX(1px) scale(.9);
}
.flow-node .node-body-actions .node-action-btn:hover,
.flow-node .node-body-actions .node-edit:hover,
.flow-node .node-body-actions .node-rerun:hover{
  background:#eef3ff !important;
  border-color:#244c9a !important;
  transform:translateY(-1px);
  box-shadow:0 7px 14px rgba(36,76,154,.16) !important;
}
.flow-node .node-body-actions .node-action-btn:active,
.flow-node .node-body-actions .node-edit:active,
.flow-node .node-body-actions .node-rerun:active{
  transform:scale(.96);
}
.flow-node.running .node-body-actions .node-rerun{
  opacity:.45;
  pointer-events:none;
}
@media(max-width:760px){
  .flow-node .node-body{padding-right:62px !important;}
  .flow-node .node-body-actions{right:8px !important;top:8px !important;gap:7px !important;}
  .flow-node .node-body-actions .node-action-btn,
  .flow-node .node-body-actions .node-edit,
  .flow-node .node-body-actions .node-rerun{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    min-height:26px !important;
  }
}

/* 2026-05-24: place edit SVG and rerun button inside node-body-content, edit on the left */
.flow-node .node-body{
  padding-right:12px !important;
}
.flow-node .node-body-content{
  display:flex !important;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}
.flow-node .node-body-main{
  flex:1 1 auto;
  min-width:0;
}
.flow-node .node-body-actions{
  position:static !important;
  top:auto !important;
  right:auto !important;
  flex:0 0 auto;
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:6px !important;
  margin-left:auto;
  z-index:8;
  pointer-events:auto;
}
.flow-node .node-body-actions .node-action-btn,
.flow-node .node-body-actions .node-edit,
.flow-node .node-body-actions .node-rerun{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  padding:0 !important;
  border:1px solid rgba(36,76,154,.30) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#244c9a !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  box-shadow:0 4px 10px rgba(15,23,42,.10) !important;
  cursor:pointer;
}
.flow-node .node-body-actions .node-edit-icon,
.flow-node .node-body-actions .node-edit svg{
  width:15px !important;
  height:15px !important;
  display:block !important;
  color:currentColor !important;
  fill:currentColor;
  stroke:currentColor;
  pointer-events:none;
}
.flow-node .node-body-actions .node-rerun span{
  display:block;
  font-size:10px;
  line-height:1;
  transform:translateX(1px) scale(.9);
  pointer-events:none;
}
@media(max-width:760px){
  .flow-node .node-body{padding-right:12px !important;}
  .flow-node .node-body-content{gap:7px;}
  .flow-node .node-body-actions{right:auto !important;top:auto !important;gap:6px !important;}
  .flow-node .node-body-actions .node-action-btn,
  .flow-node .node-body-actions .node-edit,
  .flow-node .node-body-actions .node-rerun{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    min-height:26px !important;
  }
  .flow-node .node-body-actions .node-edit-icon,
  .flow-node .node-body-actions .node-edit svg{
    width:16px !important;
    height:16px !important;
  }
}


/* 2026-05-24 fix: action buttons are inside node-body-content, edit SVG is left of rerun */
.flow-node .node-body{
  padding:10px 12px !important;
  overflow:visible !important;
}
.flow-node .node-body-content{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
}
.flow-node .node-body-main{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:calc(100% - 58px) !important;
}
.flow-node .node-body-actions{
  position:static !important;
  inset:auto !important;
  flex:0 0 auto !important;
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:5px !important;
  margin-left:auto !important;
  z-index:8 !important;
  pointer-events:auto !important;
  transform:none !important;
}
.flow-node .node-body-actions .node-action-btn,
.flow-node .node-body-actions .node-edit,
.flow-node .node-body-actions .node-rerun{
  position:static !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  padding:0 !important;
  border:1px solid rgba(36,76,154,.30) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#244c9a !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  font-size:10px !important;
  box-shadow:0 4px 10px rgba(15,23,42,.10) !important;
  cursor:pointer !important;
  overflow:hidden !important;
  transform:none !important;
}
.flow-node .node-body-actions .node-edit{order:1 !important;}
.flow-node .node-body-actions .node-rerun{order:2 !important;}
.flow-node .node-body-actions .node-edit-icon{
  width:14px !important;
  height:14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#244c9a !important;
  pointer-events:none !important;
}
.flow-node .node-body-actions .node-edit-icon svg,
.flow-node .node-body-actions .node-edit svg{
  width:14px !important;
  height:14px !important;
  display:block !important;
  color:currentColor !important;
  fill:currentColor !important;
  stroke:currentColor !important;
  pointer-events:none !important;
}
.flow-node .node-body-actions .node-rerun span{
  display:block !important;
  transform:translateX(1px) scale(.88) !important;
  pointer-events:none !important;
}
.flow-node .node-body-actions .node-action-btn:hover,
.flow-node .node-body-actions .node-edit:hover,
.flow-node .node-body-actions .node-rerun:hover{
  background:#eef3ff !important;
  border-color:#244c9a !important;
  box-shadow:0 7px 14px rgba(36,76,154,.16) !important;
}
.flow-node.running .node-body-actions .node-rerun{
  opacity:.45 !important;
  pointer-events:none !important;
}
@media(max-width:760px){
  .flow-node .node-body-main{max-width:calc(100% - 64px) !important;}
  .flow-node .node-body-actions{gap:6px !important;}
  .flow-node .node-body-actions .node-action-btn,
  .flow-node .node-body-actions .node-edit,
  .flow-node .node-body-actions .node-rerun{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    min-height:24px !important;
  }
  .flow-node .node-body-actions .node-edit-icon,
  .flow-node .node-body-actions .node-edit-icon svg,
  .flow-node .node-body-actions .node-edit svg{
    width:15px !important;
    height:15px !important;
  }
}


/* 2026-05-24: compact one-line flow toolbar after title */
.canvas-toolbar{
  left:12px!important;
  right:auto!important;
  top:12px!important;
  width:auto!important;
  max-width:calc(100% - 24px)!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  align-content:center!important;
  gap:6px!important;
  padding:0!important;
  text-align:left!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  -webkit-overflow-scrolling:touch;
}
.flow-toolbar-title{
  flex:0 0 auto!important;
  width:auto!important;
  min-height:28px!important;
  max-width:min(260px,28vw)!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:left!important;
}
.flow-name-display{
  min-height:28px!important;
  height:28px!important;
  max-width:100%!important;
  padding:4px 8px!important;
  gap:5px!important;
  border-radius:999px!important;
  font-size:11px!important;
  line-height:1.1!important;
}
.flow-name-text{
  max-width:170px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.flow-name-edit-hint{
  font-size:10px!important;
  padding:0!important;
}
.flow-name-edit-input{
  height:28px!important;
  min-height:28px!important;
  width:220px!important;
  max-width:min(220px,28vw)!important;
  padding:4px 8px!important;
  font-size:11px!important;
  border-radius:999px!important;
}
.flow-toolbar-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 auto!important;
  width:auto!important;
  max-width:none!important;
  gap:5px!important;
  flex-wrap:nowrap!important;
  overflow:visible!important;
  padding:0!important;
  margin:0!important;
}
.flow-toolbar-actions .btn,
.canvas-toolbar .btn{
  min-height:28px!important;
  height:28px!important;
  padding:4px 7px!important;
  border-radius:8px!important;
  font-size:11px!important;
  line-height:1!important;
  gap:3px!important;
  white-space:nowrap!important;
  flex:0 0 auto!important;
}
#zoomResetBtn{
  min-width:42px!important;
  padding-inline:6px!important;
}
@media(max-width:760px){
  .canvas-toolbar{
    left:8px!important;
    top:8px!important;
    max-width:calc(100% - 16px)!important;
    gap:4px!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
  }
  .flow-toolbar-title{
    max-width:150px!important;
  }
  .flow-name-text{max-width:92px!important;}
  .flow-name-display{font-size:10.5px!important;padding:4px 7px!important;}
  .flow-name-edit-hint{font-size:9.5px!important;}
  .flow-toolbar-actions{gap:4px!important;}
  .flow-toolbar-actions .btn,
  .canvas-toolbar .btn{
    min-height:28px!important;
    height:28px!important;
    padding:4px 6px!important;
    font-size:10.5px!important;
    border-radius:8px!important;
  }
}

/* 2026-05-24: keep mobile hamburger inline at the left of the logo */
@media(max-width:760px){
  .flow-topbar{
    padding-left:6px!important;
  }
  .flow-topbar > .mobile-menu-btn{
    display:inline-flex!important;
    position:static!important;
    left:auto!important;
    top:auto!important;
    z-index:auto!important;
    order:0!important;
    flex:0 0 28px!important;
    margin:0!important;
  }
  .flow-topbar > .brand{
    order:1!important;
  }
  .flow-topbar > .top-actions{
    order:2!important;
  }
}

/* 2026-05-24: UI confirm dialog for destructive/template actions */
.ui-confirm-modal{width:min(460px,calc(100vw - 32px));}
.ui-confirm-message{font-size:14px;line-height:1.7;color:var(--ink);background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:14px;margin:8px 0 14px;white-space:pre-wrap;}
.ui-confirm-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;}
.ui-confirm-actions .btn{min-height:38px;padding:8px 14px;font-size:13px;}
.ui-confirm-actions .btn.danger{border-color:#fecdd3;background:#fff1f2;color:#be123c;}
.ui-confirm-actions .btn.danger:hover{background:#ffe4e6;}
@media(max-width:760px){.ui-confirm-modal{width:100%;}.ui-confirm-actions{gap:8px}.ui-confirm-actions .btn{flex:1;}}

/* Add-node modal layout: template first, nodes grouped by category accordion. */
.add-node-modal .template-section{padding-bottom:4px;border-bottom:1px solid rgba(148,163,184,.22);}
.node-accordion{display:grid;gap:10px;}
.node-category{border:1px solid rgba(148,163,184,.28);border-radius:16px;background:#fff;box-shadow:0 8px 20px rgba(15,23,42,.04);overflow:hidden;}
.node-category summary{list-style:none;cursor:pointer;padding:12px 14px;font-size:13px;font-weight:800;color:#334155;background:linear-gradient(135deg,#f8fbff,#fff);display:flex;align-items:center;justify-content:space-between;}
.node-category summary::-webkit-details-marker{display:none;}
.node-category summary::after{content:"＋";width:22px;height:22px;border-radius:999px;background:#eef3ff;color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:900;line-height:1;}
.node-category[open] summary::after{content:"−";}
.node-category .node-picker-grid{padding:10px;border-top:1px solid rgba(148,163,184,.18);}

.portfolio-paste-editor{min-height:220px;white-space:pre;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.55}
.field-help{margin-top:6px;color:#64748b;font-size:12px;line-height:1.5}


/* People accordion: keep investor philosophies visibly diversified. */
.people-category-note{padding:10px 12px 0;color:#64748b;font-size:12px;line-height:1.55;border-top:1px solid rgba(148,163,184,.18);}
.people-agent-groups{display:grid;gap:8px;padding:10px;border-top:0;}
.people-agent-group{border:1px solid rgba(148,163,184,.22);border-radius:14px;background:#fbfdff;overflow:hidden;}
.people-agent-group summary{list-style:none;cursor:pointer;padding:10px 12px;font-size:12px;font-weight:900;color:#334155;background:#f8fafc;display:flex;align-items:center;justify-content:space-between;}
.people-agent-group summary::-webkit-details-marker{display:none;}
.people-agent-group summary::after{content:"＋";width:20px;height:20px;border-radius:999px;background:#eef3ff;color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:900;line-height:1;}
.people-agent-group[open] summary::after{content:"−";}
.people-agent-group .node-picker-grid{padding:10px;border-top:1px solid rgba(148,163,184,.16);}


/* 2026-05-24: investor agent profile accordion in node popup. */
.investor-profile-accordion{border:1px solid rgba(148,163,184,.28);border-radius:16px;background:#fbfdff;margin:0 0 14px;overflow:hidden;}
.investor-profile-accordion>summary{list-style:none;cursor:pointer;padding:12px 14px;font-weight:900;color:#0f172a;display:flex;align-items:center;justify-content:space-between;background:#f8fafc;}
.investor-profile-accordion>summary::-webkit-details-marker{display:none;}
.investor-profile-accordion>summary::after{content:"＋";width:22px;height:22px;border-radius:999px;background:#eef3ff;color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:900;}
.investor-profile-accordion[open]>summary::after{content:"−";}
.investor-profile-card{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:14px;border-top:1px solid rgba(148,163,184,.18);}
.investor-profile-image{width:96px;height:96px;object-fit:cover;border-radius:18px;border:1px solid rgba(148,163,184,.28);background:#fff;}
.investor-profile-name{font-weight:900;font-size:14px;color:#0f172a;line-height:1.45;}
.investor-profile-style{margin-top:4px;color:#475569;font-size:12px;line-height:1.6;}
.investor-profile-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;}
.investor-profile-quick div{border:1px solid rgba(148,163,184,.22);background:#fff;border-radius:12px;padding:8px 10px;min-width:0;}
.investor-profile-quick small{display:block;color:#64748b;font-size:10px;font-weight:800;margin-bottom:3px;}
.investor-profile-quick b{display:block;color:#0f172a;font-size:12px;word-break:break-word;}
.investor-profile-sections{display:grid;gap:8px;padding:0 14px 14px;}
.investor-profile-subaccordion{border:1px solid rgba(148,163,184,.22);border-radius:12px;background:#fff;overflow:hidden;}
.investor-profile-subaccordion>summary{list-style:none;cursor:pointer;padding:10px 12px;font-size:12px;font-weight:900;color:#334155;background:#f8fafc;display:flex;align-items:center;justify-content:space-between;}
.investor-profile-subaccordion>summary::-webkit-details-marker{display:none;}
.investor-profile-subaccordion>summary::after{content:"＋";font-weight:900;color:var(--accent);}
.investor-profile-subaccordion[open]>summary::after{content:"−";}
.investor-profile-text{white-space:pre-wrap;font-size:12px;line-height:1.7;color:#334155;padding:12px;max-height:320px;overflow:auto;}
@media(max-width:760px){.investor-profile-card{grid-template-columns:72px 1fr;gap:10px;padding:12px}.investor-profile-image{width:72px;height:72px;border-radius:14px}.investor-profile-quick{grid-template-columns:1fr}.investor-profile-name{font-size:13px}}

/* 2026-05-25: mobile canvas toolbar icon buttons */
@media(max-width:760px){
  .canvas-toolbar .flow-toolbar-actions{
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px!important;
  }
  .canvas-toolbar .flow-toolbar-actions .btn{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    max-width:34px!important;
    padding:0!important;
    border-radius:10px!important;
    justify-content:center!important;
    align-items:center!important;
    font-size:0!important;
    line-height:0!important;
    letter-spacing:-999px!important;
    color:transparent!important;
    text-indent:-9999px!important;
    overflow:hidden!important;
    gap:0!important;
    background-color:#fff!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:20px 20px!important;
    box-shadow:0 6px 16px rgba(15,23,42,.10)!important;
  }
  .canvas-toolbar .flow-toolbar-actions .btn.primary{
    background-color:var(--accent)!important;
    border-color:var(--accent)!important;
    box-shadow:0 8px 20px rgba(36,76,154,.22)!important;
  }
  .canvas-toolbar .flow-toolbar-actions .btn:hover{
    transform:translateY(-1px);
  }
  #runFlowBtn{background-image:url('./icons/execute.svg')!important;}
  #centerFlowBtn{background-image:url('./icons/expand.svg')!important;}
  #undoFlowBtn{background-image:url('./icons/undo.svg')!important;}
  #zoomOutBtn{background-image:url('./icons/zoom-out.svg')!important;}
  #zoomInBtn{background-image:url('./icons/zoom-in.svg')!important;}
  #newSaveFlowBtn{
    background-image:url('./icons/new-save.svg')!important;
    background-size:22px 22px!important;
  }
  #saveFlowBtn{background-image:url('./icons/overwrite.svg')!important;}
  #zoomResetBtn{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    font-size:10px!important;
    line-height:1!important;
    letter-spacing:-.04em!important;
    text-indent:0!important;
    color:var(--accent)!important;
    font-weight:900!important;
    background-image:none!important;
  }
}

/* 2026-05-25: compact investor illustrations inside investor agent nodes */
.node-title-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
}
.node-title-group{
  min-width:0;
  flex:1 1 auto;
}
.node-title,.node-sub{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.node-investor-thumb{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:9px;
  object-fit:cover;
  background:#fff;
  border:1px solid rgba(148,163,184,.35);
  box-shadow:0 3px 8px rgba(15,23,42,.10);
  display:block;
}
@media(max-width:760px){
  .node-investor-thumb{
    width:28px;
    height:28px;
    flex-basis:28px;
    border-radius:8px;
  }
  .node-title-wrap{gap:7px;}
}

/* Stock input modal: reuse index.html-like stock-name search without affecting global inputs */
.agent-stock-code-field{position:relative;}
.agent-stock-input-wrap{position:relative;}
.agent-stock-input-wrap input{padding-right:42px;}
.agent-stock-input-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:#94a3b8;pointer-events:none;line-height:1;}
.agent-stock-input-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.agent-stock-search-box{position:absolute;top:calc(100% - 18px);left:0;right:0;max-height:280px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:6px;background:#fff;border:1px solid #dbe2ea;border-radius:12px;box-shadow:0 18px 36px rgba(15,23,42,.12);z-index:40;}
.agent-stock-search-item{display:flex;flex-direction:column;gap:2px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:transparent;text-align:left;color:#0f172a;cursor:pointer;touch-action:pan-y;}
.agent-stock-search-item.active,.agent-stock-search-item:hover{background:#eff6ff;}
.agent-stock-search-code{font-size:12px;font-weight:800;color:#2563eb;}
.agent-stock-search-name{font-size:14px;font-weight:700;}
.agent-stock-search-market{font-size:12px;color:#64748b;}
.agent-stock-search-empty{padding:10px 12px;font-size:13px;color:#64748b;}

/* 2026-05-25: enlarge stock-code input popup so stock-name search results are not cut off */
.node-modal:has(.agent-stock-code-field){
  width:min(820px,calc(100vw - 28px));
  min-height:min(620px,calc(100vh - 48px));
}
.node-modal:has(.agent-stock-code-field) .modal-body,
.node-modal:has(.agent-stock-code-field) #nodeModalBody{
  overflow:visible;
}
.node-modal:has(.agent-stock-code-field) .agent-stock-code-field{
  margin-bottom:360px;
}
.agent-stock-search-box{
  max-height:420px;
}
@media(max-width:760px){
  .node-modal:has(.agent-stock-code-field){
    min-height:72dvh;
    max-height:92dvh;
  }
  .node-modal:has(.agent-stock-code-field) .agent-stock-code-field{
    margin-bottom:300px;
  }
  .agent-stock-search-box{
    max-height:340px;
  }
}


/* edge click delete safety */
.flow-edge{pointer-events:stroke!important;cursor:pointer!important;}
.flow-edge.hit{stroke:rgba(0,0,0,.001)!important;stroke-width:24!important;pointer-events:stroke!important;}
.flow-edge.draft{pointer-events:none!important;cursor:default!important;}


/* 決算短信取得ノード */
.agent-disclosure-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.agent-disclosure-list{display:grid;gap:6px;max-height:260px;overflow:auto;border:1px solid #e5e7eb;border-radius:12px;padding:8px;background:#f8fafc;}
.agent-disc-row{display:grid;grid-template-columns:auto 112px minmax(180px,1fr);gap:10px;align-items:center;padding:8px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;font-size:12px;color:#334155;cursor:pointer;}
.agent-disc-row input{width:auto!important;margin:0;}
.agent-disc-title{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#0f172a;margin-left:2px;}
.agent-disc-date{white-space:nowrap;color:#64748b;}
.agent-disclosure-preview{max-height:320px;overflow:auto;white-space:pre-wrap;font-size:12px;line-height:1.65;}
.agent-pdf-toc-panel{margin:0;}
.pdf-toc-panel{margin:10px 0 12px;padding:10px 12px;border:1px solid #bfdbfe;background:#eff6ff;border-radius:10px;color:#1e3a8a;box-sizing:border-box;max-width:100%;}
.pdf-toc-head{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;margin-bottom:6px;}
.pdf-toc-head span{color:#475569;font-weight:600;white-space:nowrap;}
.pdf-toc-actions{display:flex;justify-content:flex-end;margin:6px 0 8px;}
.pdf-toc-clear-btn{width:auto!important;min-width:0!important;white-space:nowrap;}
.pdf-toc-checks{display:grid;gap:6px;margin-top:8px;max-height:260px;overflow:auto;padding-right:4px;}
.pdf-toc-check{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:7px 8px;border:1px solid #dbeafe;background:#fff;border-radius:8px;font-size:12px;color:#1e293b;font-weight:500!important;margin:0!important;}
.pdf-toc-check.summary{grid-template-columns:auto 1fr;margin:8px 0!important;background:#f8fafc;font-weight:700!important;}
.pdf-toc-check input[type="checkbox"]{width:auto!important;min-width:0!important;margin:0!important;}
.pdf-toc-title{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pdf-toc-range{font-size:11px;color:#475569;white-space:nowrap;}
.pdf-toc-raw{margin-top:8px;font-size:12px;}
.pdf-toc-list{margin:0;padding-left:0;font-size:12px;line-height:1.7;color:#1e293b;max-height:220px;overflow:auto;}
.pdf-toc-item{padding:1px 0;}
@media (max-width:640px){.agent-disc-row{grid-template-columns:auto 1fr}.agent-disc-date{grid-column:2}.agent-disc-title{grid-column:2;white-space:normal;margin-left:0}.pdf-toc-head{display:block}.pdf-toc-head span{display:block;margin-top:4px;white-space:normal}.pdf-toc-check{grid-template-columns:auto 1fr}.pdf-toc-range{grid-column:2;white-space:normal}.pdf-toc-title{white-space:normal}}


/* 2026-05-25: place flow-name save button inside the right edge of the edit input */
.flow-toolbar-title.is-editing{
  position:relative!important;
  width:260px!important;
  max-width:min(260px,40vw)!important;
  min-height:28px!important;
}
.flow-toolbar-title.is-editing .flow-name-edit-input{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  padding-right:52px!important;
  box-sizing:border-box!important;
}
.flow-toolbar-title.is-editing .flow-name-save-btn{
  position:absolute!important;
  right:3px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:22px!important;
  min-height:22px!important;
  min-width:44px!important;
  padding:0 8px!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(36,76,154,.10)!important;
  color:var(--accent)!important;
  font-size:10.5px!important;
  font-weight:900!important;
  line-height:1!important;
  box-shadow:none!important;
}
.flow-toolbar-title.is-editing .flow-name-save-btn::before{
  content:"✓";
  margin-right:3px;
  font-size:10px;
  line-height:1;
}
.flow-toolbar-title.is-editing .flow-name-save-btn:hover,
.flow-toolbar-title.is-editing .flow-name-save-btn:focus-visible{
  background:rgba(36,76,154,.16)!important;
  filter:none!important;
  box-shadow:0 0 0 2px rgba(36,76,154,.12)!important;
}
@media(max-width:760px){
  .flow-toolbar-title.is-editing{
    width:180px!important;
    max-width:180px!important;
  }
  .flow-toolbar-title.is-editing .flow-name-edit-input{
    width:100%!important;
    max-width:100%!important;
    padding-right:48px!important;
  }
  .flow-toolbar-title.is-editing .flow-name-save-btn{
    right:3px!important;
    height:21px!important;
    min-height:21px!important;
    min-width:40px!important;
    padding:0 7px!important;
    font-size:10px!important;
  }
}

/* 2026-05-25: normalize flow-name hover/focus shadow box so it matches the pill/input shape */
.flow-toolbar-title{
  position:relative!important;
  align-items:center!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
.flow-name-display,
.flow-name-edit-input,
.flow-name-save-btn{
  box-sizing:border-box!important;
}
.flow-toolbar-title:not(.is-editing) .flow-name-display{
  height:28px!important;
  min-height:28px!important;
  max-height:28px!important;
  padding:4px 8px!important;
  border-radius:999px!important;
  overflow:hidden!important;
  box-shadow:0 3px 10px rgba(15,23,42,.08)!important;
  outline:none!important;
}
.flow-toolbar-title:not(.is-editing) .flow-name-display:hover,
.flow-toolbar-title:not(.is-editing) .flow-name-display:focus,
.flow-toolbar-title:not(.is-editing) .flow-name-display:focus-visible{
  outline:none!important;
  border-color:rgba(36,76,154,.34)!important;
  box-shadow:0 0 0 2px rgba(36,76,154,.12),0 3px 10px rgba(15,23,42,.08)!important;
}
.flow-toolbar-title.is-editing{
  height:28px!important;
  min-height:28px!important;
  max-height:28px!important;
  overflow:visible!important;
}
.flow-toolbar-title.is-editing .flow-name-edit-input{
  height:28px!important;
  min-height:28px!important;
  max-height:28px!important;
  border-radius:999px!important;
  box-shadow:0 3px 10px rgba(15,23,42,.08)!important;
  outline:none!important;
}
.flow-toolbar-title.is-editing .flow-name-edit-input:focus,
.flow-toolbar-title.is-editing .flow-name-edit-input:focus-visible{
  outline:none!important;
  border-color:rgba(36,76,154,.36)!important;
  box-shadow:0 0 0 2px rgba(36,76,154,.12),0 3px 10px rgba(15,23,42,.08)!important;
}
.flow-toolbar-title.is-editing .flow-name-save-btn{
  height:22px!important;
  min-height:22px!important;
  max-height:22px!important;
  box-shadow:none!important;
  outline:none!important;
}
.flow-toolbar-title.is-editing .flow-name-save-btn:hover,
.flow-toolbar-title.is-editing .flow-name-save-btn:focus,
.flow-toolbar-title.is-editing .flow-name-save-btn:focus-visible{
  outline:none!important;
  box-shadow:0 0 0 2px rgba(36,76,154,.12)!important;
}

.full-log{user-select:text;-webkit-user-select:text;}


/* Usage limit reached: apply red theme to the whole usage card in agents.html */
.flow-topbar #usageStatus.usage-status.limit-reached,
.flow-topbar .usage-status.usage-card.limit-reached{
  border-color:#fecaca!important;
  background:#fff7f7!important;
  color:#b91c1c!important;
}
.flow-topbar #usageStatus.limit-reached .auth-status,
.flow-topbar #usageStatus.limit-reached .usage-card-compact strong,
.flow-topbar .usage-status.limit-reached .auth-status,
.flow-topbar .usage-status.limit-reached .usage-card-compact strong{
  color:#b91c1c!important;
}
.flow-topbar #usageStatus.limit-reached .usage-progress,
.flow-topbar .usage-status.limit-reached .usage-progress{
  background:#fee2e2!important;
}
.flow-topbar #usageStatus.limit-reached .usage-progress-bar,
.flow-topbar .usage-status.limit-reached .usage-progress-bar{
  background:linear-gradient(90deg,#fb7185,#ef4444)!important;
}

/* Charge credits remain: use green theme even when the monthly base quota is 0 */
.flow-topbar #usageStatus.usage-status.credit-available,
.flow-topbar .usage-status.usage-card.credit-available,
.flow-topbar #usageStatus.usage-status.credit-available.limit-reached,
.flow-topbar .usage-status.usage-card.credit-available.limit-reached{
  border-color:#bbf7d0!important;
  background:#f0fdf4!important;
  color:#166534!important;
}
.flow-topbar #usageStatus.credit-available .usage-card-compact strong,
.flow-topbar .usage-status.credit-available .usage-card-compact strong,
.flow-topbar #usageStatus.credit-available.limit-reached .usage-card-compact strong,
.flow-topbar .usage-status.credit-available.limit-reached .usage-card-compact strong{
  color:#166534!important;
}
.flow-topbar #usageStatus.credit-available .usage-card-suffix,
.flow-topbar .usage-status.credit-available .usage-card-suffix{
  color:#15803d!important;
}
.flow-topbar #usageStatus.credit-available .usage-progress,
.flow-topbar .usage-status.credit-available .usage-progress,
.flow-topbar #usageStatus.credit-available.limit-reached .usage-progress,
.flow-topbar .usage-status.credit-available.limit-reached .usage-progress{
  background:#dcfce7!important;
}
.flow-topbar #usageStatus.credit-available .usage-progress-bar,
.flow-topbar .usage-status.credit-available .usage-progress-bar,
.flow-topbar #usageStatus.credit-available.limit-reached .usage-progress-bar,
.flow-topbar .usage-status.credit-available.limit-reached .usage-progress-bar{
  background:linear-gradient(90deg,#4ade80,#16a34a)!important;
}



/* 2026-05-26: keep desktop usage-status text consistent */
@media(min-width:761px){
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix{
    font-family:inherit!important;
    font-size:11px!important;
    font-weight:700!important;
    line-height:1.1!important;
    letter-spacing:0!important;
  }
  .flow-topbar .usage-card-compact strong{
    font-size:11px!important;
    font-weight:700!important;
    line-height:1.1!important;
  }
}

/* 2026-05-26: mobile header refinements */
@media(max-width:760px){
  .flow-topbar > .mobile-menu-btn,
  .mobile-menu-btn{
    border-radius:7px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    line-height:1!important;
    padding:0!important;
  }
  .flow-topbar #usageStatusBody,
  .flow-topbar .usage-card-compact{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    gap:0!important;
    width:100%!important;
  }
  .flow-topbar .usage-status.usage-card{
    min-height:42px!important;
    height:auto!important;
    padding:3px 5px!important;
  }
  .flow-topbar .auth-status{
    display:block!important;
    font-size:9.2px!important;
    line-height:1.08!important;
    margin:0!important;
  }
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix{
    display:block!important;
    font-size:9.2px!important;
    line-height:1.08!important;
    letter-spacing:-.04em!important;
    white-space:nowrap!important;
  }
  .flow-topbar .usage-card-quota{
    font-weight:800!important;
    color:#334155!important;
  }
  .flow-topbar .usage-progress{
    margin-top:2px!important;
    height:2px!important;
  }
  .flow-topbar .top-actions #loginBtn{
    display:inline-flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    max-width:78px!important;
    min-width:64px!important;
    padding:3px 5px!important;
    font-size:9px!important;
    line-height:1.05!important;
    white-space:normal!important;
    text-align:center!important;
    letter-spacing:-.06em!important;
  }
  .flow-topbar .top-actions #loginBtn span{
    display:block!important;
  }
  .flow-topbar .top-actions #normalAnalysisBtn{
    max-width:48px!important;
  }
}
@media(max-width:390px){
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix{
    font-size:8.4px!important;
  }
  .flow-topbar .top-actions #loginBtn{
    max-width:70px!important;
    font-size:8.4px!important;
    padding-inline:3px!important;
  }
}

/* Ensure login button stays hidden on mobile when authenticated */
.flow-topbar .top-actions #loginBtn.hidden,
.flow-topbar .top-actions #loginBtn[hidden],
.flow-topbar #loginBtn.hidden,
.flow-topbar #loginBtn[hidden]{
  display:none!important;
}
@media(max-width:760px){
  .flow-topbar .top-actions #loginBtn.hidden,
  .flow-topbar .top-actions #loginBtn[hidden],
  .flow-topbar #loginBtn.hidden,
  .flow-topbar #loginBtn[hidden]{
    display:none!important;
  }
}


/* 2026-05-26: mobile execute icon should be white */
@media (max-width:760px){
  .canvas-toolbar .flow-toolbar-actions #runFlowBtn{
    position:relative!important;
    background-image:none!important;
  }
  .canvas-toolbar .flow-toolbar-actions #runFlowBtn::before{
    content:"";
    width:20px;
    height:20px;
    display:block;
    background:#fff;
    -webkit-mask:url('./icons/execute.svg') center / contain no-repeat;
    mask:url('./icons/execute.svg') center / contain no-repeat;
  }
}

/* 2026-05-27: split paid plan quota and charge credits into two lines */
.flow-topbar .usage-card-main-line{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  white-space:nowrap;
  max-width:100%;
}
.flow-topbar .usage-card-suffix{
  display:block;
  margin-top:1px;
}
.flow-topbar .usage-card-compact:has(.usage-card-suffix){
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
}
@media(max-width:760px){
  .flow-topbar .usage-card-main-line{
    display:inline-flex!important;
    align-items:baseline!important;
    gap:3px!important;
    max-width:100%!important;
  }
  .flow-topbar .usage-card-compact:has(.usage-card-suffix){
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:0!important;
  }
  .flow-topbar .usage-card-main-line .usage-card-plan,
  .flow-topbar .usage-card-main-line .usage-card-quota,
  .flow-topbar .usage-card-suffix{
    font-size:8.7px!important;
    line-height:1.05!important;
    letter-spacing:-.05em!important;
  }
}

/* 2026-05-27: prevent mobile usageStatus text from overflowing its card */
@media(max-width:760px){
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card,
  .flow-topbar #usageStatusBody,
  .flow-topbar .usage-card-compact,
  .flow-topbar .usage-card-main-line{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    overflow:hidden!important;
  }
  .flow-topbar #usageStatusBody,
  .flow-topbar .usage-card-compact{
    overflow:hidden!important;
  }
  .flow-topbar .usage-card-main-line{
    width:100%!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix,
  .flow-topbar .auth-status{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
  }
  .flow-topbar .usage-card-main-line .usage-card-plan,
  .flow-topbar .usage-card-main-line .usage-card-quota,
  .flow-topbar .usage-card-suffix{
    font-size:7.8px!important;
    letter-spacing:-.075em!important;
    line-height:1.05!important;
  }
  .flow-topbar .usage-card-suffix{
    width:100%!important;
  }
}
@media(max-width:390px){
  .flow-topbar .usage-card-main-line .usage-card-plan,
  .flow-topbar .usage-card-main-line .usage-card-quota,
  .flow-topbar .usage-card-suffix{
    font-size:7.2px!important;
    letter-spacing:-.085em!important;
  }
}

/* 2026-05-27: clickable logo/home link */
.top-brand-link,
.brand-link{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.top-brand-link:hover,
.brand-link:hover{
  text-decoration:none;
}

/* 2026-05-27: keep usage/auth card readable on narrow responsive widths */
@media(max-width:760px){
  .flow-topbar{
    flex-wrap:wrap!important;
    align-items:center!important;
    overflow:visible!important;
  }
  .flow-topbar .brand{
    flex:1 1 auto!important;
    min-width:130px!important;
  }
  .flow-topbar .top-actions{
    width:100%!important;
    flex:0 0 100%!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
    min-width:0!important;
    overflow:visible!important;
  }
  .flow-topbar .auth-user{
    order:1!important;
    flex:1 1 100%!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:40px!important;
    padding:4px 8px!important;
    overflow:hidden!important;
  }
  .flow-topbar #usageStatusBody,
  .flow-topbar .usage-card-compact,
  .flow-topbar .usage-card-main-line{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .flow-topbar .usage-card-main-line{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:3px!important;
  }
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix,
  .flow-topbar .auth-status{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .flow-topbar .usage-card-main-line .usage-card-plan,
  .flow-topbar .usage-card-main-line .usage-card-quota,
  .flow-topbar .usage-card-suffix,
  .flow-topbar .auth-status{
    font-size:9.5px!important;
    line-height:1.12!important;
    letter-spacing:-.04em!important;
  }
  .flow-topbar .top-actions #normalAnalysisBtn,
  .flow-topbar .top-actions #logoutBtn,
  .flow-topbar .top-actions #loginBtn{
    order:2!important;
    flex:0 0 auto!important;
  }
}
@media(max-width:390px){
  .flow-topbar .usage-card-main-line .usage-card-plan,
  .flow-topbar .usage-card-main-line .usage-card-quota,
  .flow-topbar .usage-card-suffix,
  .flow-topbar .auth-status{
    font-size:9px!important;
    letter-spacing:-.055em!important;
  }
}

/* 2026-05-27: keep mobile usageStatus inline, not full-width */
@media(max-width:760px){
  .flow-topbar{
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:4px!important;
    overflow:hidden!important;
  }
  .flow-topbar .brand{
    flex:0 1 auto!important;
    min-width:0!important;
    max-width:none!important;
  }
  .flow-topbar .brand h1{
    font-size:11px!important;
    max-width:64px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .flow-topbar .top-actions{
    width:auto!important;
    flex:1 1 auto!important;
    min-width:0!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:3px!important;
    overflow:hidden!important;
  }
  .flow-topbar .auth-user{
    order:10!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:hidden!important;
  }
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:28px!important;
    height:30px!important;
    padding:2px 4px!important;
    border-radius:8px!important;
    overflow:hidden!important;
  }
  .flow-topbar #usageStatusBody,
  .flow-topbar .usage-card-compact{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    gap:0!important;
  }
  .flow-topbar .usage-card-main-line{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:2px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-main-line .usage-card-plan,
  .flow-topbar .usage-card-main-line .usage-card-quota,
  .flow-topbar .usage-card-suffix{
    font-size:7.8px!important;
    line-height:1.05!important;
    letter-spacing:-.08em!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .flow-topbar .usage-card-suffix{
    display:block!important;
    width:100%!important;
  }
  .flow-topbar .usage-progress{
    height:2px!important;
    margin-top:1px!important;
  }
  .flow-topbar .top-actions #normalAnalysisBtn,
  .flow-topbar .top-actions #logoutBtn,
  .flow-topbar .top-actions #loginBtn{
    order:20!important;
    flex:0 0 auto!important;
  }
  .flow-topbar .top-actions #normalAnalysisBtn{
    max-width:48px!important;
    padding-inline:5px!important;
    font-size:9px!important;
  }
}
@media(max-width:390px){
  .flow-topbar .brand h1{max-width:52px!important;font-size:10px!important;}
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-main-line .usage-card-plan,
  .flow-topbar .usage-card-main-line .usage-card-quota,
  .flow-topbar .usage-card-suffix{
    font-size:7px!important;
    letter-spacing:-.095em!important;
  }
  .flow-topbar .top-actions #normalAnalysisBtn{max-width:42px!important;font-size:8.4px!important;}
}

/* 2026-05-27: mobile header must not abbreviate the AI Analyst Plus title; keep auth-user from shrinking indefinitely */
@media(max-width:760px){
  .flow-topbar{
    flex-wrap:nowrap!important;
    align-items:center!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    gap:4px!important;
  }
  .flow-topbar .brand,
  .flow-topbar .brand-link{
    flex:0 0 auto!important;
    min-width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
  }
  .flow-topbar .brand h1{
    max-width:none!important;
    min-width:max-content!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    font-size:10.5px!important;
    letter-spacing:-.04em!important;
  }
  .flow-topbar .top-actions{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
  }
  .flow-topbar .auth-user{
    flex:0 0 112px!important;
    width:112px!important;
    min-width:112px!important;
    max-width:112px!important;
    overflow:hidden!important;
  }
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    width:112px!important;
    min-width:112px!important;
    max-width:112px!important;
  }
  .flow-topbar .top-actions #normalAnalysisBtn,
  .flow-topbar .top-actions #logoutBtn,
  .flow-topbar .top-actions #loginBtn{
    flex:0 0 auto!important;
  }
}
@media(max-width:390px){
  .flow-topbar .brand h1{
    max-width:none!important;
    min-width:max-content!important;
    font-size:9.6px!important;
    letter-spacing:-.055em!important;
  }
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    flex-basis:104px!important;
    width:104px!important;
    min-width:104px!important;
    max-width:104px!important;
  }
}

/* 2026-05-27: mobile header no horizontal scroll; do not shrink top-actions or abbreviate title */
@media(max-width:760px){
  .flow-topbar{
    flex-wrap:wrap!important;
    overflow-x:visible!important;
    overflow-y:visible!important;
    align-items:center!important;
    gap:4px 6px!important;
  }
  .flow-topbar .brand,
  .flow-topbar .brand-link{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:none!important;
    min-width:max-content!important;
    overflow:visible!important;
  }
  .flow-topbar .brand h1{
    max-width:none!important;
    min-width:max-content!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
  }
  .flow-topbar .top-actions{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:auto!important;
    max-width:100%!important;
    overflow:visible!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
    margin-left:auto!important;
  }
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    flex:0 0 112px!important;
    width:112px!important;
    min-width:112px!important;
    max-width:112px!important;
  }
  .flow-topbar .top-actions #normalAnalysisBtn,
  .flow-topbar .top-actions #logoutBtn,
  .flow-topbar .top-actions #loginBtn,
  .flow-topbar .top-actions > button{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
    max-width:none!important;
  }
}
@media(max-width:390px){
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    flex:0 0 104px!important;
    width:104px!important;
    min-width:104px!important;
    max-width:104px!important;
  }
}

/* 2026-05-27 final: mobile flow header single-line, no wrap/no scroll, compact brand area */
@media(max-width:760px){
  .flow-topbar{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:3px!important;
    padding:5px 5px!important;
    overflow:visible!important;
    width:100%!important;
  }
  .flow-topbar .brand,
  .flow-topbar .brand-link{
    display:inline-flex!important;
    align-items:center!important;
    gap:2px!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
  }
  .flow-topbar .brand img{
    width:17px!important;
    height:17px!important;
    border-radius:4px!important;
    flex:0 0 auto!important;
  }
  .flow-topbar .brand h1{
    display:inline-block!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    font-size:9.2px!important;
    line-height:1!important;
    letter-spacing:-.075em!important;
  }
  .flow-topbar .top-actions{
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:2px!important;
    margin-left:2px!important;
    overflow:visible!important;
  }
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    flex:0 0 82px!important;
    width:82px!important;
    min-width:82px!important;
    max-width:82px!important;
    height:29px!important;
    min-height:29px!important;
    overflow:hidden!important;
  }
  .flow-topbar .usage-status.usage-card{
    padding:2px 3px!important;
    border-radius:8px!important;
  }
  .flow-topbar #usageStatusBody,
  .flow-topbar .usage-card-compact,
  .flow-topbar .usage-card-main-line{
    min-width:0!important;
    max-width:100%!important;
    width:100%!important;
    overflow:hidden!important;
  }
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix{
    font-size:6.7px!important;
    line-height:1.04!important;
    letter-spacing:-.09em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }
  .flow-topbar .usage-progress{height:2px!important;margin-top:1px!important;}
  .flow-topbar .top-actions #normalAnalysisBtn,
  .flow-topbar .top-actions #logoutBtn,
  .flow-topbar .top-actions #loginBtn,
  .flow-topbar .settings-menu,
  .flow-topbar .settings-trigger{
    flex:0 0 auto!important;
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
  }
  .flow-topbar .top-actions #normalAnalysisBtn,
  .flow-topbar .top-actions #logoutBtn,
  .flow-topbar .top-actions #loginBtn{
    height:28px!important;
    min-height:28px!important;
    padding:3px 4px!important;
    border-radius:999px!important;
    font-size:8.2px!important;
    line-height:1!important;
    letter-spacing:-.08em!important;
    white-space:nowrap!important;
  }
  .flow-topbar .settings-trigger{
    width:26px!important;
    min-width:26px!important;
    height:28px!important;
    min-height:28px!important;
    padding:0!important;
    border-radius:999px!important;
    font-size:14px!important;
  }
}
@media(max-width:390px){
  .flow-topbar .brand h1{font-size:8.7px!important;letter-spacing:-.09em!important;}
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{flex-basis:76px!important;width:76px!important;min-width:76px!important;max-width:76px!important;}
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix{font-size:6.2px!important;letter-spacing:-.105em!important;}
  .flow-topbar .top-actions #normalAnalysisBtn,
  .flow-topbar .top-actions #logoutBtn,
  .flow-topbar .top-actions #loginBtn{font-size:7.6px!important;padding-inline:3px!important;}
  .flow-topbar .settings-trigger{width:24px!important;min-width:24px!important;}
}


/* 2026-05-27: agents header aligned with index topbar; larger realistic logo/text, single-line mobile */
.flow-topbar .brand,
.flow-topbar .brand-link{
  color:var(--ink);
  text-decoration:none;
}
.flow-topbar .brand img{
  width:42px;
  height:42px;
  border-radius:10px;
}
.flow-topbar .brand h1{
  font-size:22px;
  font-weight:900;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.flow-topbar .brand small{
  font-size:12px;
  line-height:1.1;
  white-space:nowrap;
}
.flow-topbar .top-actions{
  flex-wrap:nowrap;
  min-width:0;
}
.flow-topbar .top-actions .btn{
  white-space:nowrap;
}
.flow-topbar .top-actions #loginBtn span{
  display:inline;
}

@media(max-width:760px){
  .flow-topbar{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:6px!important;
    padding:7px 8px!important;
    overflow:visible!important;
    width:100%!important;
  }
  .flow-topbar > .mobile-menu-btn{
    position:static!important;
    display:inline-flex!important;
    flex:0 0 32px!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    margin:0!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    font-size:18px!important;
    line-height:1!important;
  }
  .flow-topbar .brand,
  .flow-topbar .brand-link{
    display:inline-flex!important;
    align-items:center!important;
    gap:5px!important;
    flex:0 0 auto!important;
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
    overflow:visible!important;
  }
  .flow-topbar .brand img{
    width:28px!important;
    height:28px!important;
    border-radius:7px!important;
    flex:0 0 auto!important;
  }
  .flow-topbar .brand h1{
    display:inline-block!important;
    width:auto!important;
    min-width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    font-size:15px!important;
    line-height:1!important;
    letter-spacing:-.045em!important;
  }
  .flow-topbar .brand small{
    display:none!important;
  }
  .flow-topbar .top-actions{
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
    margin-left:auto!important;
    overflow:visible!important;
  }
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    flex:0 0 108px!important;
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
    height:34px!important;
    min-height:34px!important;
    overflow:hidden!important;
  }
  .flow-topbar .usage-status.usage-card{
    padding:3px 5px!important;
    border-radius:10px!important;
  }
  .flow-topbar #usageStatusBody,
  .flow-topbar .usage-card-compact,
  .flow-topbar .usage-card-main-line{
    min-width:0!important;
    max-width:100%!important;
    width:100%!important;
    overflow:hidden!important;
  }
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix,
  .flow-topbar .usage-card-compact strong{
    font-size:8.8px!important;
    line-height:1.05!important;
    letter-spacing:-.055em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }
  .flow-topbar .usage-progress{
    height:2px!important;
    margin-top:1px!important;
  }
  .flow-topbar .top-actions #normalAnalysisBtn,
  .flow-topbar .top-actions #logoutBtn,
  .flow-topbar .top-actions #loginBtn{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:32px!important;
    min-height:32px!important;
    padding:5px 7px!important;
    border-radius:999px!important;
    font-size:10.5px!important;
    line-height:1!important;
    letter-spacing:-.055em!important;
    white-space:nowrap!important;
  }
}
@media(max-width:390px){
  .flow-topbar{
    gap:4px!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }
  .flow-topbar > .mobile-menu-btn{
    flex-basis:30px!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    font-size:17px!important;
  }
  .flow-topbar .brand img{
    width:26px!important;
    height:26px!important;
  }
  .flow-topbar .brand h1{
    font-size:13.8px!important;
    letter-spacing:-.065em!important;
  }
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    flex-basis:100px!important;
    width:100px!important;
    min-width:100px!important;
    max-width:100px!important;
    height:32px!important;
    min-height:32px!important;
  }
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix,
  .flow-topbar .usage-card-compact strong{
    font-size:8.2px!important;
    letter-spacing:-.075em!important;
  }
  .flow-topbar .top-actions #normalAnalysisBtn,
  .flow-topbar .top-actions #logoutBtn,
  .flow-topbar .top-actions #loginBtn{
    height:30px!important;
    min-height:30px!important;
    padding-inline:5px!important;
    font-size:9.7px!important;
    letter-spacing:-.075em!important;
  }
}
@media(max-width:350px){
  .flow-topbar .brand h1{
    font-size:12.4px!important;
    letter-spacing:-.08em!important;
  }
  .flow-topbar .brand img{
    width:24px!important;
    height:24px!important;
  }
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    flex-basis:92px!important;
    width:92px!important;
    min-width:92px!important;
    max-width:92px!important;
  }
  .flow-topbar .top-actions #normalAnalysisBtn,
  .flow-topbar .top-actions #logoutBtn,
  .flow-topbar .top-actions #loginBtn{
    font-size:9px!important;
    padding-inline:4px!important;
  }
}

/* 2026-05-27: usage card supports full "無料枠" and "サブスク" text without clipping */
@media(max-width:760px){
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    flex:0 1 clamp(118px,34vw,190px)!important;
    width:clamp(118px,34vw,190px)!important;
    min-width:118px!important;
    max-width:190px!important;
  }
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    height:38px!important;
    min-height:38px!important;
    padding:3px 6px!important;
    overflow:visible!important;
  }
  .flow-topbar .usage-card-main-line{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:0!important;
    overflow:visible!important;
  }
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix,
  .flow-topbar .usage-card-compact strong{
    font-size:8.7px!important;
    line-height:1.08!important;
    letter-spacing:-.055em!important;
    overflow:visible!important;
    text-overflow:clip!important;
    max-width:none!important;
  }
  .flow-topbar .usage-card-suffix{margin-top:0!important;}
}
@media(max-width:390px){
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{flex-basis:112px!important;width:112px!important;min-width:112px!important;max-width:112px!important;}
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix,
  .flow-topbar .usage-card-compact strong{font-size:7.9px!important;letter-spacing:-.075em!important;}
}
@media(max-width:350px){
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{flex-basis:104px!important;width:104px!important;min-width:104px!important;max-width:104px!important;}
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix,
  .flow-topbar .usage-card-compact strong{font-size:7.3px!important;letter-spacing:-.085em!important;}
}

/* 2026-05-27: mobile login button two-line label, matching index header */
@media(max-width:760px){
  .flow-topbar .top-actions #loginBtn{
    display:inline-flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    height:38px!important;
    min-height:38px!important;
    min-width:54px!important;
    padding:3px 6px!important;
    line-height:1.05!important;
    white-space:normal!important;
    text-align:center!important;
    position:relative!important;
    z-index:1!important;
  }
  .flow-topbar .top-actions #loginBtn span{
    display:block!important;
    flex:0 0 auto!important;
    width:auto!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }
  .flow-topbar .top-actions{
    overflow:visible!important;
  }
}
@media(max-width:390px){
  .flow-topbar .top-actions #loginBtn{
    min-width:50px!important;
    padding-inline:4px!important;
    font-size:8.2px!important;
  }
}
@media(max-width:350px){
  .flow-topbar .top-actions #loginBtn{
    min-width:46px!important;
    padding-inline:3px!important;
    font-size:7.6px!important;
  }
}


/* 2026-05-27: align agents.html header height with index.html and remove extra subtitle height */
.flow-topbar{
  min-height:68px!important;
  height:68px!important;
  box-sizing:border-box!important;
  align-items:center!important;
  padding-top:12px!important;
  padding-bottom:12px!important;
}
.flow-topbar .brand small{
  display:none!important;
}
.flow-topbar .brand img{
  width:44px!important;
  height:44px!important;
  border-radius:10px!important;
}
.flow-topbar .brand h1{
  font-size:22px!important;
  line-height:1!important;
}
.flow-topbar .top-actions #normalAnalysisBtn,
.flow-topbar .top-actions #logoutBtn,
.flow-topbar .top-actions #loginBtn{
  min-height:40px!important;
  height:40px!important;
  align-items:center!important;
}
.flow-topbar #usageStatus,
.flow-topbar .usage-status.usage-card{
  min-height:40px!important;
  height:40px!important;
}

@media(max-width:760px){
  .flow-topbar{
    min-height:52px!important;
    height:52px!important;
    padding:7px 6px!important;
    box-sizing:border-box!important;
  }
  .flow-topbar > .mobile-menu-btn{
    height:38px!important;
    min-height:38px!important;
    width:34px!important;
    min-width:34px!important;
  }
  .flow-topbar .brand img{
    width:clamp(24px,7.2vw,34px)!important;
    height:clamp(24px,7.2vw,34px)!important;
    border-radius:7px!important;
  }
  .flow-topbar .brand h1{
    font-size:clamp(13px,3.9vw,18px)!important;
    line-height:1!important;
    letter-spacing:-.055em!important;
  }
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card,
  .flow-topbar .top-actions #loginBtn{
    height:38px!important;
    min-height:38px!important;
  }
  .flow-topbar .top-actions #normalAnalysisBtn,
  .flow-topbar .top-actions #logoutBtn{
    height:32px!important;
    min-height:32px!important;
  }
}


/* 2026-05-27: keep AI分析ラボ subtitle visible and make mobile usage card three lines */
.flow-topbar .brand small{
  display:block!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:700!important;
  color:#64748b!important;
  white-space:nowrap!important;
  margin-top:2px!important;
}
.flow-topbar .brand > div{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-width:0!important;
}
@media(max-width:760px){
  .flow-topbar .brand small{
    display:block!important;
    font-size:clamp(6.2px,1.9vw,8px)!important;
    line-height:1!important;
    margin-top:1px!important;
    letter-spacing:-.05em!important;
  }
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    flex:0 1 clamp(132px,39vw,204px)!important;
    width:clamp(132px,39vw,204px)!important;
    min-width:132px!important;
    max-width:204px!important;
  }
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    height:42px!important;
    min-height:42px!important;
    padding:3px 6px!important;
    justify-content:center!important;
  }
  .flow-topbar #usageStatusBody,
  .flow-topbar .usage-card-compact{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:0!important;
  }
  .flow-topbar .usage-card-main-line{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:baseline!important;
    gap:3px!important;
    width:100%!important;
    white-space:nowrap!important;
  }
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix,
  .flow-topbar .usage-card-compact strong{
    font-size:8.6px!important;
    line-height:1.12!important;
    letter-spacing:-.055em!important;
    white-space:nowrap!important;
  }
}
@media(max-width:390px){
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{flex-basis:126px!important;width:126px!important;min-width:126px!important;max-width:126px!important;}
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix,
  .flow-topbar .usage-card-compact strong{font-size:7.7px!important;letter-spacing:-.075em!important;}
}
@media(max-width:350px){
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{flex-basis:118px!important;width:118px!important;min-width:118px!important;max-width:118px!important;}
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix,
  .flow-topbar .usage-card-compact strong{font-size:7.1px!important;letter-spacing:-.09em!important;}
}


/* 2026-05-27: final fix - agents header uses 分析ラボ and matches index usage-card behavior */
.flow-topbar .brand h1{
  font-size:22px!important;
  font-weight:900!important;
  letter-spacing:-.02em!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.flow-topbar .brand small{
  display:block!important;
  font-size:12px!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}
@media(max-width:760px){
  .flow-topbar .brand,
  .flow-topbar .brand-link{
    min-width:0!important;
    overflow:visible!important;
  }
  .flow-topbar .brand h1{
    font-size:clamp(13px,3.9vw,18px)!important;
    line-height:1!important;
    letter-spacing:-.055em!important;
    min-width:max-content!important;
  }
  .flow-topbar .brand small{
    display:block!important;
    font-size:clamp(6.2px,1.9vw,8px)!important;
    line-height:1!important;
    margin-top:1px!important;
    letter-spacing:-.05em!important;
  }
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    flex:0 1 clamp(150px,42vw,220px)!important;
    width:clamp(150px,42vw,220px)!important;
    min-width:150px!important;
    max-width:220px!important;
    overflow:visible!important;
  }
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    height:42px!important;
    min-height:42px!important;
    padding:3px 6px!important;
    justify-content:center!important;
  }
  .flow-topbar #usageStatusBody,
  .flow-topbar .usage-card-compact,
  .flow-topbar .usage-card-main-line{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .flow-topbar .usage-card-main-line{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:baseline!important;
    gap:3px!important;
    white-space:nowrap!important;
  }
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix,
  .flow-topbar .usage-card-compact strong{
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    max-width:none!important;
    font-size:clamp(8px,2.15vw,10px)!important;
    line-height:1.1!important;
    letter-spacing:-.055em!important;
  }
}
@media(max-width:390px){
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{flex-basis:142px!important;width:142px!important;min-width:142px!important;max-width:142px!important;}
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix,
  .flow-topbar .usage-card-compact strong{font-size:7.6px!important;letter-spacing:-.075em!important;}
}
@media(max-width:350px){
  .flow-topbar .auth-user,
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{flex-basis:132px!important;width:132px!important;min-width:132px!important;max-width:132px!important;}
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix,
  .flow-topbar .usage-card-compact strong{font-size:7.1px!important;letter-spacing:-.085em!important;}
}


/* 2026-05-27: remove duplicated subtitle below 分析ラボ */
.flow-topbar .brand small{
  display:none!important;
}
.flow-topbar .brand > div{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
.flow-topbar .brand h1{
  line-height:1!important;
}


/* 2026-05-27: lab subtitle, help modal, and iPad-safe add button */
.brand-copy{display:grid;gap:2px;min-width:0;}
.brand-subrow{display:flex;align-items:center;gap:8px;min-width:0;}
.brand-subrow small{display:block;color:#64748b;font-size:11px;font-weight:700;line-height:1.2;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lab-help-btn{flex:0 0 auto;border:1px solid rgba(36,76,154,.16);background:rgba(255,255,255,.88);color:#244c9a;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 6px 16px rgba(15,23,42,.06);transition:background .12s ease,border-color .12s ease,transform .12s ease,box-shadow .12s ease;}
.lab-help-btn:hover{background:#eef3ff;border-color:rgba(36,76,154,.32);transform:translateY(-1px);box-shadow:0 10px 22px rgba(36,76,154,.12);}
.lab-help-btn:focus-visible{outline:2px solid rgba(36,76,154,.32);outline-offset:2px;}
.lab-help-modal{width:min(560px,calc(100vw - 32px));padding:20px;}
.lab-help-modal .modal-head{align-items:flex-start;margin-bottom:12px;}
.lab-help-kicker{margin:0 0 4px;color:#244c9a;font-size:11px;font-weight:900;letter-spacing:.08em;}
.lab-help-modal h2{margin:0;font-size:20px;line-height:1.3;color:#0f172a;}
.lab-help-steps{list-style:none;counter-reset:labhelp;margin:16px 0 0;padding:0;display:grid;gap:10px;}
.lab-help-steps li{counter-increment:labhelp;position:relative;display:grid;gap:3px;padding:12px 12px 12px 48px;border:1px solid rgba(148,163,184,.28);border-radius:16px;background:linear-gradient(135deg,#fbfdff,#ffffff);box-shadow:0 8px 20px rgba(15,23,42,.045);}
.lab-help-steps li::before{content:counter(labhelp);position:absolute;left:12px;top:12px;width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#eef3ff;color:#244c9a;font-size:12px;font-weight:900;}
.lab-help-steps strong{font-size:13px;color:#1e293b;line-height:1.35;}
.lab-help-steps span{font-size:12px;color:#64748b;line-height:1.65;}
.lab-help-note{margin:14px 0 0;padding:10px 12px;border-radius:14px;background:#f8fafc;color:#475569;font-size:12px;font-weight:700;line-height:1.6;}
@supports (bottom: env(safe-area-inset-bottom)){
  .canvas-add-node-btn{bottom:calc(18px + env(safe-area-inset-bottom));left:calc(18px + env(safe-area-inset-left));}
}
@media (pointer:coarse), (max-width:1180px){
  .canvas-add-node-btn{position:fixed!important;left:calc(16px + env(safe-area-inset-left,0px))!important;bottom:calc(18px + env(safe-area-inset-bottom,0px))!important;z-index:19!important;width:58px;height:58px;}
}
@media(max-width:760px){
  .brand-copy{gap:1px;}
  .brand-subrow small{font-size:9.5px;max-width:86px;letter-spacing:-.03em;}
  .lab-help-btn{padding:5px 7px;font-size:10px;order:5;}
  .canvas-add-node-btn{left:calc(12px + env(safe-area-inset-left,0px))!important;bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;width:56px;height:56px;border-radius:18px;font-size:31px;}
  .lab-help-modal{width:calc(100vw - 24px);max-height:86dvh;border-radius:18px 18px 0 0;padding:16px;}
  .lab-help-modal h2{font-size:18px;}
  .lab-help-steps{gap:8px;}
  .lab-help-steps li{padding:11px 11px 11px 44px;border-radius:14px;}
}
@media(max-width:390px){
  .brand-subrow small{font-size:8.5px;max-width:72px;}
  .lab-help-btn{font-size:9px;padding:4px 6px;}
}


/* 2026-05-27: final mobile header spacing/tagline fix */
.brand-subrow .brand-tagline{
  display:block!important;
  color:#64748b;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:760px){
  .flow-topbar{
    padding-left:6px!important;
    padding-right:6px!important;
  }
  .flow-topbar > .mobile-menu-btn{
    margin-left:0!important;
    position:static!important;
  }
  .brand-subrow .brand-tagline{
    font-size:9.5px!important;
    max-width:96px!important;
    letter-spacing:-.03em!important;
  }
}
@media(max-width:390px){
  .brand-subrow .brand-tagline{
    font-size:8.5px!important;
    max-width:82px!important;
  }
}


/* 2026-05-27: final fix - mobile header starts at left edge; small investor tagline */
.brand-subrow .brand-tagline{
  display:block!important;
  color:#64748b!important;
  font-size:10px!important;
  font-weight:700!important;
  line-height:1.05!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:760px){
  .flow-topbar{
    position:relative!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    padding-left:0!important;
    padding-right:6px!important;
    gap:4px!important;
    transform:none!important;
  }
  .flow-topbar > .mobile-menu-btn,
  .mobile-menu-btn{
    position:static!important;
    left:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    margin-left:0!important;
    margin-right:0!important;
    flex:0 0 32px!important;
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
  }
  .flow-topbar > .brand{
    margin-left:0!important;
    padding-left:0!important;
  }
  .brand-subrow .brand-tagline{
    font-size:8.5px!important;
    line-height:1!important;
    max-width:84px!important;
    letter-spacing:-.04em!important;
  }
}
@media(max-width:390px){
  .flow-topbar{padding-left:0!important;gap:3px!important;}
  .brand-subrow .brand-tagline{font-size:7.5px!important;max-width:72px!important;}
}


/* 2026-05-27: place + button at the lower-left of the currently visible flow area */
.canvas-wrap{position:relative!important;}
.canvas-add-node-btn{
  position:absolute!important;
  left:16px!important;
  right:auto!important;
  bottom:16px!important;
  top:auto!important;
  z-index:11!important;
  transform:none!important;
}
.canvas-add-node-btn:hover{transform:translateY(-2px) scale(1.03)!important;}
.canvas-add-node-btn:active{transform:translateY(0) scale(.98)!important;}
@supports (bottom: env(safe-area-inset-bottom)){
  .canvas-add-node-btn{
    left:calc(16px + env(safe-area-inset-left))!important;
    bottom:calc(16px + env(safe-area-inset-bottom))!important;
  }
}
@media (pointer:coarse), (max-width:1180px){
  .canvas-add-node-btn{
    position:absolute!important;
    left:16px!important;
    right:auto!important;
    bottom:16px!important;
    top:auto!important;
    z-index:11!important;
  }
}
@media(max-width:760px){
  body,.flow-app,.flow-topbar{margin-left:0!important;padding-left:0!important;}
  .flow-topbar{gap:4px!important;justify-content:flex-start!important;}
  .flow-topbar > .mobile-menu-btn,.mobile-menu-btn{
    margin-left:0!important;
    transform:none!important;
    position:static!important;
    left:auto!important;
    flex:0 0 32px!important;
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
  }
  .canvas-add-node-btn{
    position:absolute!important;
    left:12px!important;
    right:auto!important;
    bottom:12px!important;
    top:auto!important;
    width:52px!important;
    height:52px!important;
    border-radius:17px!important;
    font-size:29px!important;
    z-index:11!important;
  }
}
@media(max-width:390px){
  .canvas-add-node-btn{width:50px!important;height:50px!important;font-size:28px!important;left:10px!important;bottom:10px!important;}
}

/* 2026-05-27: place the 使い方 button immediately to the right of 分析ラボ on both desktop and mobile */
.flow-topbar > #labHelpBtn.lab-help-btn{
  order:0!important;
  flex:0 0 auto!important;
  align-self:center!important;
  margin-left:-8px!important;
  margin-right:8px!important;
  white-space:nowrap!important;
  position:static!important;
  transform:none!important;
}
.flow-topbar > #labHelpBtn.lab-help-btn:hover{
  transform:translateY(-1px)!important;
}
.flow-topbar > .brand,
.flow-topbar > .brand-link{
  margin-right:0!important;
}
@media(max-width:760px){
  .flow-topbar > #labHelpBtn.lab-help-btn{
    order:0!important;
    align-self:center!important;
    margin-left:-2px!important;
    margin-right:2px!important;
    padding:4px 6px!important;
    font-size:9px!important;
    line-height:1!important;
    min-width:auto!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
  }
  .flow-topbar > .brand,
  .flow-topbar > .brand-link{
    flex:0 0 auto!important;
    min-width:0!important;
    max-width:max-content!important;
    margin-right:0!important;
  }
}
@media(max-width:390px){
  .flow-topbar > #labHelpBtn.lab-help-btn{
    margin-left:-1px!important;
    padding:4px 5px!important;
    font-size:8.5px!important;
  }
}


/* 2026-05-27: put the help button directly to the right of the 分析ラボ title on every viewport */
.brand-link{cursor:pointer;}
.brand-title-row{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
  line-height:1!important;
}
.brand-title-row h1{
  flex:0 0 auto!important;
  margin:0!important;
  white-space:nowrap!important;
}
.brand-title-row .lab-help-btn{
  flex:0 0 auto!important;
  margin:0!important;
  position:relative!important;
  z-index:2!important;
  padding:4px 8px!important;
  font-size:10px!important;
  line-height:1!important;
  min-width:auto!important;
  min-height:0!important;
  height:auto!important;
  white-space:nowrap!important;
}
.brand-title-row .lab-help-btn:hover{transform:translateY(-1px)!important;}
@media(max-width:760px){
  .flow-topbar{
    padding-left:0!important;
    padding-right:6px!important;
    gap:4px!important;
  }
  .flow-topbar > .brand,
  .flow-topbar > .brand-link{
    order:1!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    gap:4px!important;
  }
  .brand-copy{gap:1px!important;}
  .brand-title-row{gap:4px!important;}
  .brand-title-row h1{font-size:12px!important;line-height:1!important;}
  .brand-title-row .lab-help-btn{
    padding:3px 5px!important;
    font-size:8.5px!important;
    border-radius:999px!important;
    letter-spacing:-.03em!important;
  }
  .brand-subrow .brand-tagline{
    font-size:7.5px!important;
    max-width:86px!important;
  }
}
@media(max-width:390px){
  .flow-topbar{gap:3px!important;}
  .brand-title-row{gap:3px!important;}
  .brand-title-row h1{font-size:11px!important;}
  .brand-title-row .lab-help-btn{font-size:8px!important;padding:3px 4px!important;}
  .brand-subrow .brand-tagline{font-size:7px!important;max-width:76px!important;}
}


/* 2026-05-27: align Google registration button with the AI分析ラボ button; remove Home button if old markup remains */
.flow-topbar .top-actions #loginBtn.btn.primary{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:10px!important;
  background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%)!important;
  border:1px solid rgba(37,99,235,.86)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(22,33,62,.16),0 2px 6px rgba(37,99,235,.16)!important;
  font-weight:900!important;
  text-decoration:none!important;
  box-sizing:border-box!important;
}
.flow-topbar .top-actions #loginBtn.btn.primary:hover{
  background:linear-gradient(135deg,#172554 0%,#1d4ed8 100%)!important;
  border-color:#1d4ed8!important;
}
.flow-topbar .top-actions #normalAnalysisBtn{
  display:none!important;
}
@media(max-width:720px){
  .flow-topbar .top-actions #loginBtn.btn.primary{
    border-radius:10px!important;
  }
}

/* 2026-05-27: show data direction on flow lines */
.flow-edge-arrow{
  fill:var(--accent);
  stroke:#fff;
  stroke-width:1.6px;
  pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(15,23,42,.18));
}
.flow-edge.draft + .flow-edge-arrow{display:none;}
@media(max-width:760px){
  .flow-edge-arrow{stroke-width:1.8px;}
}


/* 2026-05-27: keep login button hidden after auth and before auth check */
.flow-topbar #loginBtn.hidden,.flow-topbar #loginBtn[hidden]{display:none!important;}


/* 2026-05-27: force-hide Google login button when auth UI marks it hidden */
.index-topbar .auth-actions #loginBtn.btn.primary.hidden,
.index-topbar .auth-actions #loginBtn.btn.primary[hidden],
.index-flow-topbar .auth-actions #loginBtn.btn.primary.hidden,
.index-flow-topbar .auth-actions #loginBtn.btn.primary[hidden],
.flow-topbar .top-actions #loginBtn.btn.primary.hidden,
.flow-topbar .top-actions #loginBtn.btn.primary[hidden],
#loginBtn.btn.primary.hidden,
#loginBtn.btn.primary[hidden]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* 2026-05-27: smooth mobile pinch zoom without node shaking */
.flow-canvas.pinching{
  touch-action:none!important;
  overscroll-behavior:contain;
}
.flow-canvas.pinching .flow-space{
  transition:none!important;
  will-change:transform;
}
.flow-canvas.pinching .flow-lines{
  will-change:transform;
}
@media(max-width:760px), (pointer:coarse){
  .flow-canvas{touch-action:none;}
}

/* 2026-05-27: subscription info card in mobile save drawer */
.subscription-menu-info{
  width:100%;
  box-sizing:border-box;
  padding:12px 12px 11px!important;
  border:1px solid rgba(36,76,154,.14)!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#f8fbff,#ffffff)!important;
  box-shadow:0 10px 24px rgba(15,23,42,.06)!important;
  color:#334155!important;
  margin:0 0 10px!important;
}
.subscription-menu-info.hidden{display:none!important;}
.subscription-menu-title{
  font-size:11px!important;
  font-weight:900!important;
  color:#64748b!important;
  letter-spacing:.04em!important;
  margin-bottom:5px!important;
}
.subscription-menu-plan{
  font-size:14px!important;
  font-weight:900!important;
  color:#1e3a8a!important;
  line-height:1.25!important;
  margin-bottom:8px!important;
}
.subscription-menu-date{
  display:flex!important;
  align-items:baseline!important;
  justify-content:space-between!important;
  gap:8px!important;
  font-size:12px!important;
  color:#475569!important;
}
.subscription-menu-date strong{
  font-size:13px!important;
  color:#0f172a!important;
  white-space:nowrap!important;
}
.subscription-menu-note{
  margin-top:7px!important;
  font-size:11px!important;
  color:#64748b!important;
  line-height:1.35!important;
}


/* 2026-05-27: スマホのサブスク情報では「プラン」を省略して省スペース化 */
@media (max-width: 640px){
  .subscription-menu-plan-suffix{
    display:none!important;
  }
}


/* 2026-05-27: hide usage plan label on mobile to keep the header compact */
@media (max-width: 640px){
  .usage-card-plan{
    display:none!important;
  }
}

/* 2026-05-27: free users can open pricing from the mobile save drawer */
.lab-subscribe-btn{
  width:100%;
  box-sizing:border-box;
  margin:8px 0 0!important;
  padding:10px 12px!important;
  border:1px solid rgba(37,99,235,.18)!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#eef4ff,#ffffff)!important;
  color:#1e3a8a!important;
  font-size:13px!important;
  font-weight:900!important;
  text-align:left!important;
  box-shadow:0 8px 20px rgba(15,23,42,.05)!important;
}
.lab-subscribe-btn:hover,
.lab-subscribe-btn:active{
  background:linear-gradient(135deg,#dbeafe,#ffffff)!important;
}
.lab-subscribe-btn.hidden{display:none!important;}


/* 2026-05-27: keep + button inside the currently visible Flow area on iPad/tablet.
   The button is placed from JS using the visible canvas rectangle, not the full scroll height. */
@media (pointer:coarse), (max-width:1100px){
  .canvas-wrap .canvas-add-node-btn{
    position:fixed!important;
    left:var(--add-node-left,16px)!important;
    top:var(--add-node-top,calc(100dvh - 74px))!important;
    right:auto!important;
    bottom:auto!important;
    z-index:19!important;
  }
}

.auth-user{cursor:default;}
.auth-user:focus-visible{outline:none;}
/* 2026-05-27: premium lab UI refresh */
:root{
  --accent-strong:#1d4ed8;
  --accent-soft:#dbeafe;
  --surface-soft:#f8fbff;
}
body{
  background:
    radial-gradient(circle at top right, rgba(96,165,250,.10), transparent 24%),
    linear-gradient(180deg,#f8fbff 0%,#f4f7fb 45%,#eff4f9 100%);
}
.flow-topbar{
  position:sticky;top:0;z-index:12;
  padding:14px 18px;
  background:rgba(248,251,255,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(217,222,234,.8);
  box-shadow:0 10px 30px rgba(15,23,42,.05);
}
.brand-link{text-decoration:none;color:inherit;}
.brand img{width:40px;height:40px;border-radius:12px;box-shadow:0 8px 24px rgba(37,99,235,.16);}
.brand h1{font-size:22px;letter-spacing:-.03em;}
.brand-subrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;}
.brand-tagline{font-size:12px;font-weight:700;color:#475569;}
.brand-tagline.secondary{color:#64748b;font-weight:600;}
.brand-divider{color:#94a3b8;font-size:12px;}
.top-actions{gap:10px;}
.flow-layout{grid-template-columns:320px 1fr;}
.palette.save-panel{
  border-right:1px solid rgba(217,222,234,.9);
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.98) 100%);
}
.cloud-flow-section{border-top:0;padding-top:0;}
.save-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.save-panel-intro{display:grid;gap:6px;}
.save-panel-kicker{margin:0;font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--accent-strong);}
.save-panel-title{margin:0;font-size:16px;font-weight:800;line-height:1.6;color:#0f172a;}
.save-panel-meta{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px;}
.save-panel-chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:11px;font-weight:800;border:1px solid #dbeafe;}
.cloud-flow-status{padding:12px 14px;border-radius:16px;background:#f8fbff;border:1px solid #e0ecff;color:#475569;}
.saved-flows-list{margin-top:12px;}
.saved-flow-item{background:#fff;border-radius:16px;padding:8px;box-shadow:0 8px 20px rgba(15,23,42,.05);}
.saved-flow-item.active{background:linear-gradient(180deg,#f8fbff,#eef4ff);box-shadow:0 12px 30px rgba(37,99,235,.10);}
.saved-flow-load{padding:8px 10px;border-radius:12px;}
.saved-flow-name{font-size:13px;}
.saved-flow-delete{width:34px;height:34px;box-shadow:0 8px 18px rgba(239,68,68,.14);}
.canvas-wrap{background:radial-gradient(circle at 1px 1px, #d7dfef 1px, transparent 0);background-size:24px 24px;}
.canvas-toolbar{
  left:18px;top:18px;right:18px;padding:14px 16px 14px 16px;
  background:rgba(255,255,255,.88);border:1px solid rgba(219,234,254,.9);border-radius:22px;
  box-shadow:0 18px 40px rgba(15,23,42,.10);
  backdrop-filter:blur(16px);
}
.flow-toolbar-title{display:flex;align-items:center;gap:10px;min-width:0;}
.flow-name-display{padding:10px 14px;border-radius:14px;border:1px solid #dbe2ea;background:#f8fbff;}
.flow-name-text{font-size:15px;font-weight:900;color:#0f172a;}
.flow-name-edit-hint{font-size:11px;color:#64748b;}
.flow-toolbar-actions{display:flex;gap:8px;flex-wrap:wrap;}
.flow-toolbar-actions .btn{min-height:42px;border-radius:12px;padding:9px 12px;box-shadow:0 6px 18px rgba(15,23,42,.04);}
.flow-toolbar-actions .btn.primary{background:linear-gradient(135deg,#1d4ed8,#2563eb);border-color:#1d4ed8;}
.run-log-toast{position:fixed!important;right:18px!important;bottom:18px!important;top:auto!important;max-width:min(360px,calc(100vw - 36px));border-radius:16px;background:rgba(15,23,42,.94);box-shadow:0 18px 40px rgba(15,23,42,.26);}
.canvas-add-node-btn{position:fixed!important;right:18px!important;bottom:78px!important;z-index:18;width:54px;height:54px;border-radius:18px;border:0;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-size:28px;box-shadow:0 18px 40px rgba(37,99,235,.28);}
.flow-node{box-shadow:0 20px 50px rgba(15,23,42,.12)!important;}
.flow-node::before{border-color:#dbe2ea!important;}
.flow-node.selected::before{border-color:#2563eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.12);}
.node-head{background:linear-gradient(135deg,#f8fbff,#eef4ff);}
.lab-help-btn{border-radius:999px;padding:7px 12px;border:1px solid #cfe0ff;background:#eff6ff;color:#1d4ed8;font-weight:800;}
@media(max-width:980px){
  .flow-layout{grid-template-columns:280px 1fr;}
}
@media(max-width:760px){
  .flow-topbar{padding:12px 12px;align-items:flex-start;}
  .brand h1{font-size:18px;}
  .brand-subrow{gap:6px;}
  .brand-divider{display:none;}
  .top-actions{width:100%;justify-content:space-between;}
  .canvas-toolbar{left:10px;right:10px;top:10px;padding:12px;border-radius:18px;overflow:auto;}
  .flow-toolbar-actions{flex-wrap:nowrap;}
  .flow-toolbar-actions .btn{white-space:nowrap;}
  .run-log-toast{left:12px!important;right:12px!important;bottom:12px!important;max-width:none;}
  .canvas-add-node-btn{right:12px!important;bottom:72px!important;width:50px;height:50px;border-radius:16px;}
  .save-panel-title{font-size:14px;}
}
/* 2026-05-27: align lab header color with index header */
.flow-topbar{
  background:rgba(248,251,255,.88)!important;
  border-bottom:1px solid rgba(203,213,225,.75)!important;
  box-shadow:0 10px 30px rgba(15,23,42,.05)!important;
}
/* 2026-05-27: exact topbar color match with index page */
.flow-app > .flow-topbar{
  background: rgba(248,251,255,.88) !important;
  border-bottom: 1px solid rgba(203,213,225,.75) !important;
}
/* 2026-05-27: force exact visual parity with index topbar */
html body .flow-app > header.flow-topbar{
  background: rgba(248,251,255,.88) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(203,213,225,.75) !important;
  box-shadow: 0 10px 30px rgba(15,23,42,.05) !important;
}
/* 2026-05-27: make agents topbar visually match index topbar */
html body .flow-app > header.flow-topbar{
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 22px !important;
  min-height: 76px !important;
  background: rgba(248,251,255,.88) !important;
  border-bottom: 1px solid rgba(203,213,225,.75) !important;
  box-shadow: 0 10px 30px rgba(15,23,42,.05) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
html body .flow-app > header.flow-topbar .brand{
  min-width: 0 !important;
  gap: 10px !important;
}
html body .flow-app > header.flow-topbar .brand img{
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html body .flow-app > header.flow-topbar .brand h1{
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.2 !important;
}
html body .flow-app > header.flow-topbar .brand-subrow{
  margin-top: 0 !important;
}
html body .flow-app > header.flow-topbar .brand-tagline{
  display: block !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: #64748b !important;
}
html body .flow-app > header.flow-topbar .top-actions{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
@media(max-width:760px){
  html body .flow-app > header.flow-topbar{
    padding: 12px 14px !important;
    min-height: auto !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
}
/* 2026-05-27: set lab topbar to solid white */
html body .flow-app > header.flow-topbar{
  background: #ffffff !important;
}
/* 2026-05-27: soften lab UI tone by one step */
:root{
  --accent:#3b82f6 !important;
  --soft:#f5f9ff !important;
  --shadow:0 8px 24px rgba(15,23,42,.06) !important;
}
.palette.save-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(250,251,253,.99) 100%) !important;
}
.save-panel-chip{
  background:#f5f9ff !important;
  color:#4868a8 !important;
  border-color:#e5eefc !important;
}
.cloud-flow-status{
  background:#fbfdff !important;
  border-color:#edf2f7 !important;
}
.saved-flow-item{
  box-shadow:0 4px 12px rgba(15,23,42,.04) !important;
}
.saved-flow-item.active{
  background:linear-gradient(180deg,#fbfdff,#f5f9ff) !important;
  box-shadow:0 8px 18px rgba(59,130,246,.07) !important;
}
.canvas-toolbar{
  background:rgba(255,255,255,.94) !important;
  border:1px solid #edf2f7 !important;
  box-shadow:0 12px 28px rgba(15,23,42,.07) !important;
}
.flow-name-display{
  background:#fbfdff !important;
  border-color:#e5eaf1 !important;
}
.flow-toolbar-actions .btn{
  box-shadow:0 2px 8px rgba(15,23,42,.03) !important;
  background:#ffffff !important;
  border-color:#e2e8f0 !important;
  color:#334155 !important;
}
.flow-toolbar-actions .btn:hover{
  background:#f8fafc !important;
}
.flow-toolbar-actions .btn.primary{
  background:linear-gradient(135deg,#3b82f6,#60a5fa) !important;
  border-color:#3b82f6 !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(59,130,246,.16) !important;
}
.run-log-toast{
  background:rgba(30,41,59,.92) !important;
  box-shadow:0 12px 28px rgba(15,23,42,.18) !important;
}
.canvas-add-node-btn{
  background:linear-gradient(135deg,#3b82f6,#60a5fa) !important;
  box-shadow:0 12px 28px rgba(59,130,246,.18) !important;
}
.flow-node{
  box-shadow:0 12px 30px rgba(15,23,42,.09) !important;
}
.node-head{
  background:linear-gradient(135deg,#fbfdff,#f5f9ff) !important;
}
.lab-help-btn{
  background:#f5f9ff !important;
  border-color:#dbe7ff !important;
  color:#4567a8 !important;
}
.lab-subscribe-btn{
  background:linear-gradient(135deg,#f5f9ff,#ffffff) !important;
  color:#4567a8 !important;
  border-color:#dbe7ff !important;
  box-shadow:0 4px 12px rgba(15,23,42,.04) !important;
}
/* 2026-05-27: shorten dark area in lab button gradients */
.flow-toolbar-actions .btn.primary{
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 38%, #60a5fa 100%) !important;
  border-color: #2563eb !important;
  box-shadow: 0 8px 18px rgba(59,130,246,.16) !important;
}
.canvas-add-node-btn{
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 42%, #60a5fa 100%) !important;
  box-shadow: 0 10px 22px rgba(59,130,246,.18) !important;
}
/* 2026-05-27: make dark segment even shorter in lab button gradients */
.flow-toolbar-actions .btn.primary{
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 22%, #60a5fa 100%) !important;
}
.canvas-add-node-btn{
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 24%, #60a5fa 100%) !important;
}
/* 2026-05-27: match lab login button typography with index */
html body .flow-app > header.flow-topbar,
html body .flow-app > header.flow-topbar .btn,
html body .flow-app > header.flow-topbar #loginBtn,
html body .flow-app > header.flow-topbar #loginBtn span{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
html body .flow-app > header.flow-topbar #loginBtn{
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}
/* 2026-05-27: revert lab line colors to initial tone */
:root{
  --accent:#244c9a !important;
  --line:#d9deea !important;
}
.canvas-wrap{
  background:radial-gradient(circle at 1px 1px,#d9deea 1px,transparent 0) !important;
  background-size:22px 22px !important;
}
.flow-edge{
  stroke:#244c9a !important;
}
.flow-edge.draft{
  stroke:#f59e0b !important;
}
.port{
  background:#244c9a !important;
  box-shadow:0 0 0 1px #244c9a,0 6px 16px rgba(15,23,42,.18) !important;
}
.port.pending{
  background:#f59e0b !important;
  box-shadow:0 0 0 2px #f59e0b !important;
}
/* 2026-05-27: revert lab primary button tones to initial colors */
.flow-toolbar-actions .btn.primary{
  background: linear-gradient(135deg, #244c9a 0%, #244c9a 100%) !important;
  border-color: #244c9a !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(15,23,42,.10) !important;
}
.canvas-add-node-btn{
  background: linear-gradient(135deg, #244c9a 0%, #244c9a 100%) !important;
  color: #fff !important;
  box-shadow: 0 18px 40px rgba(37,99,235,.28) !important;
}
/* 2026-05-27: stabilize add button position */
html body .flow-app .canvas-add-node-btn{
  position: fixed !important;
  left: 18px !important;
  right: auto !important;
  top: auto !important;
  bottom: 78px !important;
  z-index: 19 !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  font-size: 28px !important;
  transform: none !important;
}
html body .flow-app .canvas-add-node-btn:hover{
  transform: translateY(-2px) scale(1.03) !important;
}
html body .flow-app .canvas-add-node-btn:active{
  transform: translateY(0) scale(.98) !important;
}
@media(max-width:760px){
  html body .flow-app .canvas-add-node-btn{
    left: 12px !important;
    bottom: 72px !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
    font-size: 28px !important;
  }
}
/* 2026-05-27: place add button at lower-left of visible flowCanvas on all devices */
html body .flow-app .canvas-wrap .canvas-add-node-btn{
  position: fixed !important;
  left: var(--add-node-left, 18px) !important;
  top: var(--add-node-top, calc(100dvh - 132px)) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 19 !important;
}
@media(max-width:760px){
  html body .flow-app .canvas-wrap .canvas-add-node-btn{
    left: var(--add-node-left, 12px) !important;
    top: var(--add-node-top, calc(100dvh - 122px)) !important;
  }
}

/* 2026-05-27: keep run log compact on mobile instead of full width */
@media(max-width:760px){
  html body .flow-app .canvas-wrap .run-log-toast,
  html body .flow-app .run-log-toast{
    left: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    width: auto !important;
    max-width: min(260px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
  }
}

/* 2026-05-27: final mobile flow-topbar responsive guard
   Keep agents.html topbar in one row and prevent brand/help/usage text from expanding the header. */
@media(max-width:760px){
  .flow-topbar{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:4px!important;
    min-height:42px!important;
    height:42px!important;
    padding:5px 6px!important;
    overflow:hidden!important;
  }
  .flow-topbar > .mobile-menu-btn,
  .mobile-menu-btn{
    order:0!important;
    position:static!important;
    flex:0 0 28px!important;
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    margin:0!important;
    font-size:15px!important;
    line-height:1!important;
  }
  .flow-topbar > .brand,
  .flow-topbar .brand.brand-link{
    order:1!important;
    flex:0 1 clamp(116px, 39vw, 188px)!important;
    min-width:0!important;
    max-width:39vw!important;
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  .flow-topbar .brand img{
    flex:0 0 21px!important;
    width:21px!important;
    height:21px!important;
    border-radius:6px!important;
  }
  .flow-topbar .brand-copy{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    align-items:center!important;
    gap:3px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  .flow-topbar .brand-title-row,
  .flow-topbar .brand-subrow{
    display:inline-flex!important;
    align-items:center!important;
    flex:0 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    gap:3px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  .flow-topbar .brand h1,
  .flow-topbar .brand-title-row h1{
    flex:0 0 auto!important;
    margin:0!important;
    font-size:11px!important;
    line-height:1!important;
    letter-spacing:-.04em!important;
    white-space:nowrap!important;
  }
  .flow-topbar .brand-tagline,
  .flow-topbar .brand-tagline.secondary{
    display:inline-block!important;
    min-width:0!important;
    max-width:74px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:8.5px!important;
    line-height:1!important;
    letter-spacing:-.07em!important;
    color:#64748b!important;
  }
  .flow-topbar .lab-help-btn{
    flex:0 0 auto!important;
    min-width:0!important;
    height:18px!important;
    min-height:18px!important;
    padding:0 4px!important;
    border-radius:999px!important;
    font-size:8px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .flow-topbar > .top-actions{
    order:2!important;
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    margin-left:auto!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:3px!important;
    overflow:hidden!important;
  }
  .flow-topbar .auth-user{
    flex:1 1 104px!important;
    min-width:72px!important;
    max-width:132px!important;
    overflow:hidden!important;
  }
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    width:100%!important;
    min-width:0!important;
    max-width:132px!important;
    min-height:30px!important;
    height:30px!important;
    padding:2px 4px!important;
    border-radius:8px!important;
    overflow:hidden!important;
  }
  .flow-topbar #usageStatusBody,
  .flow-topbar .usage-card-compact{
    min-width:0!important;
    width:100%!important;
    overflow:hidden!important;
  }
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix,
  .flow-topbar .usage-card-compact strong{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:7.4px!important;
    line-height:1.02!important;
    letter-spacing:-.085em!important;
  }
  .flow-topbar .usage-card-main-line{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    gap:2px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  .flow-topbar .usage-progress{
    height:2px!important;
    margin-top:1px!important;
  }
  .flow-topbar .top-actions .btn{
    flex:0 0 auto!important;
    min-height:28px!important;
    height:28px!important;
    padding:0 6px!important;
    border-radius:999px!important;
    font-size:9px!important;
    line-height:1!important;
    letter-spacing:-.06em!important;
    white-space:nowrap!important;
  }
  .flow-topbar .top-actions #logoutBtn{
    max-width:48px!important;
  }
  .flow-topbar .top-actions #loginBtn{
    max-width:76px!important;
  }
  .flow-topbar .top-actions #loginBtn.hidden,
  .flow-topbar .top-actions #loginBtn[hidden],
  .flow-topbar #loginBtn.hidden,
  .flow-topbar #loginBtn[hidden],
  .flow-topbar .top-actions #logoutBtn.hidden,
  .flow-topbar .top-actions #logoutBtn[hidden],
  .flow-topbar #logoutBtn.hidden,
  .flow-topbar #logoutBtn[hidden]{
    display:none!important;
  }
}
@media(max-width:390px){
  .flow-topbar > .brand,
  .flow-topbar .brand.brand-link{
    flex-basis:clamp(102px, 36vw, 142px)!important;
    max-width:36vw!important;
  }
  .flow-topbar .brand h1,
  .flow-topbar .brand-title-row h1{
    font-size:10px!important;
  }
  .flow-topbar .brand-tagline,
  .flow-topbar .brand-tagline.secondary{
    max-width:58px!important;
    font-size:7.8px!important;
  }
  .flow-topbar .auth-user{
    max-width:116px!important;
    min-width:66px!important;
  }
  .flow-topbar #usageStatus,
  .flow-topbar .usage-status.usage-card{
    max-width:116px!important;
  }
  .flow-topbar .auth-status,
  .flow-topbar .usage-card-plan,
  .flow-topbar .usage-card-quota,
  .flow-topbar .usage-card-suffix,
  .flow-topbar .usage-card-compact strong{
    font-size:6.9px!important;
    letter-spacing:-.095em!important;
  }
}

/* 2026-05-27: final mobile header stabilization for agents.html.
   Keep the flow-topbar on one row and prevent earlier mobile overrides from
   making top-actions full-width or enlarging the brand text. */
@media(max-width:760px){
  html body .flow-app > header.flow-topbar{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    height:44px!important;
    padding:6px 8px!important;
    overflow:hidden!important;
  }
  html body .flow-app > header.flow-topbar > .mobile-menu-btn,
  html body .flow-app > header.flow-topbar .mobile-menu-btn{
    order:0!important;
    position:static!important;
    flex:0 0 28px!important;
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    height:28px!important;
    min-height:28px!important;
    margin:0!important;
    padding:0!important;
    font-size:16px!important;
    line-height:1!important;
  }
  html body .flow-app > header.flow-topbar > .brand,
  html body .flow-app > header.flow-topbar > .brand.brand-link{
    order:1!important;
    flex:0 1 clamp(128px, 43vw, 190px)!important;
    min-width:0!important;
    max-width:43vw!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:5px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  html body .flow-app > header.flow-topbar .brand img{
    flex:0 0 22px!important;
    width:22px!important;
    min-width:22px!important;
    height:22px!important;
    border-radius:6px!important;
    box-shadow:none!important;
  }
  html body .flow-app > header.flow-topbar .brand-copy{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:4px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  html body .flow-app > header.flow-topbar .brand-title-row,
  html body .flow-app > header.flow-topbar .brand-subrow{
    display:inline-flex!important;
    flex:0 1 auto!important;
    min-width:0!important;
    max-width:100%!important;
    align-items:center!important;
    gap:3px!important;
    margin:0!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  html body .flow-app > header.flow-topbar .brand h1,
  html body .flow-app > header.flow-topbar .brand-title-row h1{
    flex:0 0 auto!important;
    margin:0!important;
    font-size:12px!important;
    line-height:1!important;
    letter-spacing:-.04em!important;
    white-space:nowrap!important;
  }
  html body .flow-app > header.flow-topbar .brand-tagline,
  html body .flow-app > header.flow-topbar .brand-tagline.secondary{
    display:inline-block!important;
    min-width:0!important;
    max-width:82px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:8.5px!important;
    line-height:1!important;
    letter-spacing:-.06em!important;
    color:#64748b!important;
  }
  html body .flow-app > header.flow-topbar .lab-help-btn{
    flex:0 0 auto!important;
    height:18px!important;
    min-height:18px!important;
    padding:0 5px!important;
    border-radius:999px!important;
    font-size:8px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  html body .flow-app > header.flow-topbar > .top-actions,
  html body .flow-app > header.flow-topbar .top-actions{
    order:2!important;
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin-left:auto!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
    overflow:hidden!important;
  }
  html body .flow-app > header.flow-topbar .auth-user{
    flex:0 1 clamp(104px, 34vw, 148px)!important;
    width:clamp(104px, 34vw, 148px)!important;
    min-width:96px!important;
    max-width:148px!important;
    overflow:hidden!important;
  }
  html body .flow-app > header.flow-topbar #usageStatus,
  html body .flow-app > header.flow-topbar .usage-status.usage-card{
    width:100%!important;
    min-width:0!important;
    max-width:148px!important;
    height:31px!important;
    min-height:31px!important;
    padding:2px 5px!important;
    border-radius:9px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  html body .flow-app > header.flow-topbar #usageStatusBody,
  html body .flow-app > header.flow-topbar .usage-card-compact,
  html body .flow-app > header.flow-topbar .usage-card-main-line{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  html body .flow-app > header.flow-topbar .usage-card-main-line{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:baseline!important;
    gap:2px!important;
    white-space:nowrap!important;
  }
  html body .flow-app > header.flow-topbar .auth-status,
  html body .flow-app > header.flow-topbar .usage-card-plan,
  html body .flow-app > header.flow-topbar .usage-card-quota,
  html body .flow-app > header.flow-topbar .usage-card-suffix,
  html body .flow-app > header.flow-topbar .usage-card-compact strong{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:7.2px!important;
    line-height:1.04!important;
    letter-spacing:-.085em!important;
  }
  html body .flow-app > header.flow-topbar .usage-progress{
    height:2px!important;
    margin-top:1px!important;
  }
  html body .flow-app > header.flow-topbar .top-actions .btn{
    flex:0 0 auto!important;
    height:28px!important;
    min-height:28px!important;
    padding:0 7px!important;
    border-radius:999px!important;
    font-size:9px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  html body .flow-app > header.flow-topbar .top-actions #loginBtn.hidden,
  html body .flow-app > header.flow-topbar .top-actions #loginBtn[hidden],
  html body .flow-app > header.flow-topbar .top-actions #logoutBtn.hidden,
  html body .flow-app > header.flow-topbar .top-actions #logoutBtn[hidden]{
    display:none!important;
  }
}
@media(max-width:390px){
  html body .flow-app > header.flow-topbar{
    gap:4px!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }
  html body .flow-app > header.flow-topbar > .brand,
  html body .flow-app > header.flow-topbar > .brand.brand-link{
    flex-basis:clamp(110px, 37vw, 142px)!important;
    max-width:37vw!important;
    gap:4px!important;
  }
  html body .flow-app > header.flow-topbar .brand h1,
  html body .flow-app > header.flow-topbar .brand-title-row h1{
    font-size:11px!important;
  }
  html body .flow-app > header.flow-topbar .brand-tagline,
  html body .flow-app > header.flow-topbar .brand-tagline.secondary{
    max-width:54px!important;
    font-size:7.4px!important;
  }
  html body .flow-app > header.flow-topbar .auth-user{
    flex-basis:108px!important;
    width:108px!important;
    min-width:88px!important;
    max-width:108px!important;
  }
  html body .flow-app > header.flow-topbar #usageStatus,
  html body .flow-app > header.flow-topbar .usage-status.usage-card{
    max-width:108px!important;
  }
  html body .flow-app > header.flow-topbar .auth-status,
  html body .flow-app > header.flow-topbar .usage-card-plan,
  html body .flow-app > header.flow-topbar .usage-card-quota,
  html body .flow-app > header.flow-topbar .usage-card-suffix,
  html body .flow-app > header.flow-topbar .usage-card-compact strong{
    font-size:6.6px!important;
    letter-spacing:-.095em!important;
  }
}
@media(max-width:350px){
  html body .flow-app > header.flow-topbar .brand-tagline,
  html body .flow-app > header.flow-topbar .brand-tagline.secondary{
    display:none!important;
  }
  html body .flow-app > header.flow-topbar .lab-help-btn{
    display:none!important;
  }
  html body .flow-app > header.flow-topbar > .brand,
  html body .flow-app > header.flow-topbar > .brand.brand-link{
    flex-basis:82px!important;
    max-width:82px!important;
  }
  html body .flow-app > header.flow-topbar .auth-user{
    flex-basis:102px!important;
    width:102px!important;
    min-width:82px!important;
    max-width:102px!important;
  }
}

/* 2026-05-27: make flow toolbar title compact, about the same size as the edit hint */
.flow-toolbar-title .flow-name-text{
  font-size:11px!important;
  line-height:1.2!important;
  font-weight:800!important;
}
.flow-toolbar-title .flow-name-edit-hint{
  font-size:11px!important;
  line-height:1.2!important;
}
.flow-toolbar-title .flow-name-display{
  min-height:28px!important;
  height:28px!important;
  padding:4px 8px!important;
  gap:6px!important;
}
@media(max-width:760px){
  .flow-toolbar-title .flow-name-text,
  .flow-toolbar-title .flow-name-edit-hint{
    font-size:11px!important;
  }
  .flow-toolbar-title .flow-name-display{
    min-height:26px!important;
    height:26px!important;
    padding:3px 7px!important;
  }
}


/* 2026-05-27: place the brand subtitle under "分析ラボ" and keep it compact. */
html body .flow-app > header.flow-topbar .brand-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:1px!important;
  min-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
html body .flow-app > header.flow-topbar .brand-title-row{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
html body .flow-app > header.flow-topbar .brand-subrow{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  line-height:1!important;
}
html body .flow-app > header.flow-topbar .brand-tagline,
html body .flow-app > header.flow-topbar .brand-tagline.secondary{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:-.02em!important;
  color:#64748b!important;
}
@media(max-width:760px){
  html body .flow-app > header.flow-topbar .brand-copy{
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    gap:1px!important;
  }
  html body .flow-app > header.flow-topbar .brand-title-row{
    flex:0 0 auto!important;
    width:100%!important;
    gap:3px!important;
  }
  html body .flow-app > header.flow-topbar .brand-subrow{
    display:block!important;
    flex:0 0 auto!important;
    width:100%!important;
    max-width:100%!important;
  }
  html body .flow-app > header.flow-topbar .brand-tagline,
  html body .flow-app > header.flow-topbar .brand-tagline.secondary{
    display:block!important;
    max-width:100%!important;
    font-size:7.2px!important;
    line-height:1!important;
    letter-spacing:-.05em!important;
  }
}
@media(max-width:390px){
  html body .flow-app > header.flow-topbar .brand-tagline,
  html body .flow-app > header.flow-topbar .brand-tagline.secondary{
    display:block!important;
    max-width:100%!important;
    font-size:6.8px!important;
  }
}
@media(max-width:350px){
  html body .flow-app > header.flow-topbar .brand-tagline,
  html body .flow-app > header.flow-topbar .brand-tagline.secondary{
    display:block!important;
    font-size:6.2px!important;
  }
}

/* 2026-05-27: remove canvas toolbar background color */
.canvas-toolbar{
  background:transparent!important;
}

/* 2026-05-27: mobile drawer layering fix
   The hamburger drawer must appear above the header, canvas toolbar,
   run-log toast, add-node button, and other floating UI. */
@media(max-width:760px){
  html body.save-panel-open .flow-app > header.flow-topbar{
    z-index:900!important;
  }
  html body .save-panel-backdrop,
  html body #savePanelBackdrop{
    position:fixed!important;
    inset:0!important;
    z-index:990!important;
  }
  html body .save-panel-backdrop.open,
  html body #savePanelBackdrop.open{
    display:block!important;
  }
  html body .flow-app .palette.save-panel,
  html body .flow-app #savePanel.save-panel{
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    height:100dvh!important;
    max-height:100dvh!important;
    width:min(86vw,320px)!important;
    transform:translateX(-105%)!important;
    z-index:1000!important;
    isolation:isolate!important;
    background:#fff!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html body .flow-app .palette.save-panel.open,
  html body .flow-app #savePanel.save-panel.open{
    transform:translateX(0)!important;
  }
  html body.save-panel-open .canvas-toolbar,
  html body.save-panel-open .run-log-toast,
  html body.save-panel-open .canvas-add-node-btn{
    z-index:1!important;
  }
}

/* 2026-05-28:料金プランボタンとプラン比較ポップアップ */
html body .flow-app > header.flow-topbar .top-actions #labPlanDetailsBtn.lab-plan-details-btn{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  min-width:auto!important;
  width:auto!important;
  min-height:38px!important;
  height:38px!important;
  padding:8px 14px!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.86)!important;
  color:#0f172a!important;
  border:1px solid rgba(148,163,184,.48)!important;
  box-shadow:0 8px 18px rgba(15,23,42,.08)!important;
  font-weight:400!important;
  font-size:13px!important;
  line-height:1.2!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
}
@media (hover:hover){
  html body .flow-app > header.flow-topbar .top-actions #labPlanDetailsBtn.lab-plan-details-btn:hover{
    background:#f8fafc!important;
    border-color:#94a3b8!important;
    transform:translateY(-1px)!important;
  }
}
.lab-subscription-modal{width:min(760px,calc(100vw - 32px));max-height:min(88vh,900px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.lab-subscription-badge{display:inline-flex;align-items:center;margin:0 0 6px;padding:5px 10px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:12px;font-weight:900;}
.lab-subscription-lead{margin:0 0 14px;color:#475569;font-size:14px;line-height:1.7;}
.lab-subscription-comparison{display:grid;gap:14px;margin:12px 0 16px;}
.lab-subscription-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch;}
.lab-subscription-plan-card{position:relative;display:grid;grid-template-rows:minmax(22px,auto) minmax(30px,auto) minmax(18px,auto) 1fr;align-content:start;border:1px solid #e2e8f0;border-radius:16px;background:#fff;padding:16px;box-shadow:0 8px 24px rgba(15,23,42,.06);}
.lab-subscription-plan-card.recommended{border-color:#2563eb;box-shadow:0 14px 34px rgba(37,99,235,.16);transform:translateY(-2px);}
.lab-subscription-plan-badge{position:absolute;top:-10px;right:14px;display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;background:#2563eb;color:#fff;font-size:11px;font-weight:900;}
.lab-subscription-plan-name{font-size:17px;font-weight:900;color:#0f172a;}
.lab-subscription-plan-price{margin-top:6px;font-size:23px;font-weight:900;color:#111827;line-height:1.1;}
.lab-subscription-plan-price-sub{margin-top:4px;font-size:12px;color:#64748b;}
.lab-subscription-plan-desc{margin-top:10px;font-size:13px;line-height:1.6;color:#475569;min-height:40px;align-self:start;}
.lab-subscription-feature-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;background:#fff;font-size:12px;}
.lab-subscription-feature-table th,.lab-subscription-feature-table td{padding:9px 10px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0;text-align:center;vertical-align:middle;white-space:normal;}
.lab-subscription-feature-table th:first-child,.lab-subscription-feature-table td:first-child{text-align:left;font-weight:800;color:#334155;background:#f8fafc;}
.lab-subscription-feature-table th:last-child,.lab-subscription-feature-table td:last-child{border-right:0;}
.lab-subscription-feature-table tr:last-child td{border-bottom:0;}
.lab-subscription-feature-table .recommended-col{background:#eff6ff;color:#1d4ed8;font-weight:900;}
.lab-subscription-list{margin:0 0 16px;padding-left:1.2em;color:#475569;font-size:12px;line-height:1.7;}
.lab-subscription-actions{margin-top:8px;}
@media(max-width:760px){
  html body .flow-app > header.flow-topbar .top-actions #labPlanDetailsBtn.lab-plan-details-btn{
    min-height:30px!important;
    height:30px!important;
    padding:3px 5px!important;
    font-size:9px!important;
    border-radius:8px!important;
    max-width:54px!important;
  }
  .lab-subscription-modal{width:calc(100vw - 24px);max-height:86dvh;border-radius:18px 18px 0 0;padding:16px;}
  .lab-subscription-plan-grid{grid-template-columns:1fr;}
  .lab-subscription-feature-table{display:block;overflow:auto;}
  .lab-subscription-actions{gap:8px;}
  .lab-subscription-actions .btn{flex:1;}
}
@media(max-width:390px){
  html body .flow-app > header.flow-topbar .top-actions #labPlanDetailsBtn.lab-plan-details-btn{
    padding-inline:4px!important;
    font-size:8px!important;
    max-width:48px!important;
  }
}

/* 2026-05-28:スマホ表示ではauth-user内のプラン名を非表示 */
@media (max-width:760px){
  .auth-user .usage-card-plan{
    display:none!important;
  }
}


/* 2026-05-28:料金プランボタンは太字にしない */
html body .flow-app > header.flow-topbar .top-actions #labPlanDetailsBtn.lab-plan-details-btn{
  font-weight:400!important;
}


/* 2026-05-28: keep agents header font family consistent */
html body .flow-app > header.flow-topbar .brand-copy,
html body .flow-app > header.flow-topbar .brand-copy *,
html body .flow-app > header.flow-topbar .top-actions,
html body .flow-app > header.flow-topbar .top-actions button,
html body .flow-app > header.flow-topbar .top-actions a{
  font-family:inherit!important;
}


/* 2026-05-29: match agents.html auth-user width to index.html and keep it shorter */
@media(max-width:760px){
  html body .flow-app > header.flow-topbar .auth-user{
    flex:0 1 clamp(96px, 32vw, 142px)!important;
    width:clamp(96px, 32vw, 142px)!important;
    min-width:92px!important;
    max-width:142px!important;
  }
  html body .flow-app > header.flow-topbar #usageStatus,
  html body .flow-app > header.flow-topbar .usage-status.usage-card{
    max-width:142px!important;
  }
}
@media(max-width:390px){
  html body .flow-app > header.flow-topbar .auth-user{
    flex-basis:104px!important;
    width:104px!important;
    min-width:86px!important;
    max-width:104px!important;
  }
  html body .flow-app > header.flow-topbar #usageStatus,
  html body .flow-app > header.flow-topbar .usage-status.usage-card{
    max-width:104px!important;
  }
}
@media(max-width:350px){
  html body .flow-app > header.flow-topbar .auth-user{
    flex-basis:98px!important;
    width:98px!important;
    min-width:80px!important;
    max-width:98px!important;
  }
  html body .flow-app > header.flow-topbar #usageStatus,
  html body .flow-app > header.flow-topbar .usage-status.usage-card{
    max-width:98px!important;
  }
}

/* 2026-05-29: shorten agents.html usageStatus width to match index.html behavior */
html body .flow-app > header.flow-topbar .auth-user{
  flex:0 1 auto!important;
  min-width:0!important;
  max-width:148px!important;
  width:auto!important;
  overflow:hidden!important;
}
html body .flow-app > header.flow-topbar #usageStatus,
html body .flow-app > header.flow-topbar .usage-status.usage-card{
  width:auto!important;
  min-width:112px!important;
  max-width:148px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
html body .flow-app > header.flow-topbar #usageStatusBody,
html body .flow-app > header.flow-topbar .usage-card-compact,
html body .flow-app > header.flow-topbar .usage-card-main-line{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}
html body .flow-app > header.flow-topbar .auth-status,
html body .flow-app > header.flow-topbar .usage-card-quota,
html body .flow-app > header.flow-topbar .usage-card-suffix,
html body .flow-app > header.flow-topbar .usage-card-compact strong{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
@media(max-width:760px){
  html body .flow-app > header.flow-topbar .auth-user{
    flex:0 1 clamp(92px, 30vw, 148px)!important;
    width:clamp(92px, 30vw, 148px)!important;
    min-width:92px!important;
    max-width:148px!important;
  }
  html body .flow-app > header.flow-topbar #usageStatus,
  html body .flow-app > header.flow-topbar .usage-status.usage-card{
    width:100%!important;
    min-width:0!important;
    max-width:148px!important;
  }
}
@media(max-width:390px){
  html body .flow-app > header.flow-topbar .auth-user{
    flex-basis:98px!important;
    width:98px!important;
    min-width:84px!important;
    max-width:98px!important;
  }
  html body .flow-app > header.flow-topbar #usageStatus,
  html body .flow-app > header.flow-topbar .usage-status.usage-card{
    max-width:98px!important;
  }
}
@media(max-width:350px){
  html body .flow-app > header.flow-topbar .auth-user{
    flex-basis:92px!important;
    width:92px!important;
    min-width:78px!important;
    max-width:92px!important;
  }
  html body .flow-app > header.flow-topbar #usageStatus,
  html body .flow-app > header.flow-topbar .usage-status.usage-card{
    max-width:92px!important;
  }
}

/* 2026-05-29: add safe inner padding for agents.html auth-user usage card to prevent clipped/overlapped text */
html body .flow-app > header.flow-topbar .auth-user{
  box-sizing:border-box!important;
  align-items:center!important;
  overflow:visible!important;
  padding:1px 0!important;
}
html body .flow-app > header.flow-topbar #usageStatus,
html body .flow-app > header.flow-topbar .usage-status.usage-card{
  box-sizing:border-box!important;
  min-height:40px!important;
  height:auto!important;
  padding:4px 7px!important;
  overflow:hidden!important;
  justify-content:center!important;
}
html body .flow-app > header.flow-topbar #usageStatusBody,
html body .flow-app > header.flow-topbar .usage-card-compact,
html body .flow-app > header.flow-topbar .usage-card-main-line{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
html body .flow-app > header.flow-topbar .auth-status,
html body .flow-app > header.flow-topbar .usage-card-quota,
html body .flow-app > header.flow-topbar .usage-card-suffix,
html body .flow-app > header.flow-topbar .usage-card-compact strong{
  display:block!important;
  line-height:1.15!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
@media(max-width:760px){
  html body .flow-app > header.flow-topbar .auth-user{
    flex:0 0 clamp(112px, 31vw, 150px)!important;
    width:clamp(112px, 31vw, 150px)!important;
    min-width:112px!important;
    max-width:150px!important;
  }
  html body .flow-app > header.flow-topbar #usageStatus,
  html body .flow-app > header.flow-topbar .usage-status.usage-card{
    width:100%!important;
    min-width:0!important;
    max-width:150px!important;
    min-height:40px!important;
    padding:4px 6px!important;
  }
}
@media(max-width:390px){
  html body .flow-app > header.flow-topbar .auth-user{
    flex-basis:108px!important;
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
  }
  html body .flow-app > header.flow-topbar #usageStatus,
  html body .flow-app > header.flow-topbar .usage-status.usage-card{
    max-width:108px!important;
    padding:4px 5px!important;
  }
}
@media(max-width:350px){
  html body .flow-app > header.flow-topbar .auth-user{
    flex-basis:102px!important;
    width:102px!important;
    min-width:102px!important;
    max-width:102px!important;
  }
  html body .flow-app > header.flow-topbar #usageStatus,
  html body .flow-app > header.flow-topbar .usage-status.usage-card{
    max-width:102px!important;
    padding:4px 5px!important;
  }
}

/* Cloud flow save/load loading overlay */
.cloud-flow-busy-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(4px);
}
.cloud-flow-busy-overlay.hidden{
  display:none!important;
}
.cloud-flow-busy-card{
  min-width:220px;
  max-width:min(92vw,360px);
  padding:22px 24px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 24px 64px rgba(15,23,42,.28);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
}
.cloud-flow-busy-spinner{
  width:32px;
  height:32px;
  border-radius:999px;
  border:3px solid #e5e7eb;
  border-top-color:#111827;
  animation:cloudFlowBusySpin .85s linear infinite;
}
.cloud-flow-busy-message{
  color:#111827;
  font-size:14px;
  font-weight:700;
  line-height:1.5;
}
body.cloud-flow-busy-active{
  cursor:progress;
}
@keyframes cloudFlowBusySpin{
  to{ transform:rotate(360deg); }
}
@media (max-width:760px){
  .cloud-flow-busy-card{
    min-width:200px;
    padding:20px 18px;
    border-radius:16px;
  }
  .cloud-flow-busy-message{
    font-size:13px;
  }
}

/* 2026-05-29: agents.html auth-user display unified with index.html */
.flow-topbar .auth-user{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  min-width:0!important;
  flex:0 1 auto!important;
}
.flow-topbar .usage-status.usage-card{
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:2px!important;
  min-width:138px!important;
  max-width:260px!important;
  padding:4px 8px!important;
  border-radius:12px!important;
  background:#fff!important;
  border:1px solid #dbeafe!important;
  box-shadow:0 3px 10px rgba(15,23,42,.04)!important;
  color:#0f172a!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}
.flow-topbar #usageStatusBody{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:1px!important;
  width:100%!important;
  min-width:0!important;
}
.flow-topbar .usage-card-compact{
  display:inline-flex!important;
  align-items:baseline!important;
  gap:8px!important;
  white-space:nowrap!important;
  max-width:100%!important;
}
.flow-topbar .usage-progress{
  display:block!important;
  align-self:stretch!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
}


/* 2026-05-29: unify auth-user limit-reached quota text color */
.flow-topbar #usageStatus.limit-reached .usage-card-quota,
.flow-topbar .usage-status.limit-reached .usage-card-quota{
  color:#b91c1c!important;
}
.flow-topbar #usageStatus.credit-available.limit-reached .usage-card-quota,
.flow-topbar .usage-status.credit-available.limit-reached .usage-card-quota{
  color:#166534!important;
}

/* 2026-05-30: match agents run/add buttons to Google registration/login button color */
#runFlowBtn.btn.primary,
.canvas-add-node-btn{
  background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%)!important;
  border-color:rgba(37,99,235,.86)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(22,33,62,.16),0 2px 6px rgba(37,99,235,.16)!important;
}
#runFlowBtn.btn.primary:hover,
.canvas-add-node-btn:hover{
  background:linear-gradient(135deg,#172554 0%,#1d4ed8 100%)!important;
  border-color:#1d4ed8!important;
  filter:none!important;
}
#runFlowBtn.btn.primary:active,
.canvas-add-node-btn:active{
  transform:translateY(1px);
}
@media(max-width:760px){
  .canvas-toolbar .flow-toolbar-actions #runFlowBtn.btn.primary{
    background-color:#2563eb!important;
    background-image:url('./icons/execute.svg'),linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%)!important;
    background-repeat:no-repeat,no-repeat!important;
    background-position:center,center!important;
    background-size:20px 20px,100% 100%!important;
    border-color:rgba(37,99,235,.86)!important;
    box-shadow:0 8px 18px rgba(22,33,62,.16),0 2px 6px rgba(37,99,235,.16)!important;
  }
}

/* 2026-05-30: keep mobile drawer close button clear of save-panel chips */
@media(max-width:760px){
  html body .flow-app #savePanel.save-panel .save-panel-head{
    margin-bottom:18px!important;
    padding-bottom:8px!important;
  }
  html body .flow-app #savePanel.save-panel .save-panel-meta{
    margin-top:14px!important;
  }
  html body .flow-app #savePanel.save-panel .panel-close-btn{
    top:12px!important;
  }
}


/* 2026-06-01: prevent agents.html auth-user from being cut off on mobile */
@media(max-width:430px){
  html body .flow-app > header.flow-topbar{
    gap:4px!important;
  }
  html body .flow-app > header.flow-topbar > .brand,
  html body .flow-app > header.flow-topbar > .brand.brand-link{
    flex:0 1 104px!important;
    max-width:104px!important;
  }
  html body .flow-app > header.flow-topbar .brand-tagline,
  html body .flow-app > header.flow-topbar .brand-tagline.secondary{
    display:none!important;
  }
  html body .flow-app > header.flow-topbar .auth-user{
    flex:0 0 136px!important;
    width:136px!important;
    min-width:136px!important;
    max-width:136px!important;
    overflow:visible!important;
  }
  html body .flow-app > header.flow-topbar #usageStatus,
  html body .flow-app > header.flow-topbar .usage-status.usage-card{
    width:136px!important;
    min-width:136px!important;
    max-width:136px!important;
    overflow:hidden!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }
  html body .flow-app > header.flow-topbar .auth-status,
  html body .flow-app > header.flow-topbar .usage-card-plan,
  html body .flow-app > header.flow-topbar .usage-card-quota,
  html body .flow-app > header.flow-topbar .usage-card-suffix,
  html body .flow-app > header.flow-topbar .usage-card-compact strong{
    font-size:6.8px!important;
    letter-spacing:-.10em!important;
  }
}
@media(max-width:360px){
  html body .flow-app > header.flow-topbar > .brand,
  html body .flow-app > header.flow-topbar > .brand.brand-link{
    flex-basis:88px!important;
    max-width:88px!important;
  }
  html body .flow-app > header.flow-topbar .auth-user{
    flex-basis:124px!important;
    width:124px!important;
    min-width:124px!important;
    max-width:124px!important;
  }
  html body .flow-app > header.flow-topbar #usageStatus,
  html body .flow-app > header.flow-topbar .usage-status.usage-card{
    width:124px!important;
    min-width:124px!important;
    max-width:124px!important;
  }
  html body .flow-app > header.flow-topbar .auth-status,
  html body .flow-app > header.flow-topbar .usage-card-plan,
  html body .flow-app > header.flow-topbar .usage-card-quota,
  html body .flow-app > header.flow-topbar .usage-card-suffix,
  html body .flow-app > header.flow-topbar .usage-card-compact strong{
    font-size:6.3px!important;
    letter-spacing:-.12em!important;
  }
}