.num { font-family: Inter, "Noto Sans TC", sans-serif; font-variant-numeric: tabular-nums; }
.card { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 0 0 1px rgba(15, 23, 42, .05); }
.btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 9px; padding: 7px 13px; font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: background .15s; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: #0b8a6b; color: #fff; } .btn-primary:hover:not(:disabled) { background: #0b5d4b; }
.btn-ghost { background: #fff; color: #334155; box-shadow: inset 0 0 0 1px #cbd5e1; } .btn-ghost:hover:not(:disabled) { background: #f8fafc; }
.btn-danger { background: #fff; color: #b91c1c; box-shadow: inset 0 0 0 1px #fca5a5; } .btn-danger:hover:not(:disabled) { background: #fef2f2; }
.btn-sm { padding: 4px 9px; font-size: 12.5px; border-radius: 7px; }
.input, .select { border: 1px solid #cbd5e1; border-radius: 9px; padding: 7px 10px; font-size: 14px; background: #fff; outline: none; width: 100%; }
.input:focus, .select:focus { border-color: #10a37f; box-shadow: 0 0 0 3px rgba(16, 163, 127, .15); }
.label { display: block; font-size: 12.5px; font-weight: 700; color: #475569; margin-bottom: 4px; }
.tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.tag-gray { background: #f1f5f9; color: #475569; } .tag-green { background: #dcfce7; color: #166534; } .tag-amber { background: #fef3c7; color: #92400e; }
.tag-red { background: #fee2e2; color: #991b1b; } .tag-blue { background: #dbeafe; color: #1e40af; } .tag-teal { background: #ccfbf1; color: #115e59; } .tag-violet { background: #ede9fe; color: #5b21b6; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
table.tbl th { position: sticky; top: 0; background: #f8fafc; color: #475569; font-weight: 700; text-align: left; padding: 9px 10px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; z-index: 1; }
table.tbl td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
table.tbl tr:hover td { background: #f8fafc; }
table.tbl td.r, table.tbl th.r { text-align: right; }
.tbl-wrap { overflow: auto; max-height: calc(100vh - 230px); }
.side a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; color: #cbd5e1; font-size: 14px; font-weight: 600; }
.side a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.side a.on { background: #0b8a6b; color: #fff; }
.side .grp { font-size: 11px; font-weight: 800; color: #64748b; letter-spacing: .08em; padding: 14px 12px 4px; }
.side svg { width: 18px; height: 18px; flex-shrink: 0; }
.collapsed .side .txt, .collapsed .side .grp { display: none; }
.collapsed aside { width: 64px !important; }
.toast { position: fixed; right: 24px; bottom: 24px; background: #0f172a; color: #fff; padding: 11px 16px; border-radius: 10px; font-size: 14px; z-index: 100; max-width: 420px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.toast.err { background: #b91c1c; }
.modal-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow: auto; }
.modal { background: #fff; border-radius: 16px; width: 100%; max-width: 560px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.modal.wide { max-width: 920px; }
.drawer-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 70; }
.drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(720px, 100vw); background: #f8fafc; z-index: 71; overflow: auto; box-shadow: -10px 0 30px rgba(0,0,0,.15); }
.kpi .v { font-size: 26px; font-weight: 800; }
/* 組織圖 */
.org { display: inline-flex; flex-direction: column; align-items: center; }
.org ul { display: flex; justify-content: center; padding-top: 22px; position: relative; margin: 0; padding-left: 0; }
.org li { list-style: none; display: flex; flex-direction: column; align-items: center; position: relative; padding: 22px 6px 0; }
.org li::before, .org li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 2px solid #cbd5e1; }
.org li::after { right: auto; left: 50%; border-left: 2px solid #cbd5e1; }
.org li:only-child::before, .org li:only-child::after { display: none; }
.org li:only-child { padding-top: 0; }
.org li:first-child::before, .org li:last-child::after { border: 0 none; }
.org li:last-child::before { border-right: 2px solid #cbd5e1; border-radius: 0 8px 0 0; }
.org li:first-child::after { border-radius: 8px 0 0 0; }
.org ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #cbd5e1; height: 22px; }
.org > ul { padding-top: 0; }
.onode { background: #fff; border: 2px solid #e2e8f0; border-radius: 12px; padding: 8px 10px; min-width: 128px; text-align: center; cursor: pointer; position: relative; transition: box-shadow .15s, border-color .15s; }
.onode:hover { border-color: #10a37f; box-shadow: 0 4px 14px rgba(16, 163, 127, .18); }
.onode.sel { border-color: #0b8a6b; box-shadow: 0 0 0 3px rgba(16, 163, 127, .25); }
.onode.drop { border-color: #f59e0b; background: #fffbeb; }
.onode.st-pending { border-style: dashed; }
.onode.st-suspended, .onode.st-left { opacity: .55; }
.onode.hit { box-shadow: 0 0 0 3px #f59e0b; }
.onode .tg { position: absolute; top: -9px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; white-space: nowrap; background: #0b8a6b; color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 1px; }
.org-canvas { overflow: auto; height: calc(100vh - 210px); background-image: radial-gradient(#e2e8f0 1px, transparent 1px); background-size: 18px 18px; border-radius: 14px; }