/* Flow drawing UI: floating toolbar, popovers, context menu, settings extras, tool families. */
#fdSettings .fi-backdrop{position:fixed;inset:0;z-index:2000000;background:rgba(2,6,15,.55);display:grid;place-items:center;padding:16px}
.fd-toolbar{position:fixed;z-index:10020;display:none;align-items:center;gap:2px;padding:3px;border-radius:8px;background:#0f1a2b;border:1px solid #2a3b50;box-shadow:0 10px 28px rgba(0,0,0,.5);font:13px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;user-select:none}
.fd-toolbar button{all:unset;cursor:pointer;min-width:28px;height:28px;padding:0 4px;box-sizing:border-box;display:grid;place-items:center;border-radius:6px;color:#cbd5e1;font-size:13px}
.fd-toolbar button:hover{background:#1e2c42;color:#fff}
.fd-toolbar button.on{color:#facc15}
.fd-sep{width:1px;height:18px;background:#2a3b50;margin:0 3px}
.fd-swatch{display:block;width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.35)}
.fd-width-icon{display:block;width:18px;background:#cbd5e1;border-radius:2px}
.fd-style-icon{font-weight:700;letter-spacing:1px}
.fd-popover{position:fixed;z-index:10030;padding:8px;border-radius:8px;background:#0f1a2b;border:1px solid #2a3b50;box-shadow:0 14px 34px rgba(0,0,0,.55);font:12px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#cbd5e1}
.fd-colors{display:grid;grid-template-columns:repeat(6,22px);gap:6px}
.fd-colors button{all:unset;cursor:pointer;width:22px;height:22px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.fd-colors button.active,.fd-colors button:hover{box-shadow:0 0 0 2px #0f1a2b,0 0 0 4px #60a5fa}
.fd-custom{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-top:4px;color:#94a3b8}
.fd-custom input{width:34px;height:22px;padding:0;border:1px solid #2a3b50;border-radius:5px;background:none;cursor:pointer}
.fd-list{display:flex;flex-direction:column;min-width:110px}
.fd-list button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:5px;color:#cbd5e1;white-space:nowrap}
.fd-list button:hover{background:#1e2c42}
.fd-list button.active{color:#60a5fa}
.fd-line{display:inline-block;width:28px;background:currentColor;border-radius:2px}
.fd-menu{position:fixed;z-index:10040;min-width:220px;padding:5px;border-radius:8px;background:#0f1a2b;border:1px solid #2a3b50;box-shadow:0 16px 40px rgba(0,0,0,.55);font:13px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.fd-menu button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;width:100%;padding:7px 10px;border-radius:5px;color:#dbe4ee}
.fd-menu button:hover{background:#1e2c42}
.fd-menu button.danger{color:#f87171}
.fd-menu button.checked span::before{content:"✓ ";color:#60a5fa}
.fd-menu kbd{font:11px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#64748b}
.fd-menu-sep{height:1px;margin:4px 6px;background:#22324a}
.fd-levels{display:flex;flex-direction:column;gap:6px}
.fd-levels>b{font-size:12px;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}
.fd-level{display:grid;grid-template-columns:18px 1fr 38px 26px;gap:8px;align-items:center}
.fd-level input[type=number]{box-sizing:border-box;width:100%;padding:5px 8px;border-radius:6px;border:1px solid #2a3b50;background:#050b14;color:#f1f5f9}
.fd-level input[type=color]{width:38px;height:26px;padding:0;border:1px solid #2a3b50;border-radius:6px;background:#050b14;cursor:pointer}
.fd-level button{all:unset;cursor:pointer;text-align:center;color:#64748b;border-radius:5px}
.fd-level button:hover{color:#f87171}
.fd-add-level{align-self:flex-start;margin-top:4px}
.fd-tfs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.fd-tf-actions{display:flex;gap:8px}
.fd-settings input[type=range]{width:100%}
.fd-settings .fi-field input:not([type]),.fd-settings .fi-field input[type=text]{box-sizing:border-box;width:100%;padding:6px 8px;border-radius:6px;border:1px solid #2a3b50;background:#050b14;color:#f1f5f9;font-size:13px}
.fd-settings .fi-field input[type=color]{width:100%;height:30px;padding:0;border:1px solid #2a3b50;border-radius:6px;background:#050b14;cursor:pointer}
.fd-settings .fi-field{grid-template-columns:1fr 170px}

/* tool families in the left toolbar */
.flow-drawing-btn[data-group]{position:relative}
.fdp-caret{position:absolute;right:1px;bottom:0;font-size:6px;line-height:1;color:#64748b;padding:2px}
.flow-drawing-btn[data-group]:hover .fdp-caret{color:#ffd76a}
#flowMagnetBtn[data-mode="weak"]{color:#facc15}
#flowMagnetBtn[data-mode="strong"]{color:#0b1220;background:#facc15!important;border-color:#facc15!important}
.fdp-flyout{position:fixed;z-index:10050;min-width:230px;padding:6px;border-radius:10px;background:#0f1a2b;border:1px solid rgba(212,175,55,.3);box-shadow:0 18px 44px rgba(0,0,0,.55);font:13px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.fdp-flyout>b{display:block;padding:4px 8px 6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
.fdp-flyout button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:6px;color:#dbe4ee}
.fdp-flyout button:hover{background:#1e2c42}
.fdp-flyout button.active{color:#ffd76a}
.fdp-flyout i{font-style:normal;text-align:center;font-weight:800}
.fdp-flyout kbd{font:11px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#64748b}
@media (hover:none){.fd-toolbar button{min-width:36px;height:36px}}

/* alerts */
.fd-toolbar button[data-fd="alert"].on{color:#facc15;background:#2a2410}
.fd-settings textarea{box-sizing:border-box;width:100%;padding:6px 8px;border-radius:6px;border:1px solid #2a3b50;background:#050b14;color:#f1f5f9;font:13px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;resize:vertical}
#faNotices{position:fixed;right:16px;top:70px;z-index:2000002;display:flex;flex-direction:column;gap:8px;width:min(380px,calc(100vw - 32px))}
.fa-notice{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:12px 14px;border-radius:10px;background:#1a1606;border:1px solid #facc15;color:#fef9c3;font:13px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;box-shadow:0 14px 34px rgba(0,0,0,.55);animation:fa-in .2s ease}
.fa-notice b{color:#facc15;white-space:nowrap}
.fa-notice button{all:unset;cursor:pointer;color:#a3a3a3}
.fa-notice button:hover{color:#fff}
@keyframes fa-in{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
#flowAlertsButton .fa-count{display:inline-block;min-width:14px;padding:0 4px;border-radius:8px;background:#facc15;color:#0b1220;font-size:10px;line-height:14px;text-align:center}
#flowAlertsButton .fa-count:empty{display:none}
#faList .fi-backdrop{position:fixed;inset:0;z-index:2000000;background:rgba(2,6,15,.55);display:grid;place-items:center;padding:16px}
.fa-dialog{width:min(560px,100%)}
.fa-body{overflow:auto;padding:8px 12px 12px;display:flex;flex-direction:column;gap:4px}
.fa-body h4{margin:12px 4px 4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#64748b;display:flex;justify-content:space-between}
.fa-row{display:grid;grid-template-columns:1fr auto auto auto auto;gap:10px;align-items:center;padding:6px 8px;border-radius:6px}
.fa-row:hover{background:#111c2e}
.fa-row.off{opacity:.55}
.fa-row button{all:unset;cursor:pointer;color:#94a3b8;padding:3px 6px;border-radius:5px}
.fa-row button:hover{background:#1e293b;color:#fff}
.fa-row .fa-name{color:#e2e8f0;font-weight:600}
.fa-level{font-variant-numeric:tabular-nums;color:#facc15}
.fa-mode{color:#64748b;font-size:12px}
.fa-log{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:4px 8px;font-size:12px;color:#cbd5e1}
.fa-log time{color:#64748b;white-space:nowrap}
.fa-link{all:unset;cursor:pointer;color:#60a5fa;text-transform:none;letter-spacing:0}

/* alert delivery (server checks, push, email) */
.fa-delivery{display:flex;flex-direction:column;gap:6px;margin:0 12px 10px;padding:10px 12px;border-radius:8px;background:#0b1424;border:1px solid #1e2c42;font-size:12.5px;color:#cbd5e1}
.fa-delivery:empty{display:none}
.fa-drow{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center}
.fa-drow>span:first-child{color:#64748b}
.fa-ok{color:#4ade80;font-weight:600}
.fa-muted{color:#64748b}
.fa-push-msg{color:#facc15;font-size:12px}
.fa-push-msg:empty{display:none}
@media (max-width:520px){.fa-drow{grid-template-columns:1fr}}