.tp-wrap { padding-bottom: 42px; background: #edf3f7; }
.tp-container { width: 96%; max-width: 1680px; }
.tp-page-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 16px; padding: 22px 26px; border-radius: 8px; background: linear-gradient(120deg,#193d59,#245f83); box-shadow: 0 5px 16px rgba(21,55,78,.16); color: #fff; }
.tp-eyebrow { color: #9ed0ee; font-size: 11px; font-weight: bold; letter-spacing: .17em; }
.tp-page-header h1 { margin: 3px 0 5px; font-size: 25px; font-weight: bold; }
.tp-page-header p { margin: 0; color: #dceaf3; font-size: 13px; }
.tp-sub-action { flex: 0 0 auto; padding: 10px 15px; border: 1px solid rgba(255,255,255,.45); border-radius: 6px; color: #fff; font-weight: bold; }
.tp-sub-action:hover, .tp-sub-action:focus { background: #fff; color: #245f83; text-decoration: none; }
.tp-kind-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 16px; }
.tp-kind-tabs a { position: relative; display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 13px 15px 12px; border: 1px solid #d5e0e7; border-radius: 7px; background: #fff; color: #506873; box-shadow: 0 2px 7px rgba(35,66,83,.04); text-align: center; }
.tp-kind-tabs a:hover { border-color: #6fa6c7; color: #1769aa; text-decoration: none; }
.tp-kind-tabs a.is-active { border-color: #1769aa; background: #1769aa; color: #fff; box-shadow: 0 4px 11px rgba(23,105,170,.2); }
.tp-kind-tabs span { font-size: 15px; font-weight: bold; }
.tp-kind-tabs small { opacity: .75; font-size: 11px; }
.tp-group-switcher { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 12px; padding: 12px 16px; background: #fff; }
.tp-group-switcher-copy strong, .tp-group-switcher-copy span { display: block; }
.tp-group-switcher-copy strong { color: #333; font-size: 15px; }
.tp-group-switcher-copy span { margin-top: 3px; color: #777; font-size: 11px; }
.tp-group-switcher-control { display: flex; gap: 8px; width: 620px; max-width: 100%; margin-bottom: 8px; }
.tp-group-switcher-control .form-control { flex: 1; width: auto; height: 38px; }
.tp-group-switcher-control .btn { flex: 0 0 auto; }
.tp-filter-card, .tp-panel { margin-bottom: 16px; padding: 20px 22px; border: 1px solid #d9e4ea; border-radius: 8px; background: #fff; box-shadow: 0 3px 12px rgba(31,67,88,.06); }
.tp-filter-card { padding-bottom: 18px; }
.tp-section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid #e2e9ed; }
.tp-section-heading-compact { margin-bottom: 13px; padding-bottom: 10px; }
.tp-section-heading > div:nth-child(2) { flex: 1; }
.tp-section-heading h2 { margin: 0 0 3px; color: #263f4d; font-size: 18px; font-weight: bold; }
.tp-section-heading p { margin: 0; color: #718691; font-size: 12px; }
.tp-section-icon { display: block; width: 38px; height: 38px; border-radius: 9px; background: #e7f1f8; color: #1769aa; font-size: 14px; font-weight: bold; line-height: 38px; text-align: center; }
.tp-section-icon-calendar { background: #e8f5ef; color: #1c8055; }
.tp-count-badge { min-width: 54px; padding: 6px 10px; border-radius: 18px; background: #edf3f7; color: #4a6472; font-size: 13px; font-weight: bold; text-align: center; }
.tp-filter-form { display: flex; flex-wrap: nowrap; gap: 12px; align-items: end; padding: 0 8px 4px; }
.tp-filter-form label { margin: 0; color: #536b78; font-size: 12px; }
.tp-filter-form label > span:first-child { display: block; margin-bottom: 5px; font-weight: bold; }
.tp-filter-form .form-control { height: 39px; border-color: #cbd9e1; border-radius: 5px; box-shadow: none; }
.tp-filter-form > label:not(.tp-date-range) { flex: 1 1 145px; min-width: 145px; max-width: 180px; }
.tp-filter-form .tp-date-range { flex: 2 1 300px; min-width: 280px; }
.tp-filter-form > .btn { flex: 0 0 auto; height: 39px; }
.tp-filter-form .tp-checkbox-filter { display: flex; flex: 0 1 210px; align-items: center; gap: 7px; min-width: 190px; min-height: 39px; padding: 7px 9px; border: 1px solid #cbd9e1; background: #f8fafb; cursor: pointer; }
.tp-filter-form .tp-checkbox-filter[hidden] { display: none !important; }
.tp-filter-form .tp-checkbox-filter input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; }
.tp-filter-form .tp-checkbox-filter > span:first-of-type { display: inline; margin: 0; line-height: 1.35; }
.tp-date-inputs { display: grid !important; grid-template-columns: 1fr 18px 1fr; gap: 6px; align-items: center; }
.tp-date-inputs b { color: #8598a2; text-align: center; }
.tp-primary-button, .tp-outline-button { display: inline-block; padding: 10px 17px; border: 1px solid #1769aa; border-radius: 5px; font-size: 13px; font-weight: bold; text-align: center; }
button.tp-primary-button { min-height: 39px; }
.tp-primary-button { background: #1769aa; color: #fff; }
.tp-primary-button:hover, .tp-primary-button:focus { background: #10558c; color: #fff; text-decoration: none; }
.tp-outline-button { background: #fff; color: #1769aa; }
.tp-outline-button:hover, .tp-outline-button:focus { background: #edf6fc; color: #10558c; text-decoration: none; }
.tp-small-button { padding: 8px 12px; }
.tp-alert { display: flex; gap: 10px; margin-top: 13px; padding: 11px 14px; border-radius: 5px; font-size: 13px; }
.tp-alert-danger { border: 1px solid #efc1be; background: #fff1f0; color: #a43b35; }
.tp-renewal-list { display: grid; gap: 8px; }
.tp-renewal-row { display: grid; grid-template-columns: 44px minmax(220px,1fr) 190px auto; gap: 13px; align-items: center; padding: 12px 14px; border: 1px solid #dee7ec; border-radius: 7px; background: #fbfcfd; }
.tp-renewal-row:hover { border-color: #aac9dd; background: #f7fbfe; }
.tp-avatar { width: 42px; height: 42px; border-radius: 50%; background: #dfeef7; color: #1769aa; font-size: 16px; font-weight: bold; line-height: 42px; text-align: center; }
.tp-renewal-person strong, .tp-renewal-person span, .tp-renewal-date small, .tp-renewal-date strong { display: block; }
.tp-renewal-person strong { color: #263f4d; font-size: 14px; }
.tp-renewal-person span, .tp-renewal-date small { margin-top: 3px; color: #778b96; font-size: 11px; }
.tp-renewal-date strong { margin-top: 2px; color: #344f5d; font-size: 13px; }
.tp-renewal-actions { display: flex; gap: 7px; justify-content: flex-end; }
.tp-legend { display: flex; flex-wrap: wrap; gap: 15px; margin: -3px 0 13px; color: #667d89; font-size: 11px; }
.tp-dot { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; }
.tp-dot-todo { background: #a9b7bf; }.tp-dot-doing { background: #2f83bd; }.tp-dot-done { background: #31a36c; }.tp-dot-late { background: #d84b43; }.tp-dot-none { background: #d3932d; }
.tp-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: visible; border: 1px solid #d7e2e8; border-radius: 7px; -webkit-overflow-scrolling: touch; }
.tp-scroll-guide { margin: 0 0 8px; padding: 7px 10px; background: #f5f5f5; color: #666; font-size: 11px; }
.tp-scroll-guide span { margin-right: 5px; color: steelblue; font-size: 14px; font-weight: bold; }
.tp-progress-table { width: 100%; min-width: 1120px; border-collapse: separate; border-spacing: 0; background: #fff; }
.tp-progress-table th { min-width: 120px; padding: 9px 8px; border-right: 1px solid #d7e2e8; border-bottom: 1px solid #c8d7df; background: #edf3f7; color: #3c5664; font-size: 12px; text-align: center; vertical-align: middle; }
.tp-progress-table th small { display: block; margin-top: 2px; color: #b06e17; }
.tp-progress-table td { height: 72px; padding: 7px; border-right: 1px solid #e0e8ed; border-bottom: 1px solid #e0e8ed; color: #405a67; text-align: center; vertical-align: middle; }
.tp-progress-table tbody tr:hover td { background: #f7fafc; }
.tp-progress-table tr:last-child td { border-bottom: 0; }
.tp-progress-table th:last-child, .tp-progress-table td:last-child { border-right: 0; }
.tp-sticky-column { position: sticky; left: 0; z-index: 2; width: 250px; min-width: 250px !important; max-width: 250px; text-align: left !important; }
.tp-member-column { width: 92px; min-width: 92px !important; max-width: 92px; }
.tp-status-column { width: 104px; min-width: 104px !important; max-width: 104px; }
.tp-workflow-progress-column { width: 210px; min-width: 210px !important; max-width: 210px; }
.tp-title-actions, .tp-title-count { float: right; }
.tp-title-actions { margin-top: -2px; }
.tp-title-actions .btn { color: #245779; font-size: 12px; font-weight: bold; }
.tp-title-count { min-width: 44px; padding: 0 8px; border-radius: 3px; background: rgba(255,255,255,.18); font-size: 12px; line-height: 28px; text-align: center; }
.tp-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0; padding: 10px 12px; border: 1px solid #d9e2e7; background: #f7f9fa; color: #536773; }
.tp-pagination > span { font-weight: bold; }
.tp-pagination-actions { display: flex; align-items: center; gap: 6px; }
.tp-pagination-actions strong { min-width: 88px; text-align: center; }
.tp-pagination-bottom { margin: 14px 0 0; }
.tp-progress-table thead .tp-sticky-column { z-index: 3; background: #e5eef3; }
.tp-progress-table tbody .tp-sticky-column { background: #fff; box-shadow: 5px 0 8px rgba(40,70,86,.05); }
.tp-progress-table tbody tr:hover .tp-sticky-column { background: #f7fafc; }
.tp-project-cell strong, .tp-project-cell span, .tp-project-cell a { display: block; }
.tp-project-cell strong { color: #243f4e; font-size: 14px; }
.tp-fixed-term-mark { display: inline-block; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: #d9534f; color: #fff; font-size: 11px; font-style: normal; line-height: 20px; text-align: center; vertical-align: 1px; }
.tp-application-mark { display: inline-block; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: #d9534f; color: #fff; font-size: 11px; font-style: normal; line-height: 20px; text-align: center; vertical-align: 1px; }
.tp-project-cell span { margin: 3px 0 6px; color: #748994; font-size: 11px; }
.tp-project-cell a { color: #1769aa; font-size: 12px; font-weight: bold; }
.tp-project-cell .tp-project-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 14px; margin-top: 7px; }
.tp-project-cell .tp-project-actions a { display: inline-block; }
.tp-member-chip { display: inline-block; max-width: 130px; padding: 6px 9px; border-radius: 14px; background: #edf3f6; color: #516a77; font-size: 11px; }
.tp-project-status { display: inline-block; min-width: 78px; padding: 6px 7px; border: 1px solid transparent; border-radius: 3px; font-size: 11px; font-weight: bold; text-align: center; }
.tp-project-status-unprocessed { border-color: #e5c177; background: #fff7e6; color: #93610d; }
.tp-project-status-processing { border-color: #9bc7df; background: #edf7fc; color: #216d9f; }
.tp-project-status-active { border-color: #9bc7df; background: #edf7fc; color: #216d9f; }
.tp-project-status-done { border-color: #b9dfca; background: #eff9f3; color: #267c53; }
.tp-project-status-overdue { border-color: #efc2bf; background: #fff1f0; color: #b13b35; }
.tp-workflow-stage { min-width: 188px; padding: 8px 9px 7px; border: 1px solid #c8dbe7; background: #fff; text-align: left; }
.tp-workflow-stage-current { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.tp-workflow-stage-current strong { color: #245f83; font-size: 12px; }
.tp-workflow-stage-current span { color: #718793; font-size: 10px; font-weight: bold; }
.tp-workflow-stage-bar { display: grid; grid-template-columns: repeat(5,1fr); gap: 3px; }
.tp-workflow-stage-bar i { display: block; height: 6px; background: #dfe6ea; }
.tp-workflow-stage-bar i.is-reached { background: #77afd0; }
.tp-workflow-stage-bar i.is-current { background: #1769aa; }
.tp-workflow-stage-labels { display: grid; grid-template-columns: repeat(5,1fr); gap: 3px; margin-top: 4px; color: #8b9ba3; font-size: 9px; text-align: center; }
.tp-workflow-task-note { display: block; margin-top: 6px; color: #8a671d; font-size: 9px; font-weight: bold; text-align: right; }
.tp-workflow-stage-stopped { border-color: #e6c3c0; background: #fff8f7; }
.tp-workflow-stage-stopped .tp-workflow-stage-current strong { color: #a84b45; }
.tp-workflow-stage-stopped .tp-workflow-stage-bar i.is-reached { background: #d98c86; }
.tp-workflow-stage-stopped .tp-workflow-stage-bar i.is-current { background: #bd4f47; }
.tp-workflow-stage-waiting { border-color: #ead3a3; background: #fffaf0; }
.tp-workflow-stage-waiting .tp-workflow-stage-current strong { color: #956719; }
.tp-workflow-stage-waiting .tp-workflow-stage-bar i.is-reached,
.tp-workflow-stage-waiting .tp-workflow-stage-bar i.is-current { background: #d39a37; }
.tp-renewal-pending-row td { background: #fffdf8; }
.tp-renewal-pending-row .tp-sticky-column { background: #fffdf8 !important; }
.tp-cancel-processing-row td { background: #f8fcff; }
.tp-cancel-processing-row .tp-sticky-column { background: #f8fcff !important; }
.tp-contract-start-row td { background: #fffdf8; }
.tp-contract-start-row .tp-sticky-column { background: #fffdf8 !important; }
.tp-progress-state { display: block; min-width: 104px; padding: 9px 7px; border: 1px solid transparent; border-radius: 6px; }
.tp-progress-state:hover, .tp-progress-state:focus { text-decoration: none; filter: brightness(.97); }
.tp-progress-state strong, .tp-progress-state span, .tp-progress-state small { display: block; }
.tp-progress-state strong { font-size: 12px; }
.tp-progress-state span { margin-top: 3px; font-size: 11px; }
.tp-progress-state small { margin-top: 3px; opacity: .8; font-size: 10px; }
.tp-progress-detail > summary { cursor: pointer; list-style: none; }
.tp-progress-detail > summary::-webkit-details-marker { display: none; }
.tp-progress-detail[open]::before { position: fixed; z-index: 1040; top: 0; right: 0; bottom: 0; left: 0; background: rgba(15,30,40,.45); content: ''; }
.tp-task-breakdown { position: fixed; z-index: 1041; top: 50%; left: 50%; width: 460px; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px); padding: 0 18px 16px; overflow-y: auto; border: 1px solid #aebfca; background: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.3); color: #3d5663; text-align: left; transform: translate(-50%,-50%); }
.tp-task-breakdown-header { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -18px 12px; padding: 12px 16px; border-bottom: 1px solid #d8e2e7; background: midnightblue; color: #fff; }
.tp-task-breakdown-header strong { font-size: 15px; }
.tp-task-breakdown-close { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.55); background: transparent; color: #fff; font-size: 22px; line-height: 26px; }
.tp-task-breakdown-close:hover, .tp-task-breakdown-close:focus { background: #fff; color: midnightblue; }
.tp-task-breakdown-item { padding: 11px 0; border-bottom: 1px solid #e3e9ed; }
.tp-task-breakdown-item:last-child { border-bottom: 0; }
.tp-task-breakdown-item > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tp-task-breakdown-item > div > strong { color: #294755; font-size: 13px; line-height: 1.5; }
.tp-task-breakdown-item p { display: flex; gap: 14px; margin: 5px 0 0; color: #71858f; font-size: 11px; }
.tp-task-breakdown-footer { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #d8e2e7; text-align: center; }
.tp-task-breakdown-footer .btn { min-width: 260px; }
.tp-task-state { flex: 0 0 auto; min-width: 54px; padding: 3px 6px; border: 1px solid transparent; font-size: 10px; font-weight: bold; text-align: center; }
.tp-task-state-todo { border-color: #d7e0e5; background: #f4f6f7; color: #647883; }
.tp-task-state-doing { border-color: #bbd8ea; background: #edf7fd; color: #216d9f; }
.tp-task-state-done { border-color: #b9dfca; background: #eff9f3; color: #267c53; }
.tp-task-state-late { border-color: #efc2bf; background: #fff1f0; color: #b13b35; }
.tp-state-todo { border-color: #d7e0e5; background: #f4f6f7; color: #647883; }.tp-state-doing { border-color: #bbd8ea; background: #edf7fd; color: #216d9f; }.tp-state-done { border-color: #b9dfca; background: #eff9f3; color: #267c53; }.tp-state-late { border-color: #efc2bf; background: #fff1f0; color: #b13b35; }.tp-state-none { border-color: #ecd39c; background: #fff8e9; color: #9a6718; }
.tp-no-task { color: #abb8bf; }
.tp-none-heading, .tp-none-cell { background: #fffaf0 !important; }
.tp-empty { padding: 28px 15px; color: #758b96; text-align: center; }
.tp-empty > span { display: block; width: 38px; height: 38px; margin: 0 auto 8px; border-radius: 50%; background: #edf3f6; color: #6b8592; font-size: 18px; line-height: 38px; }
.tp-empty strong { display: block; color: #48616e; }
.tp-empty p { margin: 4px 0 0; font-size: 12px; }
.tp-settings-container { width: 92%; max-width: 1380px; }
.tp-settings-header { margin-bottom: 16px; }
.tp-guide-callout { display: flex; gap: 12px; margin-bottom: 16px; padding: 14px 17px; border: 1px solid #bad8e9; border-radius: 7px; background: #f0f8fc; color: #315b72; }
.tp-guide-callout > span { flex: 0 0 25px; height: 25px; border-radius: 50%; background: #1769aa; color: #fff; font-family: serif; font-weight: bold; line-height: 25px; text-align: center; }
.tp-guide-callout strong { display: block; margin-bottom: 2px; }
.tp-guide-callout p { margin: 0; color: #627e8d; font-size: 12px; }
.tp-settings-table-wrap { border: 1px solid #d8e3e9; border-radius: 7px; }
.tp-settings-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.tp-settings-table th { padding: 11px 12px; border-right: 1px solid #d9e4e9; border-bottom: 1px solid #cad9e1; background: #edf3f7; color: #415d6b; font-size: 12px; text-align: center; }
.tp-settings-table td { padding: 10px 12px; border-right: 1px solid #e1e9ed; border-bottom: 1px solid #e1e9ed; text-align: center; vertical-align: middle; }
.tp-settings-table th:last-child, .tp-settings-table td:last-child { border-right: 0; }
.tp-settings-table tr:last-child td { border-bottom: 0; }
.tp-settings-table tbody tr:hover td { background: #f8fbfc; }
.tp-settings-table tr.is-inactive td { background: #f7f7f7; color: #89979e; }
.tp-settings-table tr.is-inactive .form-control { background: #f1f1f1; color: #788991; }
.tp-order-column { width: 86px; }
.tp-order-input { width: 65px; margin: 0 auto; text-align: center; }
.tp-name-input { min-width: 230px; }
.tp-reference-count { display: inline-block; min-width: 58px; padding: 5px 8px; border-radius: 14px; background: #eef3f6; color: #607681; font-size: 11px; }
.tp-reference-count strong { color: #315060; font-size: 14px; }
.tp-status-pill { display: inline-block; padding: 5px 9px; border-radius: 14px; font-size: 11px; font-weight: bold; }
.tp-status-pill i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; }
.tp-status-active { background: #eaf7ef; color: #2b8157; }.tp-status-active i { background: #31a36c; }
.tp-status-inactive { background: #eceff1; color: #71818a; }.tp-status-inactive i { background: #8e9da5; }
.tp-text-action { padding: 4px 6px; border: 0; background: transparent; color: #1769aa; font-size: 11px; text-decoration: underline; }
.tp-text-action-danger { color: #b24943; }
.tp-add-panel { border-left: 4px solid #1769aa; }
.tp-add-form { display: grid; grid-template-columns: auto minmax(260px,520px) auto 1fr; gap: 10px; align-items: center; }
.tp-add-form label { margin: 0; color: #506976; font-size: 12px; }
.tp-dashboard-entry { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding: 15px 18px; border: 1px solid #bdd7e7; border-left: 5px solid #1769aa; border-radius: 7px; background: #f4f9fc; box-shadow: 0 3px 10px rgba(28,72,98,.07); }
.tp-dashboard-entry-copy { display: flex; align-items: center; gap: 12px; }.tp-dashboard-entry-copy h2 { margin: 0 0 3px; color: #294958; font-size: 16px; font-weight: bold; }.tp-dashboard-entry-copy p { margin: 0; color: #718792; font-size: 12px; }
.tp-dashboard-entry-links { display: flex; gap: 6px; }.tp-dashboard-entry-links a { padding: 8px 11px; border: 1px solid #abc9dc; border-radius: 5px; background: #fff; color: #1769aa; font-size: 12px; font-weight: bold; }.tp-dashboard-entry-links a:hover { border-color: #1769aa; background: #1769aa; color: #fff; text-decoration: none; }
.tp-user-setting-entry { display: flex; align-items: center; gap: 9px; padding: 7px 2px; }.tp-user-setting-entry > div { flex: 1; }.tp-user-setting-entry strong, .tp-user-setting-entry span { display: block; }.tp-user-setting-entry strong { color: #36525f; }.tp-user-setting-entry span { margin-top: 2px; color: #788b94; font-size: 11px; }
@media (max-width: 900px) { .tp-filter-form { grid-template-columns: 1fr 1fr; } .tp-renewal-row { grid-template-columns: 44px 1fr; } .tp-renewal-date, .tp-renewal-actions { grid-column: 2; } .tp-renewal-actions { justify-content: flex-start; } }
@media (max-width: 620px) { .tp-container, .tp-settings-container { width: 100%; } .tp-page-header { align-items: flex-start; padding: 18px; } .tp-page-header p, .tp-sub-action { display: none; } .tp-kind-tabs { grid-template-columns: 1fr 1fr; } .tp-kind-tabs small { display: none; } .tp-filter-form { grid-template-columns: 1fr; } .tp-date-inputs { grid-template-columns: 1fr; } .tp-date-inputs b { display: none; } .tp-filter-card, .tp-panel { padding: 16px 13px; } .tp-renewal-actions { flex-wrap: wrap; } .tp-add-form { grid-template-columns: 1fr; } .tp-dashboard-entry, .tp-user-setting-entry { align-items: stretch; flex-direction: column; } .tp-dashboard-entry-links { flex-wrap: wrap; } }

/* 既存画面から遷移した利用者が別サービスに見えないよう、ReDocS共通の画面骨格へ揃える。 */
.tp-wrap { background: #40AAEF; }
.tp-container, .tp-settings-container { width: 1200px !important; max-width: none; }
.tp-page-header { margin: 12px 0; padding: 8px 16px; border: 0; border-radius: 0; background: midnightblue; box-shadow: none; }
.tp-page-header h1 { margin: 0; font-size: 18px; line-height: 32px; }
.tp-page-header p { display: none; }
.tp-eyebrow { display: none; }
.tp-sub-action { padding: 7px 13px; border-radius: 3px; box-shadow: 1px 2px 1.5px rgba(0,0,0,.25); }
.tp-kind-tabs { gap: 0; margin: 0 0 12px; border: 1px solid #ddd; background: #fff; }
.tp-kind-tabs a { padding: 10px 12px; border: 0; border-right: 1px solid #ddd; border-radius: 0; box-shadow: none; color: steelblue; }
.tp-kind-tabs a:last-child { border-right: 0; }
.tp-kind-tabs a.is-active { background: steelblue; box-shadow: none; }
.tp-filter-card, .tp-panel { margin: 12px 0; padding: 12px 8px; border: 0; border-radius: 0; box-shadow: none; }
.tp-section-heading, .tp-section-heading-compact { margin: 10px 0 16px; padding: 4px 10px; border: 0; border-left: 12px solid steelblue; border-bottom: 2px solid steelblue; }
.tp-section-heading h2 { font-size: 20px; line-height: 30px; }
.tp-section-heading p { color: #657985; }
.tp-section-icon { display: none; }
.tp-count-badge { border-radius: 3px; background: #eee; }
.tp-filter-form { padding: 0 8px 4px; }
.tp-primary-button, .tp-outline-button { border-radius: 3px; box-shadow: 1px 2px 1.5px silver; }
.tp-primary-button { border-color: steelblue; background: steelblue; }
.tp-primary-button:hover, .tp-primary-button:focus { border-color: #337ab7; background: #337ab7; }
.tp-outline-button { border-color: #ccc; color: #333; }
.tp-outline-button:hover, .tp-outline-button:focus { border-color: #adadad; background: #e6e6e6; color: #333; }
.tp-renewal-row { border-radius: 0; background: #fff; }
.tp-avatar { background: #e5f1f8; color: steelblue; }
.tp-table-scroll, .tp-settings-table-wrap { border-radius: 0; }
.tp-progress-table th, .tp-settings-table th { background: #f5f5f5; color: #333; }
.tp-progress-table thead .tp-sticky-column { background: #f5f5f5; }
.tp-progress-state, .tp-status-pill, .tp-reference-count, .tp-member-chip { border-radius: 3px; }
.tp-guide-callout { border-radius: 0; background: #eef8fd; }
.tp-guide-callout > span { border-radius: 0; background: steelblue; }
.tp-add-panel { border-left: 0; }
.tp-dashboard-entry { margin-bottom: 12px; padding: 12px 14px; border-radius: 0; border-left-color: steelblue; background: #fff; box-shadow: none; }
.tp-dashboard-entry-links a { border-radius: 3px; color: steelblue; }
.tp-dashboard-entry-links a:hover { border-color: steelblue; background: steelblue; }
@media (max-width: 1220px) { .tp-container, .tp-settings-container { width: 96% !important; } }
@media (max-width: 900px) { .tp-filter-form { align-items: stretch; flex-wrap: wrap; } .tp-filter-form > label:not(.tp-date-range), .tp-filter-form .tp-date-range { flex: 1 1 300px; } }
@media (max-width: 760px) { .tp-group-switcher-control { width: 100%; } .tp-group-switcher-control .form-control { min-width: 0; } }

table.common.tp-progress-table th { min-width: 120px; padding: 9px 8px; }
table.common.tp-progress-table td { height: 72px; padding: 7px; }
table.common.tp-progress-table .tp-sticky-column { min-width: 250px !important; }
table.common.tp-progress-table .tp-member-column { min-width: 92px !important; }
table.common.tp-progress-table .tp-status-column { min-width: 104px !important; }
table.common.tp-progress-table .tp-workflow-progress-column { min-width: 210px !important; }
table.common.tp-progress-table thead th.tp-sticky-column { background: midnightblue; color: #fff; }
table.common.tp-progress-table thead th.tp-none-heading { background: #fff4d8 !important; color: #7a4b00; }
table.common.tp-progress-table thead th.tp-none-heading small { color: #9a6718; }

/* カテゴリー設定は既存画面の骨格を使い、並べ替え対象だけをカードとして視認できるようにする。 */
.tp-category-tabs { margin-bottom: 16px; }
.tp-category-tabs > li { width: 20%; text-align: center; }
.tp-category-tabs > li > a { margin-right: 0; font-weight: bold; }
.tp-category-note { margin: 12px 0; }
.tp-category-card-list { margin-top: 12px; }
.tp-category-card { display: grid; grid-template-columns: 70px minmax(280px,1fr) 150px 170px; gap: 14px; align-items: center; margin-bottom: 8px; padding: 12px; border: 1px solid #ccd8df; border-left: 5px solid steelblue; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.tp-category-card.is-inactive { border-left-color: #aaa; background: #f5f5f5; }
.tp-category-card.is-new { border-left-color: #5bc0de; background: #f4fbfe; }
.tp-category-card.is-pending-delete { border-left-color: #888; background: #eee; }
.tp-category-card.is-error { border-color: #ec5840; }
.tp-category-card.is-pending-delete .tp-category-drag-handle, .tp-category-card.is-pending-delete .tp-category-card-main, .tp-category-card.is-pending-delete .tp-category-card-counts, .tp-category-card.is-pending-delete .tp-category-active-check { opacity: .45; }
.tp-category-drag-handle { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 54px; border-right: 1px solid #d9e1e6; color: steelblue; cursor: move; cursor: grab; user-select: none; }
.tp-category-drag-handle:active { cursor: grabbing; }
.tp-category-order-number { width: 25px; height: 25px; border-radius: 50%; background: steelblue; color: #fff; font-weight: bold; line-height: 25px; text-align: center; }
.tp-category-card.is-inactive .tp-category-order-number { background: #888; }
.tp-category-drag-icon { font-size: 20px; line-height: 1; }
.tp-category-card-main label { display: block; margin-bottom: 5px; color: #555; font-size: 12px; }
.tp-category-card-main .tp-name-input { width: 100%; min-width: 0; }
.tp-category-card-counts { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; }
.tp-category-card-counts > div { padding: 7px 8px; border: 1px solid #dde5e9; background: #f8fafb; text-align: center; }
.tp-category-card-counts dt { color: #6b7d89; font-size: 11px; font-weight: normal; }
.tp-category-card-counts dd { margin: 2px 0 0; color: #2f4d60; }
.tp-category-card-counts dd strong { font-size: 16px; }
.tp-category-card-actions { display: flex; align-items: center; flex-direction: column; gap: 8px; }
.tp-category-card-actions .btn { width: 150px; }
.tp-category-card-actions .tp-category-delete { width: auto; min-width: 92px; padding-right: 14px; padding-left: 14px; }
.tp-category-active-check { display: flex; align-items: center; justify-content: center; gap: 7px; width: 150px; margin: 0; padding: 8px 10px; border: 1px solid #cbd7dd; background: #fff; color: #3f5966; cursor: pointer; }
.tp-category-active-check input { width: 16px; height: 16px; margin: 0; }
.tp-category-active-check span { font-size: 12px; font-weight: bold; }
.tp-category-card.is-inactive .tp-category-active-check { background: #eee; color: #777; }
.tp-category-new-handle { color: #5a899e; cursor: default; }
.tp-category-new-handle .tp-category-order-number { background: #5bc0de; }
.tp-status-new { background: #e7f7fc; color: #28718f; }
.tp-category-card-placeholder { height: 82px; margin-bottom: 8px; border: 2px dashed steelblue; background: #eef8fd; }
.tp-category-list-actions { padding: 4px 0 8px; }
.tp-recommended-category-box, .tp-setup-notice { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 12px 0; padding: 16px 18px; border: 1px solid #c8dbe6; border-left: 5px solid steelblue; background: #f5fafc; }
.tp-recommended-category-box strong, .tp-setup-notice strong { display: block; margin-bottom: 4px; color: #294d60; font-size: 15px; }
.tp-recommended-category-box p, .tp-setup-notice p { margin: 0; color: #607680; font-size: 12px; line-height: 1.7; }
.tp-recommended-category-box form { flex: 0 0 auto; }
.tp-master-section-switch a small { display: inline-block; width: 20px; height: 20px; margin-right: 6px; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; line-height: 18px; text-align: center; }
.tp-task-recommend-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 16px; align-items: center; margin: 10px 0 14px; padding: 12px 14px; border: 1px solid #d5e0e6; background: #f8fbfc; }
.tp-task-recommend-actions strong { display: block; color: #365766; font-size: 13px; }
.tp-task-recommend-actions span { color: #6b7f88; font-size: 11px; }
.tp-task-recommend-result { grid-column: 1 / -1; min-height: 16px; color: #377a9c !important; font-weight: bold; }
.tp-category-empty { padding: 24px; border: 1px solid #ddd; background: #fafafa; text-align: center; }
.tp-category-add-form { display: flex; align-items: flex-end; gap: 10px; max-width: 720px; }
.tp-category-add-form label { flex: 0 0 auto; margin: 0 0 9px; }
.tp-category-add-form .form-control { flex: 1; width: auto; }
.tp-category-add-form .btn { flex: 0 0 auto; }
@media (max-width: 900px) { .tp-category-card { grid-template-columns: 58px minmax(220px,1fr) 160px; } .tp-category-card-actions { grid-column: 2 / -1; align-items: center; flex-direction: row; justify-content: flex-end; } }
@media (max-width: 620px) { .tp-category-tabs > li { width: 50%; } .tp-category-card { grid-template-columns: 48px 1fr; } .tp-category-card-counts, .tp-category-card-actions { grid-column: 2; } .tp-category-add-form { align-items: stretch; flex-direction: column; } .tp-category-card-actions { align-items: flex-start; } .tp-recommended-category-box, .tp-setup-notice { align-items: stretch; flex-direction: column; } .tp-task-recommend-actions { grid-template-columns: 1fr; } .tp-task-recommend-result { grid-column: 1; } }

.tp-master-page { padding: 14px 8px 18px; }
.tp-master-selector { display: grid; grid-template-columns: 165px minmax(0, 1fr); align-items: center; padding: 10px 12px; border: 1px solid #d7dfe4; background: #f6f7f8; }
.tp-master-selector > label { margin: 0; color: #333; font-weight: bold; }
.tp-master-select-form { display: flex; gap: 8px; width: 720px; max-width: 100%; }
.tp-master-select-form .form-control { flex: 1; width: auto; }
.tp-master-select-form .btn { flex: 0 0 auto; }
.tp-master-section-switch { display: grid; grid-template-columns: 165px minmax(0, 1fr); align-items: center; margin-top: 12px; border: 1px solid #d7dfe4; background: #fff; }
.tp-master-section-switch > span { align-self: stretch; padding: 11px 12px; background: #f6f7f8; color: #555; font-weight: bold; }
.tp-master-section-switch > div { display: flex; gap: 22px; padding: 0 14px; }
.tp-master-section-switch a { position: relative; padding: 11px 4px 9px; color: #607985; font-weight: bold; }
.tp-master-section-switch a:hover, .tp-master-section-switch a:focus { color: steelblue; text-decoration: none; }
.tp-master-section-switch a.is-active { color: #1f6291; }
.tp-master-section-switch a.is-active:after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: steelblue; content: ''; }
.tp-master-tab-content { padding: 18px 8px 0; }
.tp-master-content-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding: 2px 10px 8px; border-left: 10px solid steelblue; border-bottom: 2px solid steelblue; }
.tp-master-content-heading h3 { margin: 0 0 3px; color: #333; font-size: 18px; font-weight: bold; }
.tp-master-content-heading p { margin: 0; color: #667b86; font-size: 11px; }
.tp-master-content-heading > a { flex: 0 0 auto; color: steelblue; font-size: 11px; font-weight: bold; }
.tp-master-name-field { margin-bottom: 14px; padding: 11px 12px; border: 1px solid #d8e0e5; background: #fafafa; }
.tp-master-name-field label { display: block; margin-bottom: 5px; color: #536b78; font-size: 11px; }
.tp-master-name-table { margin: 0 0 12px !important; }
.tp-master-name-table th { width: 150px !important; }
.tp-master-task-heading { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 2px solid midnightblue; background: #f5f5f5; }
.tp-master-task-heading > div strong, .tp-master-task-heading > div span { display: block; }
.tp-master-task-heading > div strong { color: #333; }
.tp-master-task-heading > div span { margin-top: 2px; color: #777; font-size: 10px; }
.tp-master-task-heading > span { min-width: 44px; padding: 4px 8px; background: #e7edf1; color: #526b78; font-size: 11px; font-weight: bold; text-align: center; }
.tp-master-task-list { border-right: 1px solid #d8e0e5; border-left: 1px solid #d8e0e5; }
.tp-master-task-card { display: grid; grid-template-columns: 56px minmax(280px, 360px) minmax(320px, 1fr) 76px; gap: 12px; align-items: stretch; padding: 11px 10px; border-bottom: 1px solid #d8e0e5; background: #fff; }
.tp-master-task-card:hover { background: #fafdff; }
.tp-master-task-card.is-error { box-shadow: inset 4px 0 #ec5840; }
.tp-master-task-handle { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; border-right: 1px solid #dde4e8; color: steelblue; cursor: move; cursor: grab; user-select: none; }
.tp-master-task-handle:active { cursor: grabbing; }
.tp-master-task-number { width: 23px; height: 23px; border-radius: 50%; background: steelblue; color: #fff; font-size: 11px; font-weight: bold; line-height: 23px; text-align: center; }
.tp-master-task-card label { display: block; margin: 0 0 4px; color: #536b78; font-size: 10px; }
.tp-master-task-card .label.need { margin-left: 5px; }
.tp-master-task-primary { display: flex; flex-direction: column; gap: 8px; }
.tp-master-task-name .form-control, .tp-master-task-category .form-control { height: 34px; }
.tp-master-task-actions { align-self: center; display: flex; gap: 6px; }
.tp-master-task-actions .btn { width: 100%; padding-right: 8px; padding-left: 8px; }
.tp-master-task-comment { display: flex; flex-direction: column; padding-left: 12px; border-left: 1px dashed #ccd8df; }
.tp-master-task-comment textarea.form-control { flex: 1; width: 100% !important; min-height: 96px; resize: vertical; }
.tp-master-task-add { margin-top: 10px; }
.tp-master-apply-note { margin: 14px 0 5px; color: #666; font-size: 11px; }
.tp-master-task-card.ui-sortable-helper { border: 1px solid steelblue; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.tp-backfill-guide { margin-bottom: 14px; padding: 13px 15px; border: 1px solid #cbdbe4; border-left: 6px solid steelblue; background: #f4f9fc; color: #4f6570; }
.tp-backfill-guide strong { display: block; margin-bottom: 5px; color: #334f5d; font-size: 13px; }
.tp-backfill-guide ul { margin: 0 0 7px 20px; padding: 0; line-height: 1.8; }
.tp-backfill-guide p { margin: 0; font-size: 11px; }
.tp-backfill-error { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #ec5840; background: #fff4f2; }
.tp-backfill-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.tp-backfill-summary dl { margin: 0; padding: 10px; border: 1px solid #d5dfe4; background: #f8fafb; text-align: center; }
.tp-backfill-summary dl.is-target { border-color: #66a568; background: #f2faf2; }
.tp-backfill-summary dt { color: #657984; font-size: 10px; font-weight: normal; }
.tp-backfill-summary dd { margin: 3px 0 0; color: #334f5d; }
.tp-backfill-summary dd strong { margin-right: 2px; font-size: 21px; }
.tp-backfill-table-wrap { overflow-x: auto; border: 1px solid #d6dfe4; }
.tp-backfill-table { min-width: 760px; margin: 0 !important; }
.tp-backfill-table th { background: midnightblue !important; color: #fff !important; text-align: center; }
.tp-backfill-table th:nth-child(1) { width: 38%; }
.tp-backfill-table th:nth-child(2) { width: 32%; }
.tp-backfill-table th:nth-child(3), .tp-backfill-table th:nth-child(4) { width: 15%; }
.tp-backfill-table td:nth-child(3), .tp-backfill-table td:nth-child(4) { text-align: center; }
.tp-backfill-table tr.is-empty td { background: #fafafa; color: #8a969c; }
.tp-backfill-details { margin-top: 10px; border: 1px solid #d5dfe4; background: #fff; }
.tp-backfill-details summary { padding: 10px 12px; color: #486674; font-weight: bold; cursor: pointer; }
.tp-backfill-details.is-warning { border-color: #e2b45f; background: #fffaf0; }
.tp-backfill-details > p { margin: 0; padding: 0 12px 8px; color: #8a6524; font-size: 11px; }
.tp-backfill-details ul { max-height: 220px; margin: 0; padding: 0 12px 10px; overflow-y: auto; list-style: none; }
.tp-backfill-details li { display: flex; justify-content: space-between; gap: 15px; padding: 6px 8px; border-top: 1px solid #edf0f2; }
.tp-backfill-details li strong { flex: 0 0 auto; }
.tp-template-picker { margin: 0 8px 20px; padding: 14px; border: 1px solid #cbd8df; background: #f7f9fa; }
.tp-template-picker-heading { margin-bottom: 12px; padding-bottom: 9px; border-bottom: 2px solid steelblue; }
.tp-template-picker-heading h3 { margin: 0 0 3px; color: #333; font-size: 18px; font-weight: bold; }
.tp-template-picker-heading p { margin: 0; color: #667b86; font-size: 11px; }
.tp-create-methods { display: grid; grid-template-columns: minmax(0, 3fr) minmax(250px, 1fr); gap: 12px; }
.tp-create-method { padding: 13px; border: 1px solid #ccd7dd; background: #fff; }
.tp-create-method.is-active { border-color: steelblue; box-shadow: inset 4px 0 steelblue; }
.tp-create-method-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.tp-create-method-heading strong, .tp-create-method-heading p { display: block; }
.tp-create-method-heading strong { color: #334f5d; font-size: 14px; }
.tp-create-method-heading p { margin: 2px 0 0; color: #71838c; font-size: 10px; }
.tp-create-method-icon { flex: 0 0 30px; height: 30px; background: steelblue; color: #fff; font-size: 12px; font-weight: bold; line-height: 30px; text-align: center; }
.tp-create-method-blank .tp-create-method-icon { background: #7f8d94; }
.tp-create-method-blank { display: flex; flex-direction: column; }
.tp-create-method-blank ul { margin: 2px 0 16px 20px; padding: 0; color: #617580; font-size: 11px; line-height: 1.8; }
.tp-create-method-blank > .btn { margin-top: auto; }
.tp-create-method-status { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 9px 2px 2px; border-top: 1px solid #c9dce7; color: #39779b; font-size: 11px; font-weight: bold; }
.tp-create-method-status > span { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: steelblue; color: #fff; font-size: 10px; line-height: 18px; text-align: center; }
.tp-template-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tp-template-card { display: flex; align-items: stretch; flex-direction: column; padding: 11px; border: 1px solid #d8e1e6; background: #fff; }
.tp-template-card.is-selected { border-color: steelblue; background: #f3f9fc; }
.tp-template-card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tp-template-card-title strong { color: #315263; font-size: 13px; }
.tp-template-card-title span { padding: 2px 6px; background: steelblue; color: #fff; font-size: 9px; font-weight: bold; }
.tp-template-card > p { min-height: 32px; margin: 6px 0 8px; color: #657983; font-size: 10px; line-height: 1.6; }
.tp-template-card dl { margin: 0 0 8px; padding: 7px 8px; background: #f5f7f8; }
.tp-template-card dl > div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 5px; }
.tp-template-card dt, .tp-template-card dd { font-size: 9px; line-height: 1.6; }
.tp-template-card dt { color: #6e8089; }
.tp-template-card dd { margin: 0; color: #3f5966; }
.tp-template-category-preview { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.tp-template-category-preview span { padding: 3px 5px; border: 1px solid #cad8e0; background: #f8fbfc; color: #58707c; font-size: 9px; }
.tp-template-card > .btn { margin-top: auto; }
.tp-create-selection-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 8px 16px; padding: 10px 13px; border-left: 5px solid #5cb85c; background: #f2faf2; color: #3d6845; }
.tp-create-selection-summary strong { font-size: 12px; }
.tp-create-selection-summary span { color: #66806b; font-size: 10px; }
.tp-create-method-prompt { margin: 0 8px 8px; padding: 28px 20px; border: 1px dashed #9fb2bc; background: #fff; color: #536d79; text-align: center; }
.tp-create-method-prompt strong, .tp-create-method-prompt span { display: block; }
.tp-create-method-prompt span { margin-top: 5px; color: #7b8d96; font-size: 11px; }
.tp-create-guide { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 8px 18px; padding: 13px 16px; border: 1px solid #cbdbe4; border-left: 6px solid steelblue; background: #f4f9fc; }
.tp-create-guide strong { display: block; color: #344e5b; font-size: 14px; }
.tp-create-guide p { margin: 3px 0 0; color: #6d818c; font-size: 11px; }
.tp-create-guide ol { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.tp-create-guide li { position: relative; color: #536d79; font-size: 11px; font-weight: bold; white-space: nowrap; }
.tp-create-guide li:not(:last-child):after { position: absolute; top: 10px; right: -16px; color: #9ab0bc; content: '\203A'; }
.tp-create-guide li span { display: inline-block; width: 22px; height: 22px; margin-right: 5px; border-radius: 50%; background: steelblue; color: #fff; line-height: 22px; text-align: center; }
.tp-create-section { margin: 0 8px; padding: 0 0 20px; }
.tp-create-section + .tp-create-section { padding-top: 2px; }
.tp-create-section-heading { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 6px 10px 8px; border-bottom: 2px solid steelblue; }
.tp-create-section-heading > span { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: steelblue; color: #fff; font-size: 13px; font-weight: bold; line-height: 28px; text-align: center; }
.tp-create-section-heading h3 { margin: 0 0 2px; color: #333; font-size: 17px; font-weight: bold; }
.tp-create-section-heading p { margin: 0; color: #667b86; font-size: 11px; }
.tp-create-section .tp-master-name-field { margin: 0; }
.tp-master-name-field.is-error { border-color: #ec5840; }
.tp-create-category-list { border-top: 1px solid #d8e0e5; }
.tp-create-category-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 82px; gap: 12px; align-items: stretch; padding: 10px; border: 1px solid #d8e0e5; border-top: 0; background: #fff; }
.tp-create-category-row:hover { background: #fafdff; }
.tp-create-category-row.is-error { box-shadow: inset 4px 0 #ec5840; }
.tp-create-category-handle { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; border-right: 1px solid #dde4e8; color: steelblue; cursor: move; cursor: grab; user-select: none; }
.tp-create-category-handle:active { cursor: grabbing; }
.tp-create-category-number { width: 24px; height: 24px; border-radius: 50%; background: steelblue; color: #fff; font-size: 11px; font-weight: bold; line-height: 24px; text-align: center; }
.tp-create-category-field label { display: block; margin: 0 0 4px; color: #536b78; font-size: 10px; }
.tp-create-category-row > .btn { align-self: center; }
.tp-create-category-row.ui-sortable-helper { border: 1px solid steelblue; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.tp-create-add-button { margin-top: 10px; }
@media (max-width: 900px) {
    .tp-master-task-card { grid-template-columns: 46px minmax(240px, 300px) minmax(260px, 1fr) 70px; }
    .tp-create-methods { grid-template-columns: 1fr; }
    .tp-create-guide { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 620px) {
    .tp-pagination { align-items: flex-start; flex-direction: column; }
    .tp-pagination-actions { flex-wrap: wrap; }
    .tp-master-selector, .tp-master-section-switch { grid-template-columns: 1fr; }
    .tp-master-selector > label, .tp-master-section-switch > span { padding-bottom: 6px; }
    .tp-master-section-switch > div { flex-wrap: wrap; gap: 0 16px; }
    .tp-master-select-form { width: 100%; }
    .tp-master-content-heading { align-items: stretch; flex-direction: column; }
    .tp-master-task-card { grid-template-columns: 42px 1fr; align-items: stretch; }
    .tp-master-task-primary, .tp-master-task-actions, .tp-master-task-comment { grid-column: 2; }
    .tp-master-task-comment { padding: 9px 0 0; border-top: 1px dashed #ccd8df; border-left: 0; }
    .tp-create-guide ol { flex-wrap: wrap; gap: 8px 18px; }
    .tp-template-catalog { grid-template-columns: 1fr; }
    .tp-create-selection-summary { align-items: flex-start; flex-direction: column; }
    .tp-create-category-row { grid-template-columns: 44px 1fr; }
    .tp-create-category-row > .btn { grid-column: 2; justify-self: start; }
    .tp-backfill-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}