/* 吃網站共用 token：cfo-ui.css 的夜間/主題/個人設定會覆蓋這些淺色預設 → 整頁自動跟著切換 */
    :root{
      --bg:#f4f6f9; --card:#ffffff; --text:#102338; --sub:#5f7389; --muted:#8ba0b5;
      --line:#dfe6ee; --green:#14B8A6; --green-dim:rgba(20,184,166,.10);
      --red:#b14146; --warn:#b9842b;
      --danger-soft:rgba(177,65,70,.12); --amber-soft:rgba(185,132,43,.14);
    }
    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ff-base,system-ui,-apple-system,"PingFang TC","Noto Sans TC",sans-serif);}
    .wrap{max-width:1060px;margin:0 auto;padding:26px 22px 72px;}

    /* header */
    .eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--green);}
    h1{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:6px 0 4px;}
    .lede{color:var(--muted);font-size:13.5px;max-width:62ch;margin:0;}

    /* section scaffolding */
    .sec{margin-top:30px;}
    .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px;}
    .sec-title{font-size:15px;font-weight:800;letter-spacing:-.01em;margin:0;}
    .sec-sub{font-size:12px;color:var(--muted);}
    .block{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;}
    .pagehd{margin-top:0;}
    .pagehd h1{margin:0;}

    /* buttons */
    .btn{font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--sub);padding:8px 13px;display:inline-flex;align-items:center;gap:6px;transition:border-color .12s,color .12s,background .12s;}
    .btn:hover{border-color:var(--green);color:var(--green);}
    .btn.solid{background:var(--green);border-color:var(--green);color:#fff;}
    .btn.solid:hover{filter:brightness(1.06);color:#fff;}
    .btn.ghost{border-color:transparent;background:transparent;color:var(--muted);padding:8px 10px;}
    .btn.ghost:hover{background:var(--green-dim);color:var(--green);}
    .btn.danger:hover{border-color:var(--red);color:var(--red);background:var(--danger-soft);}
    .btn.ghost.danger:hover{background:var(--danger-soft);color:var(--red);}
    .btn.mini{font-size:11.5px;padding:6px 10px;color:var(--muted);}
    .btn:disabled{opacity:.5;cursor:default;}
    .btn:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
    .actions{display:flex;flex-wrap:wrap;gap:7px;}

    /* connection rows — 帳列式（非小卡），細線分隔 + 左側狀態色尺 */
    .conn-list{border:1px solid var(--line);border-top-width:2px;border-top-color:var(--sub);background:var(--card);}
    .conn-row{display:flex;align-items:stretch;border-bottom:1px solid var(--line);}
    .conn-row:last-child{border-bottom:0;}
    .conn-rule{width:3px;flex:0 0 auto;background:var(--muted);}
    .conn-row[data-status="active"] .conn-rule{background:var(--green);}
    .conn-row[data-status="error"]  .conn-rule{background:var(--red);}
    .conn-row[data-status="paused"] .conn-rule{background:var(--warn);}
    .conn-body{flex:1;min-width:0;display:flex;align-items:center;gap:16px;padding:14px 16px;flex-wrap:wrap;}
    .conn-id{flex:1 1 240px;min-width:0;}
    .conn-name{font-weight:800;font-size:14.5px;display:flex;align-items:center;gap:9px;}
    .conn-st{font-size:11px;font-weight:700;letter-spacing:.02em;}
    .conn-st.active{color:var(--green);} .conn-st.error{color:var(--red);} .conn-st.paused{color:var(--warn);}
    .conn-meta{font-size:12px;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums;line-height:1.5;}
    .conn-meta .sep{opacity:.35;margin:0 7px;}
    .conn-meta .warn{color:var(--red);}
    .conn-act{display:flex;gap:5px;flex-wrap:wrap;align-items:center;justify-content:flex-end;}

    /* connector picker — 選平台目錄 */
    .market{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:10px;}
    .mk{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--card);padding:13px 14px;cursor:pointer;font:inherit;text-align:left;transition:border-color .12s,background .12s;}
    .mk:hover:not([disabled]){border-color:var(--green);}
    .mk[disabled]{opacity:.5;cursor:default;}
    .mk-logo{width:34px;height:34px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#fff;flex:0 0 auto;letter-spacing:.02em;}
    .mk-txt{flex:1;min-width:0;}
    .mk-name{font-weight:800;font-size:14px;}
    .mk-tag{font-size:11px;color:var(--muted);margin-top:2px;}
    .mk-state{font-size:10.5px;font-weight:700;flex:0 0 auto;}
    .mk-state.avail{color:var(--green);}
    .mk-state.soon{color:var(--muted);}

    /* forms */
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px;}
    .field{display:flex;flex-direction:column;gap:5px;}
    .field.full{grid-column:1/-1;}
    .field label{font-size:11.5px;font-weight:700;color:var(--sub);}
    .inp{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text);font-size:13px;font-family:inherit;transition:border-color .12s,box-shadow .12s;}
    .inp:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-dim);}
    textarea.inp{min-height:84px;font-family:var(--ff-mono,ui-monospace,Menlo,monospace);font-size:12px;resize:vertical;}
    .tip{font-size:11px;color:var(--muted);}
    .form-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;}
    .form-foot .spacer{flex:1;}

    /* advanced disclosure */
    .adv{border-top:1px solid var(--line);margin-top:16px;}
    .adv summary{cursor:pointer;list-style:none;font-size:12.5px;font-weight:700;color:var(--sub);padding:13px 0 4px;user-select:none;}
    .adv summary::-webkit-details-marker{display:none;}
    .adv summary:before{content:"＋";color:var(--muted);margin-right:7px;font-weight:600;}
    .adv[open] summary:before{content:"−";}
    .adv-body{padding:6px 0 4px;}

    /* table */
    table{width:100%;border-collapse:collapse;font-size:13px;}
    th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);}
    th{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;}
    td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;}
    .tag{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;}
    .tag.pending{background:var(--amber-soft);color:var(--warn);}
    .tag.accepted{background:var(--green-dim);color:var(--green);}
    .tag.dismissed{background:var(--danger-soft);color:var(--red);}

    /* segmented control */
    .seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:3px;gap:3px;margin-bottom:16px;}
    .seg button{border:0;background:transparent;color:var(--muted);font-weight:700;font-size:12.5px;font-family:inherit;padding:7px 16px;border-radius:8px;cursor:pointer;}
    .seg button.on{background:var(--card);color:var(--green);box-shadow:0 1px 3px rgba(0,0,0,.1);}

    .empty{color:var(--muted);font-size:13px;padding:16px 2px;}
    .result{border:1px solid var(--line);border-radius:11px;padding:14px;background:var(--bg);}
    .result .row{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;margin-bottom:4px;}
    .result b{font-weight:700;color:var(--sub);}
    .pos{color:var(--green);font-weight:700;} .neg{color:var(--red);font-weight:700;}
    .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:11px 18px;border-radius:11px;font-size:13px;font-weight:600;opacity:0;transition:opacity .2s;z-index:80;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.25);}
    .toast.show{opacity:1;}
    @media(max-width:560px){.form-grid{grid-template-columns:1fr;}}
    @media(prefers-reduced-motion:reduce){*{transition:none!important;}}