.hubx {
      --background: #FCFBF8; --foreground: #33302E; --border: #EFEBE7;
      --muted: rgba(38,24,17,0.04); --muted-foreground: #615D5A; --card: rgba(255,255,255,0.5);
      --accent: #52B26E; --accent-muted: #8FCB9F; --destructive: #D04A3F;
      --gold: #5A7A9A; --gridline: #EFEAE8; --axis-text: #8B7F84;
      --text-base: 14px; --text-label: 12px; --radius-card: 8px;
    }
.hubx * { box-sizing: border-box; }
.hubx { margin: 0; padding: 0; background: var(--background); }
.hubx { margin: 0; padding: 0 0 0 55px; min-height: 100vh; background: var(--background); color: var(--foreground); font-family: 'Inter', system-ui, sans-serif; font-size: var(--text-base); font-weight: 300; -webkit-font-smoothing: antialiased; }
.hubx .app-rail { position: fixed; top: 0; left: 0; width: 60px; height: 100vh; border-right: 1px solid var(--border); background: #FDFCFA; display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 4px; z-index: 130; }
.hubx .app-rail .rail-logo { width: 32px; height: 32px; border-radius: 50%; background: #D7322A; flex-shrink: 0; margin-bottom: 12px; }
.hubx .rail-btn { width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); cursor: pointer; border: none; background: none; flex-shrink: 0; }
.hubx .rail-btn:hover { background: var(--muted); color: var(--foreground); }
.hubx .rail-btn.active { background: var(--muted); color: var(--foreground); }
.hubx .rail-btn svg { width: 20px; height: 20px; }
.hubx .rail-divider { width: 24px; height: 1px; background: var(--border); margin: 8px 0; flex-shrink: 0; }
.hubx .rail-spacer { flex: 1; }
.hubx .rail-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--muted); color: var(--muted-foreground); font-size: 11px; font-weight: 500; display: flex; align-items: center; justify-content: center; margin-top: 8px; flex-shrink: 0; }
.hubx .container { max-width: 1200px; margin: 0 auto; padding: 40px 32px 80px; }
.hubx .page-header { padding-bottom: 12px; margin-bottom: 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.hubx .header-left { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hubx .header-left .hub-logo { height: 25px; width: auto; flex-shrink: 0; display: block; }
.hubx .header-titles { min-width: 0; }
.hubx .header-titles h1 { white-space: nowrap; }
.hubx .header-left .eyebrow { font-size: var(--text-label); font-weight: 300; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 2px; display: flex; align-items: center; gap: 8px; }
.hubx .header-left h1 { font-size: 26px; font-weight: 500; margin: 0 0 4px; letter-spacing: -0.01em; }
.hubx .header-left .sub { font-size: var(--text-base); color: var(--muted-foreground); }
.hubx .header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hubx .header-btn { width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; }
.hubx .header-btn:hover { border-color: #C9C0BD; background: var(--muted); color: var(--foreground); }
.hubx .header-btn:disabled { cursor: default; opacity: 0.5; }
.hubx .header-btn:disabled:hover { border-color: var(--border); background: var(--card); color: var(--muted-foreground); }
.hubx .header-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.hubx .status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-label); font-weight: 500; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted-foreground); }
.hubx .status-pill.synced { background: rgba(82,178,110,0.10); border-color: rgba(82,178,110,0.3); color: #2E6E48; }
.hubx .s-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.hubx .s-dot.pulse { animation: blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
.hubx .hub-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.hubx .hub-tile { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px 18px; background: var(--card); cursor: pointer; transition: border-color 0.15s; display: flex; flex-direction: column; gap: 8px; }
.hubx .hub-tile:hover { border-color: #C9C0BD; }
.hubx .hub-tile-head { display: flex; align-items: center; gap: 7px; }
.hubx .hub-tile-head svg { width: 14px; height: 14px; color: var(--muted-foreground); flex-shrink: 0; }
.hubx .hub-tile-head .ht-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); font-weight: 500; }
.hubx .hub-tile .ht-value { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.hubx .hub-tile .ht-value.good { color: var(--accent); }
.hubx .hub-tile .ht-value.warn { color: var(--gold); }
.hubx .hub-tile .ht-sub { font-size: 11px; color: var(--muted-foreground); line-height: 1.4; }
.hubx .prompt-bar { margin-bottom: 16px; }
.hubx .prompt-input { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); padding: 11px 12px; transition: border-color 0.15s, box-shadow 0.15s; }
.hubx .prompt-input:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(90,122,154,0.10); }
.hubx .prompt-add { flex-shrink: 0; width: 32px; height: 32px; border-radius: 6px; border: none; background: transparent; color: var(--muted-foreground); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hubx .prompt-add:hover { background: var(--muted); color: var(--foreground); }
.hubx .prompt-add svg { width: 18px; height: 18px; }
.hubx .prompt-input input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 14px; font-weight: 300; color: var(--foreground); min-width: 0; padding-left: 2px; }
.hubx .prompt-input input::placeholder { color: var(--muted-foreground); }
.hubx .prompt-send { flex-shrink: 0; width: 32px; height: 32px; border-radius: 6px; border: none; background: var(--foreground); color: var(--background); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hubx .prompt-send:hover { background: #4a4744; }
.hubx .prompt-send svg { width: 15px; height: 15px; }
.hubx .hub-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 38px; overflow-x: auto; overflow-y: hidden; }
.hubx .hub-tab { background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 9px 14px; font-size: 13px; font-weight: 500; color: var(--muted-foreground); cursor: pointer; font-family: inherit; white-space: nowrap; }
.hubx .hub-tab:hover { color: var(--foreground); }
.hubx .hub-tab.active { color: var(--foreground); border-bottom-color: var(--foreground); }
.hubx .hub-section { display: none; }
.hubx .hub-section.active { display: block; }
.hubx .hub-section .drawer-title-row { display: none; }
.hubx .hub-section .drawer-actions { display: none; }
.hubx .hub-section .drawer-summary { margin-top: 0; }
.hubx .about-details { margin-bottom: 22px; }
.hubx .ad-row { display: grid; grid-template-columns: 132px 1fr; gap: 16px; padding: 8px 0; align-items: start; font-size: 13.5px; }
.hubx .ad-label { color: var(--muted-foreground); }
.hubx .ad-val { color: var(--foreground); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hubx .ad-val svg { width: 14px; height: 14px; color: var(--muted-foreground); flex-shrink: 0; }
.hubx .ad-val .ad-sub { color: var(--muted-foreground); }
.hubx .ad-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--muted); color: var(--muted-foreground); font-size: 9px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; }
.hubx .ad-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--muted); border-radius: 6px; padding: 3px 11px; font-size: 12.5px; color: var(--foreground); }
.hubx .ad-chip.ok { background: rgba(82,178,110,0.10); color: #2E6E48; }
.hubx .ad-chip.ok svg { color: #2E6E48; width: 13px; height: 13px; }
.hubx .ad-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.hubx .ad-members { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin: 8px 0 6px; }
.hubx .ad-people { display: flex; align-items: center; }
.hubx .ad-people .av { width: 25px; height: 25px; border-radius: 50%; background: var(--muted); color: var(--muted-foreground); font-size: 9px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--background); margin-left: -5px; }
.hubx .ad-people .av:first-child { margin-left: 0; }
.hubx .ad-groups { display: flex; flex-wrap: wrap; gap: 8px; }
.hubx .ad-group { font-size: 12.5px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); }
.hubx .about-cols { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; margin-bottom: 22px; align-items: start; }
.hubx .about-cols .about-details { margin-bottom: 0; }
.hubx .about-cols .about-col:nth-child(2) { border-left: 1px solid var(--border); padding-left: 40px; }
.hubx .about-cols .ad-members { margin-top: 0; }
.hubx .member-list { list-style: none; margin: 0; padding: 0; }
.hubx .member-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.hubx .member-list li:last-child { border-bottom: none; }
.hubx .member-list .m-name { display: flex; align-items: center; gap: 9px; color: var(--foreground); min-width: 0; }
.hubx .member-list .m-av { width: 22px; height: 22px; border-radius: 50%; background: var(--muted); color: var(--muted-foreground); font-size: 8px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hubx .member-list .m-role { color: var(--muted-foreground); font-size: 12px; white-space: nowrap; flex-shrink: 0; }
.hubx .member-showall { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-top: 12px; font-size: 12.5px; font-weight: 500; color: var(--foreground); text-decoration: none; }
.hubx .member-showall svg { width: 13px; height: 13px; transition: transform 0.15s; }
.hubx .member-showall:hover { text-decoration: underline; }
.hubx .member-showall:hover svg { transform: translateX(2px); }
.hubx .about-cols__head { font-size: 11px; font-weight: 300; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin: 0 0 12px; line-height: 1.2; }
.hubx .gl-add { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); background: transparent; border: 1px dashed var(--border); border-radius: 6px; padding: 8px 14px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.hubx .gl-add:hover { border-color: #C9C0BD; color: var(--foreground); background: var(--muted); }
.hubx .gl-add svg { width: 14px; height: 14px; flex-shrink: 0; }
.hubx .scrim { position: fixed; inset: 0; background: rgba(38,24,17,0.28); z-index: 200; display: none; align-items: flex-start; justify-content: center; padding: 64px 20px; opacity: 0; transition: opacity 0.16s ease; }
.hubx .scrim.open { display: flex; opacity: 1; }
.hubx .modal { width: 100%; max-width: 460px; background: #FFFEFC; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 64px rgba(38,24,17,0.22); overflow: hidden; transform: translateY(8px); transition: transform 0.18s cubic-bezier(0.2,0,0,1); }
.hubx .scrim.open .modal { transform: none; }
.hubx .modal-head { padding: 22px 24px 0; }
.hubx .modal-head h2 { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.hubx .modal-head p { font-size: 13px; color: var(--muted-foreground); margin: 6px 0 0; line-height: 1.5; font-weight: 300; }
.hubx .modal-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.hubx .mfield { display: flex; flex-direction: column; gap: 7px; }
.hubx .mfield label { font-size: 13px; font-weight: 500; color: var(--foreground); }
.hubx .inp { width: 100%; font-family: inherit; font-size: 14px; font-weight: 300; color: var(--foreground); background: #FFFEFC; border: 1px solid var(--border); border-radius: 8px; padding: 11px 13px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.hubx .inp::placeholder { color: var(--muted-foreground); }
.hubx .inp:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(90,122,154,0.10); }
.hubx textarea.inp { resize: vertical; min-height: 84px; line-height: 1.55; }
.hubx .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); background: rgba(38,24,17,0.015); }
.hubx .modal-foot .btn { font-size: 13.5px; padding: 9px 16px; border-radius: 8px; }
.hubx .ctx-graph { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); margin-bottom: 24px; overflow: hidden; }
.hubx .ctx-graph__stage { position: relative; height: 440px; }
.hubx .cg-svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; --label-opacity: 1; --label-font: 13px; }
.hubx .cg-svg:active { cursor: grabbing; }
.hubx .cg-link { stroke: #D9D2CC; stroke-width: 1.2; transition: stroke 0.12s, opacity 0.12s; }
.hubx .cg-link.linked { stroke: #33302E; stroke-width: 1.6; }
.hubx .cg-svg.has-focus .cg-link:not(.linked) { opacity: 0.3; }
.hubx .cg-link.group-off { opacity: 0.12; }
.hubx .cg-node { cursor: pointer; }
.hubx .cg-node circle { stroke: var(--background); stroke-width: 2; transition: opacity 0.12s; }
.hubx .cg-node text { fill: var(--foreground); font-family: 'Inter', sans-serif; font-size: var(--label-font); font-weight: 400; opacity: var(--label-opacity); pointer-events: none; }
.hubx .cg-svg.has-focus .cg-node:not(.focus):not(.linked) { opacity: 0.28; }
.hubx .cg-node.focus text { font-weight: 500; }
.hubx .cg-node.group-off { opacity: 0.16; }
.hubx .cg-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 11px 16px; border-top: 1px solid var(--border); }
.hubx .cg-lg { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted-foreground); }
.hubx .cg-sw { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.hubx .cg-hint { position: absolute; bottom: 10px; left: 14px; font-size: 11px; color: var(--muted-foreground); pointer-events: none; }
@media (max-width: 1024px) {.hubx .about-cols { grid-template-columns: 1fr; gap: 24px; }
.hubx .about-cols .about-col:nth-child(2) { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 18px; }
.hubx .ctx-graph__stage { height: 360px; }}
.hubx .section-label { font-size: var(--text-label); font-weight: 300; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; }
.hubx .section-label .sl-meta { font-size: 11px; }
.hubx .coll-bar { position: relative; display: flex; align-items: center; justify-content: center; padding: 8px 44px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 0 22px; }
.hubx .coll-bar__main { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.hubx .coll-bar__ico { display: grid; place-items: center; color: var(--muted-foreground); flex-shrink: 0; }
.hubx .coll-bar__ico svg { width: 15px; height: 15px; }
.hubx .coll-bar__title { font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hubx .coll-bar__panel { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 6px; border: 1px solid transparent; background: none; color: var(--muted-foreground); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; }
.hubx .coll-bar__panel svg { width: 16px; height: 16px; }
.hubx .coll-bar__panel:hover { background: var(--muted); color: var(--foreground); border-color: var(--border); }
.hubx .coll-bar__menu-wrap { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.hubx .coll-bar__more { width: 28px; height: 28px; border-radius: 6px; border: 1px solid transparent; background: none; color: var(--muted-foreground); cursor: pointer; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; }
.hubx .coll-bar__more:hover { background: var(--muted); color: var(--foreground); border-color: var(--border); }
.hubx .coll-menu { position: absolute; right: 0; top: 36px; background: #FDFCFA; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 28px rgba(38,24,17,0.12); padding: 6px; min-width: 168px; display: none; z-index: 40; }
.hubx .coll-menu.open { display: block; }
.hubx .coll-menu button { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: none; padding: 9px 12px; font-size: 13.5px; color: var(--foreground); cursor: pointer; border-radius: 6px; font-family: inherit; text-align: left; }
.hubx .coll-menu button:hover { background: var(--muted); }
.hubx .coll-menu button svg { width: 15px; height: 15px; color: var(--muted-foreground); flex-shrink: 0; }
.hubx .coll-menu button.danger { color: var(--destructive); }
.hubx .coll-menu button.danger:hover { background: rgba(208,74,63,0.07); }
.hubx .coll-menu button.danger svg { color: var(--destructive); }
.hubx .coll-menu__sep { height: 1px; background: var(--border); margin: 5px 6px; }
.hubx .card-grid { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.hubx .card { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px 28px; background: var(--card); display: grid; grid-template-columns: 2.5fr 1fr; gap: 32px; cursor: pointer; transition: border-color 0.15s; }
.hubx .card:hover { border-color: #C9C0BD; }
.hubx .card-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hubx .card-title-wrap { min-width: 0; }
.hubx .card-title { font-size: 18px; font-weight: 500; margin: 0; letter-spacing: -0.01em; }
.hubx .card-sub { font-size: 11px; color: var(--muted-foreground); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.05em; }
.hubx .card-narrative { font-size: 13.5px; line-height: 1.55; color: #000; font-weight: 400; }
.hubx .card-narrative .nw { color: var(--gold); font-weight: 400; }
.hubx .card-narrative .nb { color: var(--destructive); font-weight: 400; }
.hubx .card-narrative .ng { color: var(--accent); font-weight: 400; }
.hubx .card-meta { display: none; }
.hubx .card-side { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--border); padding-left: 28px; }
.hubx .card-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hubx .card-pill { font-size: 10px; font-weight: 500; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; }
.hubx .card-pill.good { background: rgba(82,178,110,0.10); color: #2E6E48; }
.hubx .card-pill.warn { background: rgba(90,122,154,0.10); color: #3A5A72; }
.hubx .card-pill.bad { background: rgba(208,74,63,0.09); color: #7A2E28; }
.hubx .card-pill.neutral { background: var(--muted); color: var(--muted-foreground); }
.hubx .card-stats { display: flex; flex-direction: column; gap: 12px; }
.hubx .card-stat { display: grid; grid-template-columns: minmax(40px, auto) 1fr; align-items: baseline; column-gap: 14px; }
.hubx .card-stat .cs-val { order: -1; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; text-align: right; white-space: nowrap; }
.hubx .card-stat .cs-label { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.35; }
.hubx .card-stat .cs-val.good { color: var(--accent); }
.hubx .card-stat .cs-val.warn { color: var(--gold); }
.hubx .card-stat .cs-val.bad { color: var(--destructive); }
@media (max-width: 900px) {.hubx .container { padding: 32px 24px 64px; }
.hubx .card { grid-template-columns: 1.9fr 1fr; gap: 24px; padding: 16px 24px; }
.hubx .hub-tiles { grid-template-columns: repeat(2, 1fr); }
.hubx .page-header { flex-wrap: wrap; align-items: flex-start; }
.hubx .header-right { width: 100%; justify-content: flex-start; flex-wrap: wrap; }}
@media (max-width: 640px) {.hubx .container { padding: 24px 16px 48px; }
.hubx .page-header { flex-direction: column; gap: 12px; align-items: flex-start; }
.hubx .header-right { width: 100%; margin-top: 0; flex-wrap: wrap; gap: 6px; }
.hubx .header-btn, .hubx .status-pill { font-size: 11px; padding: 4px 10px; }
.hubx .header-left h1 { font-size: 22px; }
.hubx .section-label { flex-direction: column; align-items: flex-start; gap: 4px; }
.hubx .card { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
.hubx .card-side { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 18px; justify-content: flex-start; }}
/* Cards rendered inside the Model/Projects canvas sit next to the 210px
   section menu, so the canvas width — not the viewport — decides when the
   card's side column (Owner / Status) stops fitting and stacks below. */
@container mdl-canvas (max-width: 620px) {
  .hubx .card { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .hubx .card-side { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 18px; justify-content: flex-start; }
}
.hubx .drawer-scrim { position: fixed; inset: 0; background: rgba(38,24,17,0.25); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 90; }
.hubx .drawer-scrim.open { opacity: 1; pointer-events: auto; }
.hubx .drawer { position: fixed; top: 0; right: 0; width: min(900px, 92vw); height: 100vh; background: var(--background); border-left: 1px solid var(--border); box-shadow: none; transform: translateX(100%); transition: transform 0.3s ease, box-shadow 0.3s ease; z-index: 100; display: flex; flex-direction: column; }
.hubx .drawer.open { transform: translateX(0); box-shadow: -8px 0 32px rgba(38,24,17,0.08); }
.hubx .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.hubx .drawer-crumb { font-size: 11px; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; }
.hubx .drawer-close { background: none; border: none; cursor: pointer; padding: 6px; color: var(--muted-foreground); font-size: 18px; line-height: 1; border-radius: 4px; }
.hubx .drawer-close:hover { background: var(--muted); color: var(--foreground); }
.hubx .drawer-icon-btn { background: none; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground); }
.hubx .drawer-icon-btn:hover { border-color: #C9C0BD; color: var(--foreground); background: var(--muted); }
.hubx .drawer-icon-btn svg { width: 15px; height: 15px; }
.hubx .record-full { position: fixed; top: 0; right: 0; bottom: 0; left: 55px; background: var(--background); z-index: 120; display: none; flex-direction: column; }
.hubx .record-full.open { display: flex; }
.hubx .rf-header { display: flex; align-items: center; gap: 14px; padding: 13px 28px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.hubx .rf-back { background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--muted-foreground); padding: 4px 8px; border-radius: 6px; }
.hubx .rf-back:hover { background: var(--muted); color: var(--foreground); }
.hubx .rf-icon { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); flex-shrink: 0; }
.hubx .rf-icon svg { width: 18px; height: 18px; }
.hubx .rf-titles { min-width: 0; }
.hubx .rf-crumb { font-size: 12px; color: var(--muted-foreground); }
.hubx .rf-title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hubx .rf-meta { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--muted-foreground); flex-shrink: 0; }
.hubx .rf-meta .rf-check { width: 16px; height: 16px; color: var(--accent); }
.hubx .rf-menu-wrap { position: relative; }
.hubx .rf-more { cursor: pointer; font-weight: 500; letter-spacing: 1px; color: var(--muted-foreground); background: none; border: 1px solid transparent; border-radius: 6px; padding: 2px 8px; font-family: inherit; }
.hubx .rf-more:hover { background: var(--muted); border-color: var(--border); color: var(--foreground); }
.hubx .rf-menu { position: absolute; right: 0; top: 32px; background: #FDFCFA; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 28px rgba(38,24,17,0.12); padding: 6px; min-width: 196px; display: none; z-index: 10; }
.hubx .rf-menu.open { display: block; }
.hubx .rf-menu button { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: none; padding: 9px 12px; font-size: 13.5px; color: var(--foreground); cursor: pointer; border-radius: 6px; font-family: inherit; text-align: left; }
.hubx .rf-menu button:hover { background: var(--muted); }
.hubx .rf-menu button svg { width: 16px; height: 16px; color: var(--muted-foreground); flex-shrink: 0; }
.hubx .rf-body { flex: 1; overflow: hidden; display: flex; }
.hubx .rf-main { flex: 1; overflow-y: auto; min-width: 0; }
.hubx .rf-inner { max-width: 1100px; margin: 0 auto; padding: 28px 32px 64px; }
.hubx .rf-inner .drawer-title-row { display: none; }
.hubx .rf-side { width: 380px; flex-shrink: 0; border-left: 1px solid var(--border); background: #FDFCFA; overflow-y: auto; display: none; }
.hubx .rf-side.open { display: block; }
.hubx .rf-side-head { display: flex; align-items: center; gap: 12px; padding: 15px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: #FDFCFA; }
.hubx .rf-side-head span { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.hubx .rf-side-collapse { background: none; border: none; cursor: pointer; color: var(--muted-foreground); padding: 4px; border-radius: 6px; display: inline-flex; }
.hubx .rf-side-collapse:hover { background: var(--muted); color: var(--foreground); }
.hubx .rf-side-collapse svg { width: 17px; height: 17px; }
.hubx .rf-side-body { padding: 20px 22px 40px; }
.hubx .cm-item { padding: 0 0 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.hubx .cm-item:last-child { border-bottom: none; margin-bottom: 0; }
.hubx .cm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.hubx .cm-name { font-size: 13px; font-weight: 500; }
.hubx .cm-time { font-size: 11px; color: var(--muted-foreground); margin-left: auto; }
.hubx .cm-text { font-size: 13px; line-height: 1.5; color: var(--foreground); }
.hubx .ln-step { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 12px 14px; background: var(--card); }
.hubx .ln-k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 4px; }
.hubx .ln-v { font-size: 13px; color: var(--foreground); line-height: 1.4; }
.hubx .ln-arrow { text-align: center; color: var(--muted-foreground); font-size: 14px; padding: 6px 0; }
.hubx .vh-item { position: relative; padding: 0 0 22px 24px; border-left: 1px solid var(--border); margin-left: 5px; }
.hubx .vh-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.hubx .vh-dot { position: absolute; left: -5px; top: 4px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--muted-foreground); background: var(--card); box-sizing: border-box; }
.hubx .vh-item.current .vh-dot { background: var(--foreground); border-color: var(--foreground); }
.hubx .vh-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hubx .vh-ver { font-size: 14px; font-weight: 500; }
.hubx .vh-badge { font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; background: var(--muted); color: var(--muted-foreground); padding: 2px 7px; border-radius: 4px; }
.hubx .vh-time { font-size: 12px; color: var(--muted-foreground); }
.hubx .vh-author { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--foreground); margin: 7px 0 6px; }
.hubx .vh-desc { font-size: 13px; line-height: 1.5; color: var(--foreground); }
@media (max-width: 760px) {.hubx .rf-side { position: fixed; top: 0; right: 0; height: 100vh; width: min(380px, 88vw); box-shadow: -8px 0 28px rgba(38,24,17,0.12); z-index: 5; }}
.hubx .drawer-body { flex: 1; overflow-y: auto; padding: 28px 32px 60px; }
.hubx .drawer h1 { font-size: 24px; font-weight: 500; margin: 0 0 4px; letter-spacing: -0.01em; }
.hubx .drawer .drawer-sub { font-size: var(--text-base); color: var(--muted-foreground); }
.hubx .drawer-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.hubx .drawer-title-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 6px; }
.hubx .drawer-summary { padding: 4px 0 8px; margin-bottom: 24px; }
.hubx .drawer-summary p { margin: 0; font-size: 14px; line-height: 1.6; color: #000; font-weight: 400; }
.hubx .drawer-summary p + p { margin-top: 10px; }
.hubx .drawer-summary .nw { color: var(--gold); font-weight: 400; }
.hubx .drawer-summary .ng { color: var(--accent); font-weight: 400; }
.hubx .drawer-summary .nb { color: var(--destructive); font-weight: 400; }
.hubx .drawer-section-label { font-size: 11px; font-weight: 300; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin: 24px 0 12px; display: flex; align-items: center; justify-content: space-between; }
.hubx .drawer-section-label .dsl-meta { font-size: 11px; }
.hubx .drawer-stat-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); overflow: hidden; margin-bottom: 20px; }
.hubx .drawer-stat-cell { padding: 16px 18px; border-right: 1px solid var(--border); }
.hubx .drawer-stat-cell:last-child { border-right: none; }
.hubx .drawer-stat-cell .dsc-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 6px; }
.hubx .drawer-stat-cell .dsc-val { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hubx .drawer-stat-cell .dsc-val.good { color: var(--accent); }
.hubx .drawer-stat-cell .dsc-val.warn { color: var(--gold); }
.hubx .drawer-stat-cell .dsc-val.bad { color: var(--destructive); }
.hubx .drawer-stat-cell .dsc-sub { font-size: 11px; color: var(--muted-foreground); margin-top: 3px; }
.hubx .drawer-two-col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-bottom: 20px; }
.hubx .drawer-panel { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px 20px; background: var(--card); }
.hubx .drawer-panel-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.hubx .drawer-panel-head h3 { font-size: 13.5px; font-weight: 500; margin: 0; }
.hubx .drawer-panel-head .dph-sub { font-size: 11px; color: var(--muted-foreground); }
.hubx .drawer-chart-wrap { position: relative; height: 200px; }
.hubx table.dr-incidents { width: 100%; border-collapse: collapse; }
.hubx table.dr-incidents th { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); padding: 6px 0; border-bottom: 1px solid var(--border); text-align: left; }
.hubx table.dr-incidents th + th { padding-left: 12px; }
.hubx table.dr-incidents td { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 400; color: var(--foreground); vertical-align: top; }
.hubx table.dr-incidents td + td { padding-left: 12px; }
.hubx table.dr-incidents tbody tr:last-child td { border-bottom: none; }
.hubx .dr-inc-date { color: var(--muted-foreground); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hubx .dr-inc-cat { display: inline-flex; font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.hubx .dr-inc-cat.near-miss { background: rgba(90,122,154,0.10); color: #3A5A72; }
.hubx .dr-inc-title { font-weight: 500; margin-bottom: 4px; color: var(--foreground); }
.hubx .dr-inc-desc { color: var(--foreground); font-size: 12.5px; font-weight: 400; line-height: 1.5; }
.hubx .dr-inc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hubx .dr-inc-tag { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 4px; background: var(--muted); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.hubx .dr-inc-tag.active { background: rgba(208,74,63,0.09); color: #7A2E28; }
.hubx .lineage-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); font-size: 13px; flex-wrap: wrap; margin-bottom: 20px; }
.hubx .lineage-row .lr-step { color: var(--muted-foreground); }
.hubx .lineage-row .lr-step strong { color: var(--foreground); font-weight: 500; }
.hubx .lineage-row .lr-sep { color: #C9C0BD; font-size: 12px; }
.hubx .lineage-row .lr-current { color: var(--foreground); font-weight: 500; padding: 2px 8px; background: var(--muted); border-radius: 4px; }
.hubx .drawer-actions { display: flex; gap: 10px; padding-top: 20px; border-top: 1px solid var(--border); margin-top: 8px; }
.hubx .btn { font-size: 12px; font-weight: 500; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); cursor: pointer; }
.hubx .btn:hover { border-color: #C9C0BD; }
.hubx .btn.primary { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.hubx .pdf-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border: 1px solid var(--border); border-bottom: none; border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--muted); font-size: 12px; }
.hubx .pdf-toolbar .pt-name { display: flex; align-items: center; gap: 8px; color: var(--muted-foreground); min-width: 0; }
.hubx .pdf-toolbar .pt-name strong { color: var(--foreground); font-weight: 500; }
.hubx .pdf-toolbar .pt-link { width: 13px; height: 13px; color: var(--muted-foreground); flex-shrink: 0; }
.hubx .pdf-toolbar .egnyte-logo { height: 13px; width: auto; flex-shrink: 0; }
.hubx .pdf-toolbar .pt-file { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hubx .pdf-toolbar a { color: var(--foreground); font-weight: 500; font-size: 11px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.hubx .pdf-toolbar a:hover { text-decoration: underline; }
.hubx .pdf-viewer { border: 1px solid var(--border); border-radius: 0 0 var(--radius-card) var(--radius-card); background: var(--foreground); max-height: 660px; overflow-y: auto; padding: 0; display: flex; flex-direction: column; }
.hubx .pdf-viewer img { width: 100%; max-width: none; height: auto; display: block; background: #fff; }
.hubx .pdf-viewer img + img { border-top: 1px solid var(--foreground); }
.hubx .drawer-stat-row.compact .drawer-stat-cell { padding: 11px 14px; }
.hubx .drawer-stat-row.compact .dsc-label { margin-bottom: 4px; }
.hubx .drawer-stat-row.compact .dsc-val { font-size: 16px; }
.hubx .drawer-stat-row.compact .dsc-sub { font-size: 10px; margin-top: 2px; }
.hubx .lib-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.hubx .lib-search { flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 6px; padding: 7px 12px; background: var(--card); min-width: 0; }
.hubx .lib-search svg { width: 14px; height: 14px; color: var(--muted-foreground); flex-shrink: 0; }
.hubx .lib-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--foreground); width: 100%; }
.hubx .lib-search input::placeholder { color: var(--muted-foreground); }
.hubx .lib-tool { font-size: 12px; color: var(--muted-foreground); background: transparent; border: none; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 6px 4px; }
.hubx .lib-tool:hover { color: var(--foreground); }
.hubx .lib-tool svg { width: 11px; height: 11px; }
.hubx .lib-btn { font-size: 12px; font-weight: 500; padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--foreground); cursor: pointer; font-family: inherit; white-space: nowrap; }
.hubx .lib-btn:hover { border-color: #C9C0BD; }
.hubx .lib-add { width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--muted-foreground); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hubx .lib-add:hover { border-color: #C9C0BD; color: var(--foreground); }
.hubx .lib-add svg { width: 14px; height: 14px; }
.hubx table.lib { width: 100%; border-collapse: collapse; margin-top: 4px; }
.hubx table.lib th { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.hubx table.lib th.c, .hubx table.lib td.c { text-align: center; }
.hubx table.lib th.r, .hubx table.lib td.r { text-align: right; }
.hubx table.lib td { padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--foreground); vertical-align: middle; }
.hubx table.lib tbody tr:last-child td { border-bottom: none; }
.hubx table.lib tbody tr.click { cursor: pointer; }
.hubx table.lib tbody tr:hover td { background: rgba(38,24,17,0.02); }
.hubx .lib-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hubx .lib-title .chev { width: 11px; height: 11px; color: var(--muted-foreground); flex-shrink: 0; }
.hubx .lib-title .chev.spacer { visibility: hidden; }
.hubx .lib-title .ic { width: 16px; height: 16px; color: var(--muted-foreground); flex-shrink: 0; }
.hubx .lib-title .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Folder rows (collapsible) + nested children */
.hubx tr[data-folder] { cursor: pointer; }
.hubx tr[data-folder] .lib-title .chev { visibility: visible; transition: transform 0.15s ease; transform: rotate(-90deg); }
.hubx tr[data-folder].folder-open .lib-title .chev { transform: rotate(0deg); }
.hubx tr.lib-sub .lib-title { padding-left: 24px; }
.hubx .lib-owner { width: 24px; height: 24px; border-radius: 50%; background: var(--muted); color: var(--muted-foreground); font-size: 9px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.02em; }
.hubx .lib-dash { color: #C9C0BD; }
.hubx .lib-check { color: var(--accent); width: 15px; height: 15px; vertical-align: middle; }
.hubx .lib-mod { color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
.hubx .lib-more { color: var(--muted-foreground); cursor: pointer; font-weight: 500; letter-spacing: 1px; }
.hubx .lib-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; font-size: 12px; color: var(--muted-foreground); }
.hubx .lib-pagesize { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; cursor: pointer; }
.hubx .lib-pager { display: flex; align-items: center; gap: 14px; }
.hubx .lib-pager .pg { cursor: pointer; }
.hubx .lib-pager .pg.num { border: 1px solid var(--border); border-radius: 6px; padding: 2px 9px; color: var(--foreground); }
.hubx .lib-layout { display: grid; grid-template-columns: 212px 1fr; gap: 28px; align-items: start; }
.hubx .lib-sidebar { display: flex; flex-direction: column; gap: 1px; }
.hubx .lib-side-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--foreground); }
.hubx .lib-side-item:hover { background: var(--muted); }
.hubx .lib-side-item.active { background: var(--muted); font-weight: 500; }
.hubx .lib-side-item svg { width: 15px; height: 15px; color: var(--muted-foreground); flex-shrink: 0; }
.hubx .lib-side-item .ls-name { white-space: nowrap; }
.hubx .lib-side-item .ls-count { margin-left: auto; font-size: 11px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.hubx .lib-side-group { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); padding: 6px 10px; margin-top: 14px; display: flex; align-items: center; gap: 6px; }
.hubx .lib-side-group svg { width: 11px; height: 11px; color: var(--muted-foreground); }
.hubx .lib-main { min-width: 0; }
@media (max-width: 700px) {.hubx .lib-layout { grid-template-columns: 1fr; gap: 16px; }}
.hubx .card.source, .hubx .card.output { user-select: none; }
.hubx .view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; padding: 2px; background: var(--card); }
.hubx .view-toggle button { background: transparent; border: none; padding: 5px 12px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); cursor: pointer; border-radius: 4px; font-family: inherit; }
.hubx .view-toggle button.active { background: var(--foreground); color: var(--background); }
.hubx .view-toggle button:not(.active):hover { color: var(--foreground); }
.hubx .data-view { display: none; }
.hubx .data-view.active { display: block; }
.hubx .report-view { display: block; }
.hubx .report-view.hidden { display: none; }
.hubx .data-meta-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-card); margin-bottom: 16px; font-size: 12px; }
.hubx .data-meta-bar .dm-left { display: flex; align-items: center; gap: 16px; color: var(--muted-foreground); }
.hubx .data-meta-bar .dm-left strong { color: var(--foreground); font-weight: 500; }
.hubx .data-meta-bar .dm-right { display: flex; align-items: center; gap: 12px; }
.hubx .data-meta-bar .dm-link { color: var(--foreground); font-weight: 500; font-size: 11px; }
.hubx .sheet-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 0; overflow-x: auto; }
.hubx .sheet-tab { padding: 9px 16px; font-size: 12px; color: var(--muted-foreground); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.hubx .sheet-tab:hover { color: var(--foreground); }
.hubx .sheet-tab.active { color: var(--foreground); font-weight: 500; border-bottom-color: var(--foreground); }
.hubx .sheet-wrap { border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-card) var(--radius-card); background: var(--card); overflow: auto; max-height: 60vh; }
.hubx table.sheet { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.hubx table.sheet thead th { position: sticky; top: 0; background: #F5F1EF; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 8px 10px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); text-align: left; white-space: nowrap; z-index: 1; }
.hubx table.sheet thead th.row-num { background: #EDE8E5; color: var(--muted-foreground); text-align: center; width: 36px; }
.hubx table.sheet tbody td { padding: 7px 10px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); color: var(--foreground); font-weight: 300; white-space: nowrap; }
.hubx table.sheet tbody td.row-num { background: #F5F1EF; color: var(--muted-foreground); text-align: center; font-size: 10px; width: 36px; position: sticky; left: 0; }
.hubx table.sheet tbody td.num { text-align: right; }
.hubx table.sheet tbody tr:hover td:not(.row-num) { background: rgba(38,24,17,0.02); }
.hubx table.sheet tbody td.header-cell { font-weight: 500; background: rgba(38,24,17,0.02); }
.hubx table.sheet tbody td.empty { color: var(--border); }
.hubx .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.hubx .photo-card { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--card); cursor: pointer; transition: border-color 0.15s; }
.hubx .photo-card:hover { border-color: #C9C0BD; }
.hubx .photo-thumb { width: 100%; aspect-ratio: 4/3; background: linear-gradient(135deg, #E8E0DC, #D4CAC4); display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; position: relative; overflow: hidden; }
.hubx .photo-thumb svg { width: 32px; height: 32px; opacity: 0.4; }
.hubx .photo-thumb.svc { background: linear-gradient(135deg, #C8B6A6, #A0856D); }
.hubx .photo-thumb.nvc { background: linear-gradient(135deg, #B8A99C, #8B7867); }
.hubx .photo-thumb.tunnel { background: linear-gradient(135deg, #6B5D54, #4A4039); }
.hubx .photo-thumb.drone { background: linear-gradient(135deg, #7A8AA0, #5A6B82); }
.hubx .photo-thumb.welding { background: linear-gradient(135deg, #C77A4D, #8B4E2D); }
.hubx .photo-thumb.pipe { background: linear-gradient(135deg, #9BA89A, #6E7C6D); }
.hubx .photo-meta { padding: 10px 12px; }
.hubx .photo-caption { font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--foreground); margin-bottom: 4px; }
.hubx .photo-tags { font-size: 10px; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 900px) {.hubx .drawer { width: 100vw; }
.hubx .drawer-stat-row { grid-template-columns: repeat(3, 1fr); }
.hubx .drawer-stat-cell:nth-child(3n) { border-right: none; }
.hubx .drawer-stat-cell:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
.hubx .drawer-two-col { grid-template-columns: 1fr; }
.hubx .photo-grid { grid-template-columns: repeat(2, 1fr); }
.hubx .daily-meta { grid-template-columns: repeat(3, 1fr); }
.hubx .daily-meta-cell:nth-child(3n) { border-right: none; }
.hubx .daily-meta-cell:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
.hubx .progress-strip { grid-template-columns: repeat(2, 1fr); }
.hubx .activity-grid { grid-template-columns: 1fr; }
.hubx .concept-grid { grid-template-columns: 1fr; }
.hubx .about-row { grid-template-columns: 1fr; gap: 4px; }
.hubx table.dr-incidents, .hubx table.resources, .hubx table.fin-table { display: block; overflow-x: auto; white-space: nowrap; }
.hubx table.dr-incidents td .dr-inc-desc, .hubx table.dr-incidents td .dr-inc-title { white-space: normal; }}
@media (max-width: 640px) {.hubx .drawer-body { padding: 20px 18px 48px; }
.hubx .drawer-stat-row { grid-template-columns: 1fr 1fr; }
/* Two-column wrap: restore the vertical divider on odd cells (the ≤900px
   3-col rules strip it from every 3rd cell) and draw horizontal dividers
   between wrapped rows — every cell except the last row's. */
.hubx .drawer-stat-cell { border-right: 1px solid var(--border) !important; border-bottom: 1px solid var(--border); }
.hubx .drawer-stat-cell:nth-child(2n) { border-right: none !important; }
.hubx .drawer-stat-cell:nth-child(2n+1):nth-last-child(-n+2),
.hubx .drawer-stat-cell:nth-child(2n+1):nth-last-child(-n+2) ~ .drawer-stat-cell { border-bottom: none; }
.hubx .drawer-actions { flex-wrap: wrap; }
.hubx .photo-grid { grid-template-columns: 1fr; }
.hubx .daily-meta { grid-template-columns: 1fr 1fr; }
.hubx .daily-meta-cell { border-right: 1px solid var(--border) !important; border-bottom: 1px solid var(--border); }
.hubx .daily-meta-cell:nth-child(2n) { border-right: none !important; }
.hubx .daily-meta-cell:nth-last-child(-n+2) { border-bottom: none; }
.hubx .progress-strip { grid-template-columns: 1fr 1fr; }
.hubx .drawer-title-row { flex-direction: column; align-items: flex-start; gap: 12px; }
.hubx .drawer h1 { font-size: 20px; }
.hubx .timeline-item { grid-template-columns: 56px 1fr; gap: 12px; }
.hubx .matrix table { font-size: 11px; }
.hubx .matrix td:first-child { font-size: 11px; }}
.hubx .brand-bar { display: none; }
.hubx .daily-meta { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); overflow: hidden; margin-bottom: 24px; }
.hubx .daily-meta-cell { padding: 14px 16px; border-right: 1px solid var(--border); }
.hubx .daily-meta-cell:last-child { border-right: none; }
.hubx .daily-meta-cell .dm-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 4px; }
.hubx .daily-meta-cell .dm-val { font-size: 13px; font-weight: 500; line-height: 1.35; }
.hubx .progress-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; }
.hubx .progress-item { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); }
.hubx .progress-item .pi-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 6px; }
.hubx .progress-item .pi-val { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hubx .progress-item .pi-bar { height: 3px; background: var(--border); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.hubx .progress-item .pi-fill { height: 3px; background: var(--foreground); border-radius: 2px; opacity: 0.6; }
.hubx .progress-item .pi-sub { font-size: 11px; color: var(--muted-foreground); margin-top: 4px; }
.hubx .activity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.hubx .activity-panel { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); }
.hubx .activity-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.hubx .activity-head h4 { font-size: 13px; font-weight: 500; margin: 0; }
.hubx .activity-shift { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); padding: 2px 7px; border-radius: 4px; background: var(--muted); }
.hubx .activity-shift.night { background: rgba(51,48,46,0.7); color: var(--background); }
.hubx .activity-list { margin: 0; padding-left: 18px; }
.hubx .activity-list li { font-size: 13px; line-height: 1.55; color: var(--foreground); font-weight: 300; margin-bottom: 4px; }
.hubx .activity-list li:last-child { margin-bottom: 0; }
.hubx table.resources { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.hubx table.resources th { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); padding: 8px 0; border-bottom: 1px solid var(--border); text-align: left; }
.hubx table.resources th + th { padding-left: 12px; }
.hubx table.resources th.num { text-align: right; }
.hubx table.resources td { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 300; }
.hubx table.resources td + td { padding-left: 12px; }
.hubx table.resources td.num { text-align: right; font-variant-numeric: tabular-nums; }
.hubx table.resources tbody tr:last-child td { border-bottom: none; }
.hubx table.resources .res-contractor { font-weight: 500; }
.hubx table.resources .res-equipment { font-size: 11px; color: var(--muted-foreground); font-style: italic; padding-top: 0 !important; padding-bottom: 8px !important; }
.hubx .drawer-stat-row.cal-stats { grid-template-columns: repeat(4, 1fr); }
.hubx table.cal-table td.cal-date { font-weight: 500; white-space: nowrap; }
.hubx table.cal-table td.cal-time { color: var(--muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hubx .cal-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; background: var(--muted); color: var(--foreground); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.hubx .cal-linkcell { display: inline-flex; align-items: center; gap: 4px; }
.hubx .cal-link { display: inline-flex; align-items: center; gap: 6px; color: var(--foreground); text-decoration: none; cursor: pointer; white-space: nowrap; font-size: 12.5px; }
.hubx .cal-link:hover { text-decoration: underline; }
.hubx .cal-link svg.brand { width: 15px; height: 15px; flex-shrink: 0; }
.hubx .cal-copy { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; border-radius: 4px; background: transparent; color: var(--muted-foreground); cursor: pointer; flex-shrink: 0; transition: background 0.12s, color 0.12s; }
.hubx .cal-copy:hover { background: var(--muted); color: var(--foreground); }
.hubx .cal-copy svg { width: 13px; height: 13px; }
.hubx .cal-none { color: var(--muted-foreground); }
.hubx .cal-av { width: 24px; height: 24px; border-radius: 50%; background: var(--muted); color: var(--muted-foreground); font-size: 9px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.hubx .cal-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hubx .cal-art { display: inline-flex; align-items: center; gap: 7px; max-width: 230px; padding: 4px 8px; margin: -4px -8px; border-radius: 6px; cursor: pointer; color: var(--foreground); transition: background 0.12s; }
.hubx .cal-art:hover { background: var(--muted); }
.hubx .cal-art svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted-foreground); }
.hubx .cal-art .cal-art-nm { font-size: 12.5px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hubx table.cal-table tr.cal-group td { padding: 30px 0 10px; border-bottom: none; }
.hubx .cal-group-lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); }
@media (max-width: 640px) {.hubx .drawer-stat-row.cal-stats { grid-template-columns: 1fr 1fr; }}
.hubx .timeline { margin-bottom: 24px; }
.hubx .timeline-item { display: grid; grid-template-columns: 70px 1fr; gap: 16px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.hubx .timeline-item:last-child { border-bottom: none; }
.hubx .timeline-time { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
.hubx .timeline-note { font-size: 13px; line-height: 1.5; color: var(--foreground); font-weight: 300; }
.hubx .gantt-wrap { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); padding: 18px 20px; margin-bottom: 24px; }
.hubx .gantt-legend { display: flex; align-items: center; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; font-size: 11px; color: var(--foreground); }
.hubx .gl-item { display: flex; align-items: center; gap: 6px; }
.hubx .gl-swatch { width: 16px; height: 6px; border-radius: 2px; display: inline-block; }
.hubx .gl-swatch.baseline { background: #5A7A9A; opacity: 0.6; }
.hubx .gl-swatch.actual { background: #33302E; opacity: 0.4; }
.hubx .gl-swatch.milestone { width: 10px; height: 10px; background: transparent; border: none; position: relative; transform: rotate(45deg); background: #33302E; border-radius: 1px; }
.hubx .gantt-scroll { overflow-x: auto; }
.hubx .gantt-svg { width: 100%; min-width: 760px; height: auto; display: block; }
.hubx .fin-statement { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); padding: 6px 20px; margin-bottom: 20px; }
.hubx table.fin-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hubx table.fin-table th { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); padding: 14px 0 10px; border-bottom: 1px solid var(--border); text-align: left; }
.hubx table.fin-table th.num { text-align: right; }
.hubx table.fin-table th.period { color: var(--foreground); }
.hubx table.fin-table td { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 300; color: var(--foreground); }
.hubx table.fin-table td.num { text-align: right; padding-left: 24px; }
.hubx table.fin-table td.fin-desc { font-weight: 300; }
.hubx table.fin-table td.num.muted { color: var(--muted-foreground); }
.hubx table.fin-table td.num.good { color: var(--accent); font-weight: 500; }
.hubx table.fin-table td.period { font-weight: 500; }
.hubx table.fin-table tr.fin-subtotal td { border-top: 1px solid var(--border); padding-top: 12px; font-weight: 500; }
.hubx table.fin-table tr.fin-total td { font-weight: 500; border-top: 1px solid var(--foreground); border-bottom: 1px solid var(--foreground); padding-top: 12px; padding-bottom: 12px; }
.hubx table.fin-table tr.fin-total.fin-grand td { border-top: 1px solid var(--foreground); border-bottom: 3px double var(--foreground); padding-bottom: 14px; font-size: 14px; }
.hubx table.fin-table tr.fin-progress td { font-weight: 500; color: var(--foreground); padding-top: 12px; border-bottom: none; }
.hubx table.fin-table tbody tr:hover td { background: rgba(38,24,17,0.02); }
.hubx .about-prose { color: #000; font-size: 14px; line-height: 1.65; font-weight: 400; margin-bottom: 24px; }
.hubx .about-prose p { margin: 0 0 12px; }
.hubx .about-prose p:last-child { margin-bottom: 0; }
.hubx .about-prose strong { font-weight: 500; }
.hubx .about-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.hubx .about-row { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); align-items: start; }
.hubx .about-row .ar-label { font-size: 12px; font-weight: 500; color: var(--foreground); }
.hubx .about-row .ar-desc { font-size: 13px; line-height: 1.5; color: var(--foreground); font-weight: 300; }
.hubx .about-row .ar-desc code { font-size: 12px; background: var(--muted); padding: 1px 5px; border-radius: 3px; }
.hubx .matrix { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); padding: 18px 20px; margin-bottom: 24px; overflow-x: auto; }
.hubx .matrix table { width: 100%; border-collapse: collapse; font-size: 12px; }
.hubx .matrix th { padding: 8px 10px; text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); font-weight: 500; border-bottom: 1px solid var(--border); }
.hubx .matrix th:first-child { text-align: left; }
.hubx .matrix td { padding: 10px; border-bottom: 1px solid var(--border); text-align: center; color: var(--muted-foreground); font-size: 11px; font-variant-numeric: tabular-nums; }
.hubx .matrix td:first-child { text-align: left; font-weight: 500; color: var(--foreground); font-size: 12px; }
.hubx .matrix td.cell { color: var(--foreground); font-weight: 400; }
.hubx .matrix tbody tr:last-child td { border-bottom: none; }
.hubx .concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.hubx .concept-card { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); }
.hubx .concept-card h4 { font-size: 13px; font-weight: 500; margin: 0 0 6px; }
.hubx .concept-card p { font-size: 12.5px; line-height: 1.55; color: var(--foreground); font-weight: 300; margin: 0; }
.hubx .arch-diagram { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); padding: 20px 16px; margin-bottom: 24px; overflow-x: auto; }
.hubx .arch-svg { width: 100%; min-width: 520px; height: auto; display: block; }
.hubx .set-wrap2 { max-width: none; }
.hubx .set-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.hubx .set-cols .set-col:nth-child(2) { border-left: 1px solid var(--border); padding-left: 44px; }
.hubx #sec-settings .gl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hubx #sec-settings .gl-head .gl-add { margin: 0; }
.hubx #sec-settings .gl-extra { display: none; }
.hubx #sec-settings .gl-open .gl-extra { display: table-row; }
.hubx #sec-settings .gl-showmore { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); background: transparent; border: none; padding: 4px 0; cursor: pointer; }
.hubx #sec-settings .gl-showmore:hover { color: var(--foreground); }
.hubx #sec-settings .gl-showmore svg { width: 13px; height: 13px; transition: transform .15s; }
.hubx #sec-settings .gl-showmore.open svg { transform: rotate(180deg); }
@media (max-width: 760px) {.hubx .set-cols { grid-template-columns: 1fr; gap: 28px; }
.hubx .set-cols .set-col:nth-child(2) { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 22px; }}
.hubx #sec-settings .sec { margin-bottom: 44px; }
.hubx #sec-settings .sec-title { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.hubx #sec-settings .field { display: grid; grid-template-columns: 280px 1fr; gap: 32px; padding: 18px 0; align-items: start; }
.hubx #sec-settings .field + .field { border-top: 1px solid var(--gridline); }
.hubx #sec-settings .field-label { font-size: 14px; font-weight: 500; color: var(--foreground); }
.hubx #sec-settings .field-help { font-size: 12.5px; color: var(--muted-foreground); margin-top: 5px; line-height: 1.5; }
.hubx #sec-settings .field-control { display: flex; flex-direction: column; gap: 8px; }
.hubx #sec-settings .inp-count { font-size: 11.5px; color: var(--muted-foreground); align-self: flex-end; }
.hubx #sec-settings .logo-row { display: flex; align-items: center; gap: 18px; }
.hubx #sec-settings .logo-tile { width: 132px; height: 80px; border: 1px solid var(--border); border-radius: 10px; background: #FFFEFC; display: flex; align-items: center; justify-content: center; padding: 14px; flex-shrink: 0; overflow: hidden; }
.hubx #sec-settings .logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hubx #sec-settings .logo-tile .logo-abbr { font-size: 26px; font-weight: 500; letter-spacing: 0.02em; color: var(--foreground); }
.hubx #sec-settings .logo-tile.empty { color: var(--muted-foreground); }
.hubx #sec-settings .logo-tile.empty svg { width: 26px; height: 26px; }
.hubx #sec-settings .logo-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hubx #sec-settings .logo-actions .row { display: flex; gap: 8px; }
.hubx #sec-settings .btn { font-family: inherit; font-size: 13.5px; font-weight: 500; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--border); background: #FFFEFC; color: var(--foreground); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: border-color .15s, background .15s, color .15s; white-space: nowrap; }
.hubx #sec-settings .btn:hover { border-color: #C9C0BD; background: var(--muted); }
.hubx #sec-settings .btn svg { width: 15px; height: 15px; }
.hubx #sec-settings .btn.primary { background: var(--foreground); border-color: var(--foreground); color: #FCFBF8; }
.hubx #sec-settings .btn.primary:hover { background: #4a4744; border-color: #4a4744; }
.hubx #sec-settings .btn.ghost { background: transparent; border-color: transparent; color: var(--muted-foreground); }
.hubx #sec-settings .btn.ghost:hover { background: var(--muted); color: var(--foreground); }
.hubx #sec-settings .btn.sm { padding: 7px 12px; font-size: 12.5px; }
.hubx #sec-settings .s-footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 24px; margin-top: 4px; border-top: 1px solid var(--border); }
.hubx #sec-settings .u-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.hubx #sec-settings .u-search { flex: 1; display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 8px; padding: 9px 13px; background: #FFFEFC; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.hubx #sec-settings .u-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(90,122,154,0.10); }
.hubx #sec-settings .u-search svg { width: 15px; height: 15px; color: var(--muted-foreground); flex-shrink: 0; }
.hubx #sec-settings .u-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: 13.5px; font-weight: 300; color: var(--foreground); width: 100%; }
.hubx #sec-settings .u-search input::placeholder { color: var(--muted-foreground); }
.hubx #sec-settings .u-filter { position: relative; }
.hubx #sec-settings .u-filter-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 9px 13px; background: #FFFEFC; font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--foreground); cursor: pointer; white-space: nowrap; }
.hubx #sec-settings .u-filter-btn:hover { border-color: #C9C0BD; }
.hubx #sec-settings .u-filter-btn svg { width: 14px; height: 14px; color: var(--muted-foreground); }
.hubx #sec-settings .u-filter-btn .fchev { transition: transform .15s; }
.hubx #sec-settings .u-filter-btn.open .fchev { transform: rotate(180deg); }
.hubx #sec-settings .u-filter-btn .fval { color: var(--muted-foreground); font-weight: 400; }
.hubx #sec-settings .u-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 168px; background: #FFFEFC; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(38,24,17,0.12); padding: 6px; z-index: 40; display: none; }
.hubx #sec-settings .u-menu.open { display: block; }
.hubx #sec-settings .u-menu button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: none; border: none; padding: 9px 11px; font-family: inherit; font-size: 13.5px; color: var(--foreground); cursor: pointer; border-radius: 6px; text-align: left; }
.hubx #sec-settings .u-menu button:hover { background: var(--muted); }
.hubx #sec-settings .grid-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: visible; background: #FFFEFC; }
.hubx #sec-settings table.u-grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hubx #sec-settings .u-grid thead th { text-align: left; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); padding: 13px 16px; border-bottom: 1px solid var(--border); background: rgba(38,24,17,0.015); white-space: nowrap; }
.hubx #sec-settings .u-grid thead th.sortable { cursor: pointer; user-select: none; }
.hubx #sec-settings .u-grid thead th.sortable:hover { color: var(--foreground); }
.hubx #sec-settings .u-grid thead th.sorted { color: var(--foreground); }
.hubx #sec-settings .sort-caret { display: inline-block; font-size: 9px; margin-left: 3px; vertical-align: middle; }
.hubx #sec-settings .u-grid tbody td { padding: 13px 16px; border-bottom: 1px solid var(--gridline); vertical-align: middle; color: var(--foreground); }
.hubx #sec-settings .u-grid tbody tr:last-child td { border-bottom: none; }
.hubx #sec-settings .u-grid tbody tr:hover { background: rgba(38,24,17,0.018); }
.hubx #sec-settings .u-grid th.col-av, .hubx #sec-settings .u-grid td.col-av { width: 46px; padding-right: 0; }
.hubx #sec-settings .u-grid th.col-act, .hubx #sec-settings .u-grid td.col-act { width: 56px; text-align: right; }
.hubx #sec-settings .u-person { display: flex; align-items: center; gap: 6px; }
.hubx #sec-settings .u-name { font-weight: 400; }
.hubx #sec-settings .u-email { color: var(--muted-foreground); }
.hubx #sec-settings .u-emailcell { display: flex; align-items: center; gap: 8px; }
.hubx #sec-settings .copy-btn { width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent; color: var(--muted-foreground); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s, background .12s, color .12s; flex-shrink: 0; }
.hubx #sec-settings .u-grid tbody tr:hover .copy-btn { opacity: 1; }
.hubx #sec-settings .copy-btn:hover { background: var(--muted); color: var(--foreground); }
.hubx #sec-settings .copy-btn svg { width: 14px; height: 14px; }
.hubx #sec-settings .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--muted); color: var(--muted-foreground); font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.hubx #sec-settings .avatar img { width: 100%; height: 100%; object-fit: cover; }
.hubx #sec-settings .you-tag { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); background: var(--muted); border-radius: 4px; padding: 2px 6px; }
.hubx #sec-settings .pending-tag { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold); background: rgba(90,122,154,0.12); border-radius: 4px; padding: 2px 6px; }
.hubx #sec-settings .perm { position: relative; display: inline-flex; }
.hubx #sec-settings .perm-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px 5px 10px; background: #FFFEFC; font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--foreground); cursor: pointer; }
.hubx #sec-settings .perm-chip:hover { border-color: #C9C0BD; }
.hubx #sec-settings .perm-chip[disabled] { cursor: default; opacity: 1; background: var(--muted); border-color: transparent; }
.hubx #sec-settings .perm-chip .pdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hubx #sec-settings .perm-chip svg { width: 13px; height: 13px; color: var(--muted-foreground); }
.hubx #sec-settings .perm-chip[disabled] svg { display: none; }
.hubx #sec-settings .pdot.owner { background: var(--gold); }
.hubx #sec-settings .pdot.admin { background: var(--accent); }
.hubx #sec-settings .pdot.editor { background: #C49A4A; }
.hubx #sec-settings .pdot.viewer { background: var(--muted-foreground); }
.hubx #sec-settings .perm-menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 150px; background: #FFFEFC; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(38,24,17,0.12); padding: 6px; z-index: 50; display: none; }
.hubx #sec-settings .perm-menu.open { display: block; }
.hubx #sec-settings .perm-menu button { width: 100%; display: flex; align-items: center; gap: 9px; background: none; border: none; padding: 8px 10px; font-family: inherit; font-size: 13px; color: var(--foreground); cursor: pointer; border-radius: 6px; text-align: left; }
.hubx #sec-settings .perm-menu button:hover { background: var(--muted); }
.hubx #sec-settings .perm-menu button .pdot { width: 7px; height: 7px; border-radius: 50%; }
.hubx #sec-settings .perm-menu button .pcheck { margin-left: auto; width: 14px; height: 14px; color: var(--foreground); opacity: 0; }
.hubx #sec-settings .perm-menu button.sel .pcheck { opacity: 1; }
.hubx #sec-settings .last-login { color: var(--muted-foreground); white-space: nowrap; }
.hubx #sec-settings .act-btn { width: 30px; height: 30px; border-radius: 7px; border: none; background: transparent; color: var(--muted-foreground); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hubx #sec-settings .act-btn:hover { background: var(--muted); color: var(--foreground); }
.hubx #sec-settings .act-btn svg { width: 17px; height: 17px; }
.hubx #sec-settings .act-wrap { position: relative; display: inline-flex; }
.hubx #sec-settings .act-menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 184px; background: #FFFEFC; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(38,24,17,0.12); padding: 6px; z-index: 50; display: none; }
.hubx #sec-settings .act-menu.open { display: block; }
.hubx #sec-settings .act-menu button { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 9px 11px; font-family: inherit; font-size: 13.5px; color: var(--foreground); cursor: pointer; border-radius: 6px; text-align: left; }
.hubx #sec-settings .act-menu button:hover { background: var(--muted); }
.hubx #sec-settings .act-menu button svg { width: 15px; height: 15px; color: var(--muted-foreground); flex-shrink: 0; }
.hubx #sec-settings .act-menu button.danger { color: var(--destructive); }
.hubx #sec-settings .act-menu button.danger svg { color: var(--destructive); }
.hubx #sec-settings .u-empty { padding: 48px 16px; text-align: center; color: var(--muted-foreground); font-size: 13.5px; }
.hubx #sec-settings .u-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px 0; font-size: 12.5px; color: var(--muted-foreground); }
.hubx #sec-settings .seg { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 8px; padding: 3px; background: var(--muted); }
.hubx #sec-settings .seg button { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); padding: 7px 8px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.hubx #sec-settings .seg button .pdot { width: 7px; height: 7px; border-radius: 50%; }
.hubx #sec-settings .seg button.active { background: #FFFEFC; color: var(--foreground); box-shadow: 0 1px 2px rgba(38,24,17,0.08); }
.hubx #sec-settings .seg-help { font-size: 12px; color: var(--muted-foreground); line-height: 1.5; }
@media (max-width: 760px) {.hubx #sec-settings .field { grid-template-columns: 1fr; gap: 12px; }
.hubx #sec-settings .u-grid .col-email, .hubx #sec-settings .u-grid .col-login { display: none; }}
.hubx .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(12px); background: var(--foreground); color: #FCFBF8; font-size: 13px; font-weight: 400; padding: 11px 18px; border-radius: 999px; box-shadow: 0 10px 30px rgba(38,24,17,0.28); z-index: 300; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; display: inline-flex; align-items: center; gap: 9px; }
.hubx .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.hubx .toast svg { width: 15px; height: 15px; }
.hubx {
  --cc-ink: #2A2420;          
  --cc-ink-hover: #3D3530;
}
.hubx #sec-status .cc-block { margin-bottom: 34px; }
.hubx #sec-status .cc-block:last-child { margin-bottom: 0; }
.hubx #sec-status .drawer-stat-row { margin-bottom: 30px; }
.hubx #sec-status .drawer-stat-cell .dsc-val { font-size: 24px; }
.hubx .cc-agents { display: flex; flex-direction: column; gap: 12px; }
.hubx .cc-agent {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--card); padding: 16px 18px;
  transition: border-color 0.15s;
}
.hubx .cc-agent:hover { border-color: #D9D1CD; }
.hubx .cc-agent.pending { border-color: #DED2C6; background: #FEFCFA; }
.hubx .cc-agent-ic {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px;
  border: 1px solid var(--border); background: var(--background);
  display: flex; align-items: center; justify-content: center;
  color: var(--foreground);
}
.hubx .cc-agent-ic svg { width: 19px; height: 19px; }
.hubx .cc-agent-main { flex: 1; min-width: 0; }
.hubx .cc-agent-name {
  font-size: 14.5px; font-weight: 500; color: var(--foreground);
  display: flex; align-items: center; gap: 9px; letter-spacing: -0.01em;
}
.hubx .cc-agent-name .cc-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px;
  background: var(--cc-ink); color: #fff; font-size: 11px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.hubx .cc-agent-meta {
  font-size: 12.5px; color: var(--muted-foreground); font-weight: 300;
  margin-top: 4px; line-height: 1.45;
}
.hubx .cc-agent-meta .cc-target { color: var(--foreground); font-weight: 400; }
.hubx .cc-agent-meta .cc-sep { color: #C9C0BD; margin: 0 7px; }
.hubx .cc-agent-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.hubx .cc-trig { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.hubx .cc-trig .cc-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.hubx .cc-trig.idle { color: var(--accent); }
.hubx .cc-trig.idle .cc-dot { background: var(--accent); }
.hubx .cc-trig.watch { color: var(--muted-foreground); }
.hubx .cc-trig.alert { color: var(--gold); }
.hubx .cc-trig.alert .cc-dot { animation: ccblink 2s ease-in-out infinite; }
@keyframes ccblink { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
.hubx .cc-review-btn {
  font-size: 12.5px; font-weight: 500; padding: 8px 15px; border-radius: 6px;
  border: 1px solid var(--cc-ink); background: var(--cc-ink); color: #fff;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; transition: background 0.15s;
}
.hubx .cc-review-btn:hover { background: var(--cc-ink-hover); }
.hubx .cc-review-btn svg { width: 14px; height: 14px; }
.hubx .cc-review-btn.ghost { background: transparent; color: var(--muted-foreground); border-color: var(--border); }
.hubx .cc-review-btn.ghost:hover { color: var(--foreground); border-color: #C9C0BD; background: var(--muted); }
.hubx .cc-tablewrap { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); overflow: hidden; }
.hubx table.cc-table { width: 100%; border-collapse: collapse; }
.hubx table.cc-table thead th {
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted-foreground); text-align: left; padding: 11px 16px;
  border-bottom: 1px solid var(--border); background: #FAF7F4; white-space: nowrap;
}
.hubx table.cc-table thead th.r { text-align: right; }
.hubx table.cc-table thead th.c { text-align: center; }
.hubx table.cc-table td {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--foreground); font-weight: 300; vertical-align: middle;
}
.hubx table.cc-table tbody tr:last-child td { border-bottom: none; }
.hubx table.cc-table tbody tr:hover td { background: rgba(38,24,17,0.018); }
.hubx table.cc-table td.r { text-align: right; }
.hubx table.cc-table td.c { text-align: center; }
.hubx .cc-wf-name { font-weight: 500; display: flex; align-items: center; gap: 9px; }
.hubx .cc-wf-name svg { width: 15px; height: 15px; color: var(--muted-foreground); flex-shrink: 0; }
.hubx .cc-wf-desc { font-size: 11.5px; color: var(--muted-foreground); font-weight: 300; margin-top: 3px; }
.hubx .cc-mono { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted-foreground); font-size: 12.5px; }
.hubx .cc-trigger { display: flex; align-items: center; gap: 8px; }
.hubx .cc-trigger svg { width: 13px; height: 13px; color: var(--muted-foreground); flex-shrink: 0; }
.hubx .cc-trigger-txt { white-space: nowrap; color: var(--foreground); }
.hubx .cc-trigger.event .cc-trigger-txt { color: var(--gold); }
.hubx .cc-agents-table td { vertical-align: middle; }
.hubx .cc-ic-cell { width: 40px; padding-right: 0 !important; }
.hubx .cc-row-ic { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--background); display: flex; align-items: center; justify-content: center; color: var(--foreground); }
.hubx .cc-row-ic svg { width: 17px; height: 17px; }
.hubx .cc-art-name { font-size: 14px; font-weight: 500; color: var(--foreground); letter-spacing: -0.01em; }
.hubx .cc-art-sub { font-size: 11.5px; color: var(--muted-foreground); font-weight: 300; margin-top: 3px; }
.hubx .cc-upd-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--cc-ink); color: #fff; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hubx .cc-upd-count.zero { background: transparent; color: var(--muted-foreground); border: 1px solid var(--border); font-weight: 400; }
.hubx .cc-review-btn.sm { padding: 7px 14px; }
.hubx .cc-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 4px; background: rgba(38,24,17,0.06); color: var(--muted-foreground); white-space: nowrap; }
.hubx .cc-tag .cc-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hubx .cc-tag.on { color: #2E6E48; }
.hubx .cc-tag.paused { color: var(--muted-foreground); }
.hubx .cc-runbtn {
  font-size: 12px; font-weight: 500; padding: 6px 13px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
  cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.hubx .cc-runbtn:hover { border-color: #C9C0BD; background: var(--muted); }
.hubx .cc-runbtn svg { width: 13px; height: 13px; }
.hubx .cc-runbtn:disabled { opacity: 0.5; cursor: default; }
.hubx .cc-policy { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--background); }
.hubx .cc-policy button {
  font-size: 11.5px; font-weight: 500; padding: 5px 11px; border: none; background: transparent;
  color: var(--muted-foreground); cursor: pointer; font-family: inherit; white-space: nowrap;
}
.hubx .cc-policy button + button { border-left: 1px solid var(--border); }
.hubx .cc-policy button.sel { background: var(--cc-ink); color: #fff; }
.hubx .cc-policy button.sel.review { background: var(--gold); }
.hubx .cc-rule-cond { font-weight: 400; }
.hubx .cc-rule-cond strong { font-weight: 500; }
.hubx .cc-scope { font-size: 11px; color: var(--muted-foreground); }
.hubx .su-scrim { position: fixed; inset: 0; background: rgba(38,24,17,0.28); opacity: 0; pointer-events: none; transition: opacity 0.24s ease; z-index: 140; }
.hubx .su-scrim.open { opacity: 1; pointer-events: auto; }
.hubx .su-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(560px, 96vw);
  background: var(--background); border-left: 1px solid var(--border);
  transform: translateX(102%); transition: transform 0.26s cubic-bezier(0.2,0,0,1);
  z-index: 145; display: flex; flex-direction: column;
}
.hubx .su-panel.open { transform: translateX(0); box-shadow: -10px 0 36px rgba(38,24,17,0.12); }
.hubx .su-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.hubx .su-head h2 { font-size: 21px; font-weight: 500; margin: 0; letter-spacing: -0.01em; white-space: nowrap; }
.hubx .su-close { width: 32px; height: 32px; border: none; background: none; color: var(--muted-foreground); cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.hubx .su-close:hover { background: var(--muted); color: var(--foreground); }
.hubx .su-close svg { width: 19px; height: 19px; }
.hubx .su-body { flex: 1; overflow-y: auto; padding: 22px 24px 60px; }
.hubx .su-summary { font-size: 13.5px; line-height: 1.6; color: var(--foreground); font-weight: 300; margin: 0 0 20px; }
.hubx .su-summary strong { font-weight: 500; }
.hubx .su-summary .ng { color: #2E6E48; font-weight: 400; }
.hubx .su-summary .nw { color: var(--gold); font-weight: 400; }
.hubx .su-controls { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.hubx .su-select {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card);
  padding: 12px 15px; font-size: 14px; color: var(--foreground); cursor: pointer; font-family: inherit;
}
.hubx .su-select:hover { border-color: #C9C0BD; }
.hubx .su-select > span:first-child { white-space: nowrap; }
.hubx .su-select .su-sel-count { color: var(--muted-foreground); font-size: 13px; margin-left: 6px; }
.hubx .su-select svg { width: 16px; height: 16px; color: var(--muted-foreground); flex-shrink: 0; }
.hubx .su-decline-all { font-size: 14px; font-weight: 400; color: var(--foreground); background: none; border: none; cursor: pointer; font-family: inherit; white-space: nowrap; padding: 6px 4px; }
.hubx .su-decline-all:hover { color: var(--muted-foreground); }
.hubx .su-accept-all { font-size: 14px; font-weight: 500; color: #fff; background: var(--cc-ink); border: 1px solid var(--cc-ink); border-radius: 8px; padding: 11px 20px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.hubx .su-accept-all:hover { background: var(--cc-ink-hover); }
.hubx .su-group { border: 1px solid var(--border); border-radius: 12px; background: var(--card); margin-bottom: 14px; overflow: hidden; }
.hubx .su-group-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; }
.hubx .su-group-head:hover { background: rgba(38,24,17,0.015); }
.hubx .su-file-ic { width: 19px; height: 19px; color: var(--muted-foreground); flex-shrink: 0; }
.hubx .su-file-name { font-size: 15px; font-weight: 400; color: var(--foreground); display: flex; align-items: center; gap: 10px; min-width: 0; }
.hubx .su-file-name .su-fn-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hubx .su-grp-count { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--cc-ink); color: #fff; font-size: 11.5px; font-weight: 500; flex-shrink: 0; }
.hubx .su-grp-count.done { background: var(--accent); }
.hubx .su-grp-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.hubx .su-grp-decline { font-size: 13.5px; color: var(--foreground); background: none; border: none; cursor: pointer; font-family: inherit; white-space: nowrap; }
.hubx .su-grp-decline:hover { color: var(--muted-foreground); }
.hubx .su-grp-accept { font-size: 13.5px; font-weight: 500; color: #fff; background: var(--cc-ink); border: 1px solid var(--cc-ink); border-radius: 7px; padding: 8px 16px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.hubx .su-grp-accept:hover { background: var(--cc-ink-hover); }
.hubx .su-chev { width: 20px; height: 20px; color: var(--muted-foreground); transition: transform 0.2s; flex-shrink: 0; }
.hubx .su-group.collapsed .su-chev { transform: rotate(-90deg); }
.hubx .su-group.collapsed .su-rows { display: none; }
.hubx .su-group.collapsed .su-grp-decline, .hubx .su-group.collapsed .su-grp-accept {  }
.hubx .su-rows { border-top: 1px solid var(--border); }
.hubx .su-row {
  display: grid; grid-template-columns: 1fr auto auto auto auto; align-items: center;
  gap: 18px; padding: 18px 18px; border-bottom: 1px solid var(--border);
}
.hubx .su-rows .su-row:last-child { border-bottom: none; }
.hubx .su-row.accepted { background: rgba(82,178,110,0.05); }
.hubx .su-row.declined { opacity: 0.5; }
.hubx .su-r-metric { min-width: 0; }
.hubx .su-r-name { font-size: 15px; font-weight: 400; color: var(--foreground); }
.hubx .su-r-meta { font-size: 12.5px; color: var(--muted-foreground); font-weight: 300; margin-top: 3px; }
.hubx .su-r-val { text-align: left; }
.hubx .su-r-val .su-r-lbl { font-size: 12px; color: var(--muted-foreground); margin-bottom: 5px; }
.hubx .su-r-val .su-r-num { font-size: 15px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.hubx .su-r-new .su-r-num { color: var(--foreground); font-weight: 500; }
.hubx .su-r-arrow { color: var(--muted-foreground); display: flex; align-items: center; }
.hubx .su-r-arrow svg { width: 22px; height: 22px; }
.hubx .su-r-acts { display: flex; align-items: center; gap: 6px; }
.hubx .su-r-btn { width: 38px; height: 38px; border: none; background: none; cursor: pointer; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground); }
.hubx .su-r-btn:hover { background: var(--muted); }
.hubx .su-r-btn svg { width: 20px; height: 20px; }
.hubx .su-r-btn.x:hover { color: var(--destructive); }
.hubx .su-r-btn.ok:hover { color: var(--accent); }
.hubx .su-row.accepted .su-r-btn.ok { background: rgba(82,178,110,0.14); color: var(--accent); }
.hubx .su-row.declined .su-r-btn.x { background: rgba(208,74,63,0.10); color: var(--destructive); }
.hubx .su-foot { flex-shrink: 0; border-top: 1px solid var(--border); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--background); }
.hubx .su-foot-status { font-size: 12.5px; color: var(--muted-foreground); }
.hubx .su-foot-status strong { color: var(--foreground); font-weight: 500; }
.hubx .su-apply { font-size: 13px; font-weight: 500; color: #fff; background: var(--cc-ink); border: 1px solid var(--cc-ink); border-radius: 7px; padding: 9px 18px; cursor: pointer; font-family: inherit; }
.hubx .su-apply:hover { background: var(--cc-ink-hover); }
.hubx .su-apply:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 600px) {.hubx .su-controls { flex-wrap: wrap; }
.hubx .su-row { grid-template-columns: 1fr auto; gap: 10px 14px; }
.hubx .su-r-metric { grid-column: 1 / -1; }
.hubx .cc-agent { flex-wrap: wrap; }
.hubx .cc-agent-right { width: 100%; justify-content: space-between; }}
.hubx .su-head { align-items: flex-start; }
.hubx .su-head-titles { min-width: 0; }
.hubx .su-eyebrow { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); margin-bottom: 7px; }
.hubx .su-artifact { display: flex; align-items: center; gap: 11px; min-width: 0; }
.hubx .su-art-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--border); background: var(--card); display: flex; align-items: center; justify-content: center; color: var(--foreground); }
.hubx .su-art-ic svg { width: 19px; height: 19px; }
.hubx .su-artifact h2 { font-size: 18px; font-weight: 500; margin: 0; letter-spacing: -0.01em; white-space: normal; line-height: 1.2; }
.hubx .su-group-head { cursor: default; }
.hubx .su-group-head:hover { background: transparent; }
.hubx .su-filter { flex: 1; position: relative; }
.hubx .su-filter .su-select { width: 100%; }
.hubx .su-filter-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 5;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(38,24,17,0.12); padding: 6px; display: none; max-height: 320px; overflow-y: auto;
}
.hubx .su-filter-menu.open { display: block; }
.hubx .su-filter-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  font-size: 13px; font-weight: 400; color: var(--foreground); background: none; border: none;
  padding: 9px 11px; border-radius: 7px; cursor: pointer; font-family: inherit; text-align: left;
}
.hubx .su-filter-menu button:hover { background: var(--muted); }
.hubx .su-filter-menu button.sel { background: rgba(38,24,17,0.05); font-weight: 500; }
.hubx .su-filter-menu .su-fcount { color: var(--muted-foreground); font-size: 12px; font-variant-numeric: tabular-nums; }
.hubx .cc-row-actions { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.hubx .cc-runbtn.ghost { background: transparent; color: var(--muted-foreground); }
.hubx .cc-runbtn.ghost:hover { color: var(--foreground); background: var(--muted); border-color: #C9C0BD; }
.hubx .rn-sub { font-size: 12.5px; color: var(--muted-foreground); font-weight: 300; margin: 6px 0 0; line-height: 1.5; max-width: 46ch; }
.hubx .rn-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hubx .rn-count { font-size: 14px; color: var(--foreground); font-weight: 400; }
.hubx .rn-refresh { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--foreground); background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 9px 15px; cursor: pointer; font-family: inherit; }
.hubx .rn-refresh:hover { border-color: #C9C0BD; background: var(--muted); }
.hubx .rn-refresh svg { width: 15px; height: 15px; color: var(--muted-foreground); }
.hubx .rn-refresh.spin svg { animation: rnspin 0.7s linear; }
@keyframes rnspin { to { transform: rotate(360deg); } }
.hubx .rn-list { display: flex; flex-direction: column; gap: 12px; }
.hubx .rn-card { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 15px 18px; }
.hubx .rn-card-top { display: flex; align-items: center; gap: 12px; }
.hubx .rn-tag { font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 4px; }
.hubx .rn-tag.success { color: #2E6E48; background: rgba(82,178,110,0.14); }
.hubx .rn-tag.failed { color: var(--destructive); background: rgba(208,74,63,0.12); }
.hubx .rn-via { font-size: 13.5px; color: var(--muted-foreground); font-weight: 300; }
.hubx .rn-ago { margin-left: auto; font-size: 13px; color: var(--muted-foreground); white-space: nowrap; }
.hubx .rn-card-meta { font-size: 13px; color: var(--muted-foreground); font-weight: 300; margin-top: 9px; }
.hubx .rn-dot { margin: 0 10px; color: #C9C0BD; }
.hubx .cc-log-link { margin-top: 12px; }
.hubx .cc-log-link button { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--foreground); background: none; border: none; cursor: pointer; font-family: inherit; padding: 6px 2px; }
.hubx .cc-log-link button:hover { color: var(--muted-foreground); }
.hubx .cc-log-link svg { width: 15px; height: 15px; color: var(--muted-foreground); }
.hubx .cc-log-chev { transition: transform 0.2s; }
.hubx .cc-log-link button.open .cc-log-chev { transform: rotate(180deg); }
.hubx .cc-reviews { margin-top: 14px; }
.hubx .cc-rv-art { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.hubx .cc-rv-ic { width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px; border: 1px solid var(--border); background: var(--background); display: inline-flex; align-items: center; justify-content: center; color: var(--foreground); }
.hubx .cc-rv-ic svg { width: 15px; height: 15px; }
.hubx .cc-view-btn { font-size: 12px; font-weight: 500; padding: 6px 13px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); cursor: pointer; font-family: inherit; white-space: nowrap; }
.hubx .cc-view-btn:hover { border-color: #C9C0BD; background: var(--muted); }
.hubx .cc-rv-who { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.hubx .cc-rv-av { width: 26px; height: 26px; border-radius: 999px; background: var(--cc-ink); color: #fff; font-size: 10px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0.02em; }
.hubx .cc-rv-dp { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: rgba(82,178,110,0.14); color: #2E6E48; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hubx .cc-empty { text-align: center; color: var(--muted-foreground); font-weight: 300; padding: 26px 0; }
.hubx .cc-pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.hubx .cc-pg-info { font-size: 12px; color: var(--muted-foreground); }
.hubx .cc-pg-nav { display: inline-flex; align-items: center; gap: 4px; }
.hubx .cc-pg-num, .hubx .cc-pg-arrow {
  min-width: 30px; height: 30px; padding: 0 9px; border: 1px solid var(--border); background: var(--card);
  color: var(--foreground); font-size: 12.5px; font-weight: 500; border-radius: 6px; cursor: pointer; font-family: inherit;
}
.hubx .cc-pg-num:hover, .hubx .cc-pg-arrow:hover { border-color: #C9C0BD; background: var(--muted); }
.hubx .cc-pg-num.on { background: var(--cc-ink); color: #fff; border-color: var(--cc-ink); }
.hubx .cc-pg-arrow:disabled { opacity: 0.4; cursor: default; }
.hubx .cc-pg-arrow:disabled:hover { border-color: var(--border); background: var(--card); }
.hubx .lib-wrap { min-width: 0; }
.hubx .lib-main { min-width: 0; }
.hubx .lib-filterbar { margin: 2px 0 16px; }
.hubx .lc-ico, .hubx .si-ico {
  display: inline-flex; align-items: center; flex-shrink: 0;
  color: var(--muted-foreground);
}
.hubx .lc-ico svg, .hubx .si-ico svg { width: 14px; height: 14px; display: block; }
.hubx .lib-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hubx .lib-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--foreground);
  font-family: inherit; font-size: 12.5px; font-weight: 400;
  white-space: nowrap; cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.hubx .lib-chip:hover { background: var(--muted); border-color: #DED7D2; }
.hubx .lib-chip .lc-count {
  font-size: 11px; color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.hubx .lib-chip.active {
  background: #211D1A; border-color: #211D1A; color: #FCFBF8; font-weight: 500;
}
.hubx .lib-chip.active .lc-ico { color: #FCFBF8; }
.hubx .lib-chip.active .lc-count { color: rgba(252,251,248,0.62); }
.hubx .lib-tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 21px; padding: 0 8px; border-radius: 4px;
  background: rgba(38,24,17,0.06); color: var(--foreground);
  font-size: 11px; font-weight: 400; white-space: nowrap;
}
.hubx .lib-tag .lt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hubx .lib-typesel { position: relative; display: inline-flex; flex-shrink: 0; }
.hubx .lib-typesel .lib-tool[data-type-toggle] { display: inline-flex; align-items: center; gap: 7px; }
.hubx .lt-ico { display: inline-flex; align-items: center; color: var(--muted-foreground); }
.hubx .lt-ico svg { width: 14px; height: 14px; display: block; }
.hubx .lt-ico:empty { display: none; }
.hubx .lt-chev { display: inline-flex; align-items: center; color: var(--muted-foreground); transition: transform .15s; }
.hubx .lt-chev svg { width: 13px; height: 13px; display: block; }
.hubx .lib-typesel.open .lt-chev { transform: rotate(180deg); }
.hubx .lib-type-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 208px; padding: 5px;
  background: #FFFEFC; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(38,24,17,0.12);
  display: none;
}
.hubx .lib-typesel.open .lib-type-menu { display: block; }
.hubx .lib-type-divide { height: 1px; margin: 5px 6px; background: var(--border); }
.hubx .lib-type-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  font-size: 13px; color: var(--foreground); white-space: nowrap;
}
.hubx .lib-type-item:hover { background: var(--muted); }
.hubx .lib-type-item.active { font-weight: 500; }
.hubx .lib-type-item .ti-label { flex: 1; }
.hubx .lib-type-item .si-count {
  font-size: 11px; color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}
.hubx .lib-type-item .si-check { display: inline-flex; color: var(--foreground); margin-left: 6px; }
.hubx .lib-type-item .si-check svg { width: 14px; height: 14px; display: block; }
@media (max-width: 700px) {.hubx .lib-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }}
.hubx, .hubx { padding: 0 !important; margin: 0 !important; background: var(--background); }
.hubx { min-height: 0 !important; }
.hubx .app-rail { display: none !important; }
.hubx .container { max-width: 1100px; padding: 28px 36px 56px !important; }
.hubx { box-sizing: border-box; }
.hubx, .hubx * { box-sizing: border-box; }

/* Robust closed-state hiding for the source-updates / runs side panels
   (transform-independent — guarantees they leave the viewport when closed). */
#hubx-portal .su-scrim:not(.open) { display: none !important; }
#hubx-portal .su-panel:not(.open) { visibility: hidden !important; pointer-events: none !important; transform: translateX(102%) !important; }
#hubx-portal .su-panel.open { visibility: visible !important; }

/* Skills table — toggle switch + tighter action column */
.hubx .cc-skills-table td { vertical-align: middle; }
.hubx .cc-skill-toggle {
  width: 36px; height: 20px; border-radius: 999px; border: none; padding: 0;
  background: #D9D2CC; position: relative; cursor: pointer; flex-shrink: 0;
  transition: background 0.16s ease; vertical-align: middle;
}
.hubx .cc-skill-toggle.on { background: var(--accent); }
.hubx .cc-skill-toggle__knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(38,24,17,0.25);
  transition: transform 0.16s ease;
}
.hubx .cc-skill-toggle.on .cc-skill-toggle__knob { transform: translateX(16px); }

/* ── Mobile (≤1024px) — tables adapt instead of clipping at the right edge ── */
@media (max-width: 1024px) {
  /* Control-center tables (agents / workflows / skills) keep their natural
     width and scroll sideways inside the card. */
  .hubx .cc-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hubx table.cc-table { min-width: 560px; }

  /* Library table: truncated title + Owner / flag / Status; the injected
     Source column and Modified hide on phones (columns after library.js
     injects Source before the 5th cell: 1 title · 2 owner · 3 flag ·
     4 status · 5 source · 6 modified · 7 menu). */
  .hubx table.lib { table-layout: fixed; }
  .hubx table.lib th:nth-child(2), .hubx table.lib td:nth-child(2) { width: 46px; }
  .hubx table.lib th:nth-child(3), .hubx table.lib td:nth-child(3) { width: 30px; }
  .hubx table.lib th:nth-child(4), .hubx table.lib td:nth-child(4) { width: 96px; }
  .hubx table.lib th:nth-child(5), .hubx table.lib td:nth-child(5) { display: none; }
  .hubx table.lib th:nth-child(6), .hubx table.lib td:nth-child(6) { display: none; }
  .hubx table.lib th:nth-child(7), .hubx table.lib td:nth-child(7) { width: 34px; }
  .hubx .lib-title { overflow: hidden; }
  .hubx .lib-title .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Record drawer header (both the .hubx and the .cx-root drawer): the
     breadcrumb doesn't fit next to the face tabs — the title repeats in the
     body, so drop the crumb and tighten the tabs. */
  .hubx .drawer-header, .cx-root .drawer-header { padding: 12px 14px; }
  .hubx .drawer-header .drawer-crumb, .cx-root .drawer-header .drawer-crumb { display: none; }
  .hubx .drawer-header > div, .cx-root .drawer-header > div { flex: 1; min-width: 0; justify-content: space-between; }
  .hubx .view-toggle, .cx-root .view-toggle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hubx .view-toggle button, .cx-root .view-toggle button { padding: 5px 9px; white-space: nowrap; }
}

/* ═══ Ported from H&V POC: Control · Tasks (collapsible sections + task table) ═══ */
/* ── Control tab v2: collapsible sections, flat tables, row menus ────────── */
.hubx .cc-sec{margin:0 0 36px}
.hubx .cc-sec__head{display:flex;align-items:center;gap:11px;padding:0 0 13px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
.hubx .cc-sec__title{font-size:17px;font-weight:500;letter-spacing:-0.01em;color:var(--foreground)}
.hubx .cc-sec__count{font-size:14px;font-weight:300;color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.hubx .cc-sec__chev{margin-left:auto;background:transparent;border:none;padding:2px;color:var(--muted-foreground);cursor:pointer;display:flex;transition:transform .18s}
.hubx .cc-sec__chev svg{width:16px;height:16px}
.hubx .cc-sec.collapsed .cc-sec__chev{transform:rotate(180deg)}
.hubx .cc-sec.collapsed .cc-sec__body{display:none}
.hubx .cc-sec__note{font-size:13px;color:var(--muted-foreground);font-weight:300;line-height:1.55;margin:16px 0 0}
.hubx .cc-bar{display:flex;align-items:center;gap:14px;padding:12px 0}
.hubx .cc-search{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.hubx .cc-search svg{width:15px;height:15px;color:var(--muted-foreground);flex-shrink:0}
.hubx .cc-search input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:13.5px;font-weight:300;color:var(--foreground);min-width:0}
.hubx .cc-search input::placeholder{color:var(--muted-foreground)}
.hubx .cc-sort{position:relative;flex-shrink:0}
.hubx .cc-sortbtn{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:13px;font-weight:300;color:var(--muted-foreground);background:transparent;border:none;cursor:pointer;padding:3px 2px}
.hubx .cc-sortbtn:hover{color:var(--foreground)}
.hubx .cc-sortbtn svg{width:13px;height:13px}
.hubx .cc-plus{width:26px;height:26px;border:none;border-radius:6px;background:transparent;color:var(--muted-foreground);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hubx .cc-plus:hover{color:var(--foreground);background:var(--muted)}
.hubx .cc-plus svg{width:16px;height:16px}
.hubx table.cc-flat{width:calc(100% + 28px);margin:0 -14px;border-collapse:collapse;table-layout:fixed}
.hubx table.cc-flat thead th{font-size:10.5px;font-weight:400;text-transform:uppercase;letter-spacing:0.07em;color:var(--muted-foreground);text-align:left;padding:13px 14px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);white-space:nowrap;background:transparent}
.hubx table.cc-flat td{padding:15px 14px;font-size:13.5px;font-weight:300;color:var(--foreground);vertical-align:middle;border:none}
.hubx table.cc-flat tbody tr:first-child td{padding-top:18px}
.hubx table.cc-flat tbody tr:hover td{background:rgba(38,24,17,0.035)}
.hubx .cc-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hubx .cc-rename{font-family:inherit;font-size:13.5px;font-weight:300;color:var(--foreground);background:var(--card);border:1px solid #C9C0BD;border-radius:5px;padding:3px 7px;width:96%;outline:none}
.hubx .cc-trig2{display:flex;align-items:center;gap:10px;min-width:0}
.hubx .cc-trig2 svg{width:15px;height:15px;color:var(--muted-foreground);flex-shrink:0}
.hubx .cc-trig2 span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hubx .cc-pill{display:inline-flex;align-items:center;font-size:12px;font-weight:300;padding:3px 10px;border-radius:5px;background:var(--muted);color:var(--foreground);white-space:nowrap}
.hubx table.cc-flat tbody tr:hover .cc-pill{background:#FFFDFB}
.hubx .cc-colchips{display:flex;align-items:center;flex-wrap:nowrap;gap:7px;min-width:0;overflow:hidden}
.hubx .cc-colchip{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;font-size:12.5px;font-weight:300;padding:4px 9px;border-radius:5px;background:var(--muted);color:var(--foreground);white-space:nowrap}
.hubx table.cc-flat tbody tr:hover .cc-colchip{background:#FFFDFB}
.hubx .cc-colchip svg{width:12px;height:12px;color:var(--muted-foreground);flex-shrink:0}
.hubx .cc-colmore{font-size:12.5px;font-weight:300;color:var(--muted-foreground);flex-shrink:0;white-space:nowrap}
.hubx .cc-colmore[hidden]{display:none}
.hubx td.cc-actions{width:52px;text-align:right;position:relative}
.hubx .cc-more{opacity:0;width:26px;height:26px;border:none;border-radius:6px;background:transparent;color:var(--muted-foreground);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:opacity .12s}
.hubx .cc-more svg{width:17px;height:17px}
.hubx table.cc-flat tbody tr:hover .cc-more,.hubx .cc-actions.menu-open .cc-more{opacity:1}
.hubx .cc-actions.menu-open .cc-more{color:var(--foreground);background:var(--muted)}
.hubx .cc-menu{position:absolute;top:calc(100% - 6px);right:10px;z-index:60;min-width:186px;padding:6px;background:#FFFDFB;border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 34px rgba(38,24,17,0.14),0 2px 6px rgba(38,24,17,0.06);display:none;text-align:left}
.hubx .cc-menu.open{display:block}
.hubx .cc-menu.up{top:auto;bottom:calc(100% - 6px)}
.hubx .cc-sort .cc-menu{top:calc(100% + 4px);right:0;min-width:206px}
.hubx .cc-mi{display:flex;align-items:center;gap:12px;width:100%;padding:9px 11px;font-family:inherit;font-size:13.5px;font-weight:300;color:var(--foreground);background:transparent;border:none;border-radius:6px;cursor:pointer;text-align:left;white-space:nowrap}
.hubx .cc-mi:hover{background:var(--muted)}
.hubx .cc-mi svg{width:16px;height:16px;color:var(--muted-foreground);flex-shrink:0}
.hubx .cc-mi .cc-mi-check{margin-left:auto;width:14px;height:14px;color:var(--foreground);opacity:0}
.hubx .cc-mi.on .cc-mi-check{opacity:1}
.hubx .cc-msep{height:1px;background:var(--border);margin:5px -6px}
/* ── Control · Tasks ─────────────────────────────────────────────────────── */
.hubx .cc-filters{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:2px 0 14px}
.hubx .cc-fchip{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:12.5px;font-weight:300;padding:5px 11px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted-foreground);cursor:pointer;white-space:nowrap}
.hubx .cc-fchip span{font-variant-numeric:tabular-nums;opacity:.65}
.hubx .cc-fchip:hover{color:var(--foreground);border-color:#DCD5D0}
.hubx .cc-fchip.is-on{background:#33302E;border-color:#33302E;color:#FFFDFB}
.hubx .cc-fchip.is-on span{opacity:.7}
.hubx table.cc-tasks tbody tr{cursor:pointer}
.hubx table.cc-tasks td,.hubx table.cc-tasks thead th{padding-left:12px;padding-right:12px}
.hubx table.cc-tasks{table-layout:auto}
.hubx table.cc-tasks th:first-child,.hubx table.cc-tasks td:first-child{width:100%;max-width:0}
.hubx table.cc-tasks th,.hubx table.cc-tasks td{white-space:nowrap}
.hubx #cc-tasks.w-md table.cc-tasks th:nth-child(3),.hubx #cc-tasks.w-md table.cc-tasks td:nth-child(3),
.hubx #cc-tasks.w-md table.cc-tasks th:nth-child(4),.hubx #cc-tasks.w-md table.cc-tasks td:nth-child(4),
.hubx #cc-tasks.w-md table.cc-tasks th:nth-child(5),.hubx #cc-tasks.w-md table.cc-tasks td:nth-child(5){display:none}
.hubx #cc-tasks.w-sm table.cc-tasks th:nth-child(2),.hubx #cc-tasks.w-sm table.cc-tasks td:nth-child(2),
.hubx #cc-tasks.w-sm table.cc-tasks th:nth-child(3),.hubx #cc-tasks.w-sm table.cc-tasks td:nth-child(3),
.hubx #cc-tasks.w-sm table.cc-tasks th:nth-child(4),.hubx #cc-tasks.w-sm table.cc-tasks td:nth-child(4),
.hubx #cc-tasks.w-sm table.cc-tasks th:nth-child(5),.hubx #cc-tasks.w-sm table.cc-tasks td:nth-child(5){display:none}
.hubx #cc-tasks.w-sm .cc-filters{gap:6px}
.hubx table.cc-tasks td:first-child,.hubx table.cc-tasks thead th:first-child{padding-left:14px}
.hubx table.cc-tasks td:last-child,.hubx table.cc-tasks thead th:last-child{text-align:center;padding-right:12px}
.hubx .cc-task{display:flex;align-items:center;gap:10px;min-width:0}
.hubx .cc-task .cc-name{flex:1 1 auto;min-width:0}
.hubx .cc-typeic{display:inline-flex;flex-shrink:0;color:var(--muted-foreground)}
.hubx .cc-typeic svg{width:15px;height:15px}
.hubx .cc-sub{color:var(--muted-foreground);white-space:nowrap;display:block}
.hubx .cc-dash{color:var(--muted-foreground)}
.hubx .cc-progwrap{display:flex;flex-direction:column;gap:5px}
.hubx .cc-prog{display:block;height:4px;border-radius:999px;background:rgba(38,24,17,0.08);overflow:hidden;max-width:88px}
.hubx .cc-prog i{display:block;height:100%;border-radius:999px;background:#7D6E66;transition:width .5s ease}
.hubx .cc-prog__lbl{font-size:11.5px;color:var(--muted-foreground);white-space:nowrap}
.hubx .cc-prio{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:var(--foreground)}
.hubx .cc-prio i{width:6px;height:6px;border-radius:50%;background:var(--muted-foreground);flex-shrink:0}
.hubx .cc-prio.p-high i{background:#C0544B}
.hubx .cc-prio.p-medium i{background:#C99A3C}
.hubx .cc-prio.p-low i{background:#B4ABA4}
.hubx .cc-av{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(38,24,17,0.06);color:var(--foreground);font-size:10.5px;font-weight:500;letter-spacing:0.02em}
.hubx .cc-pill--done{color:#2E6E48}
.hubx table.cc-flat tbody tr.is-done .cc-name,.hubx table.cc-flat tbody tr.is-done .cc-sub{color:var(--muted-foreground)}
.hubx table.cc-flat tbody tr.is-done .cc-name{text-decoration:line-through;text-decoration-color:rgba(38,24,17,0.28)}
.hubx table.cc-flat tbody tr.is-done .cc-prog i{background:#7FA98E}
.hubx .cc-type{display:flex;align-items:center;gap:8px;color:var(--foreground);white-space:nowrap}
.hubx .cc-type .cc-typeic{flex-shrink:0}
.hubx table.cc-tasks tbody.cc-donebody.is-collapsed tr.cc-taskrow{display:none}
.hubx table.cc-tasks tr.cc-grouprow td{padding:6px 0 6px 14px;border-top:1px solid var(--border);text-align:left}
.hubx table.cc-tasks tr.cc-grouprow:hover td{background:transparent}
.hubx .cc-grouptog{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:12.5px;font-weight:400;color:var(--muted-foreground);background:transparent;border:none;cursor:pointer;padding:8px 10px 8px 0}
.hubx .cc-grouptog:hover{color:var(--foreground)}
.hubx .cc-grouptog__chev{width:13px;height:13px;transition:transform .18s}
.hubx tbody.cc-donebody:not(.is-collapsed) .cc-grouptog__chev{transform:rotate(90deg)}
.hubx .cc-groupn{font-variant-numeric:tabular-nums;opacity:.7}