@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');

/* Magic Patterns visual language. All rules are scoped to the Team screen. */
.team-settings-container.tm-magic, .tm-gallery-host.tm-magic {
  --tm-brand: #3b8c2b; --tm-dark: #2f7322; --tm-soft: #eaf5e6;
  --tm-ink: #1f2328; --tm-muted: #8a8f98; --tm-border: #e7e7e4;
  font-family: Lexend, ui-sans-serif, system-ui, sans-serif; color: var(--tm-ink);
  background: #11182766; height: 100%; min-height: 0; overflow: hidden;
}
.tm-magic *, .tm-magic *::before, .tm-magic *::after { box-sizing: border-box; }
.tm-magic button, .tm-magic input, .tm-magic select, .tm-magic textarea { font-family: inherit; }
.tm-magic .tm-icon { display:inline-block; width:16px; height:16px; flex:none; vertical-align:middle; }
.tm-magic .team-settings-sidebar-tab > .tm-icon { width:16px; height:16px; }
.tm-magic button { cursor: pointer; }
.tm-magic button:disabled { cursor: not-allowed; opacity: .45; }
.tm-magic button:focus-visible, .tm-magic summary:focus-visible, .tm-magic [tabindex]:focus-visible { outline: 2px solid var(--tm-brand); outline-offset: 2px; }
.tm-magic [hidden], .tm-magic .dis-none { display: none !important; }
dialog.tm-gallery-host.tm-magic { position:fixed; inset:0; width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; background:transparent; }
dialog.tm-gallery-host::backdrop { background:transparent; }
.tm-magic .team-settings-layout { display:flex; flex-direction:column; height:100%; min-height:0; background:var(--tm-d-surface2, #f7f7f5); }
.tm-magic .team-settings-header { display:block; flex-shrink:0; padding:10px 16px 2px; background:var(--tm-d-surface, white); border:0; min-height:0; }
.tm-magic .team-settings-title { margin:0; font-size:17px; line-height:24px; font-weight:600; color:var(--tm-ink); }
/* Setting.navigation focuses the screen heading when entering Team Settings. */
.tm-magic .team-settings-title:focus { outline:0; }
.tm-magic .team-settings-subtitle { margin:0; font-size:12px; line-height:20px; color:var(--tm-d-muted, #6b7280); }
.tm-magic .team-settings-content-wrapper { display:flex; flex:1; min-height:0; gap:0; overflow:hidden; }
.tm-magic .team-settings-sidebar { flex:1 !important; width:100% !important; max-width:none; min-width:0; height:auto; position:static; background:var(--tm-d-surface2, #f7f7f5); border:0; overflow:hidden; }
.tm-magic .team-settings-sidebar-inner { background:var(--tm-d-surface, white); flex:none; border-bottom:1px solid var(--tm-d-line, #e5e7eb); }
.tm-magic .team-settings-sidebar-tabs { display:flex; padding:0 16px; gap:4px; border:0; background:var(--tm-d-surface, white); margin:0; }
.tm-magic .team-settings-sidebar-tab { display:flex; align-items:center; gap:6px; padding:0 10px; border:0; border-radius:0; border-bottom:2px solid transparent; height:40px; flex:none; background:transparent; color:var(--tm-d-muted, #6b7280); font-size:13px; font-weight:500; white-space:nowrap; }
.tm-magic .team-settings-sidebar-tab-active { color:var(--tm-brand); font-weight:600; border-bottom-color:var(--tm-brand); box-shadow:none; }
/* The selected section is indicated by its single underline. Avoid adding a focus frame around it. */
.tm-magic .team-settings-sidebar-tab:focus-visible { outline:0; }
.tm-magic .tm-count { display:grid; place-items:center; height:18px; min-width:18px; padding:0 5px; border-radius:20px; background:var(--tm-d-surface2, #e5e7eb); color:var(--tm-d-muted, #4b5563); font-size:10px; }
.tm-magic .team-settings-sidebar-tab-active .tm-count { background:var(--tm-brand); color:var(--tm-d-on-brand, white); }
.tm-magic .tm-view-toggle { display:flex; align-self:center; margin-left:auto; border:1px solid var(--tm-d-line, #e2e4e8); background:var(--tm-d-surface2, #f4f5f4); border-radius:8px; padding:3px; }
.tm-magic .tm-view-toggle button { width:30px; height:27px; border:0; border-radius:5px; color:var(--tm-d-faint, #8a8f98); background:transparent; }
.tm-magic .tm-view-toggle [aria-pressed=true] { background:var(--tm-d-surface, white); color:var(--tm-brand); box-shadow:0 1px 3px #00000012; }
.tm-magic .team-settings-sidebar-tab-content { display:none; flex:1; min-height:0; flex-direction:column; overflow:hidden; }
.tm-magic .team-settings-sidebar-tab-content-active { display:flex; }
.tm-magic .tm-toolbar { display:flex; align-items:center; gap:8px; padding:10px 16px; flex-shrink:0; min-height:56px; box-sizing:border-box; }
.tm-magic .team-settings-sidebar-count { margin:0; font-size:12px; line-height:18px; font-weight:400; color:var(--tm-d-muted, #6b7280); white-space:nowrap; }
.tm-magic .tm-toolbar-actions { margin-left:auto; display:flex; align-items:center; gap:8px; min-width:0; }
.tm-magic .tm-search { display:flex; gap:8px; align-items:center; padding:0 10px; width:240px; height:36px; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; background:var(--tm-d-surface, white); color:var(--tm-d-faint, #9ca3af); margin:0; }
.tm-magic .tm-search:focus-within { border-color:var(--tm-brand); box-shadow:0 0 0 2px #3b8c2b20; }
.tm-magic .tm-search input { width:100%; min-width:0; border:0; padding:0; margin:0; outline:0; background:transparent; height:auto; font-size:13px; color:var(--tm-ink); }
.tm-magic .tm-filters { display:flex; gap:8px; }
.tm-magic .tm-filter { position:relative; font-size:13px; }
.tm-magic .tm-filter summary { list-style:none; display:flex; gap:8px; align-items:center; height:36px; padding:0 12px; background:var(--tm-d-surface, white); border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; color:var(--tm-d-muted, #4b5563); cursor:pointer; white-space:nowrap; }
.tm-magic .tm-filter summary::-webkit-details-marker { display:none; }
.tm-magic .tm-filter[open] summary, .tm-magic .tm-filter.tm-filter-active summary { border-color:var(--tm-d-green-line, #cfe6c8); color:var(--tm-brand); background:var(--tm-soft); }
.tm-magic .tm-filter-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:40; min-width:230px; max-height:300px; overflow:auto; padding:6px; border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-d-surface, white); box-shadow:0 12px 32px #0000001f; }
.tm-magic .tm-filter-menu label { display:flex; align-items:center; gap:8px; padding:8px; border-radius:6px; font-size:13px; cursor:pointer; margin:0; }
.tm-magic .tm-filter-menu label:hover { background:var(--tm-d-surface2, #f7f7f5); }
.tm-magic .tm-filter-menu input[type=checkbox] { position:static; visibility:visible; opacity:1; appearance:auto; width:14px; height:14px; margin:0; flex:none; }
.tm-magic input[type=checkbox], .tm-magic input[type=radio] { accent-color:var(--tm-brand); }
.tm-magic .tm-clear-filters { height:36px; padding:0 4px; line-height:1; background:transparent; border:0; font-size:12px; color:var(--tm-d-muted, #6b7280); }
.tm-magic .tm-primary, .tm-magic .team-settings-add-member-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; border:0; border-radius:8px; padding:0 14px; background:var(--tm-brand); color:var(--tm-d-on-brand, white); font-size:13px; font-weight:600; white-space:nowrap; box-shadow:none; }
.tm-magic .tm-primary:hover, .tm-magic .team-settings-add-member-btn:hover { background:var(--tm-dark); }
.tm-magic .team-settings-members-list, .tm-magic .team-settings-group-list { flex:1; min-height:0; padding:0 16px 12px; overflow:hidden; }
.tm-magic .team-settings-members-scroll, .tm-magic .team-settings-group-list-scroll { display:block !important; height:100%; max-height:none; padding:0 !important; overflow:auto !important; scrollbar-width:thin; border-radius:12px; border-top:0; }
/* The scrolling wrapper clips the corners; the table must not trap sticky headers. */
.tm-magic .tm-table { width:100%; min-width:900px; border-spacing:0; border-collapse:separate; font-size:13px; background:var(--tm-d-surface, white); border:1px solid var(--tm-border); border-radius:12px; overflow:visible; }
.tm-magic .tm-table.tm-group-table { min-width:0; table-layout:fixed; }
.tm-magic .tm-table th { position:sticky; top:0; z-index:2; background:var(--tm-soft); color:var(--tm-dark); padding:10px 12px; font-size:12px; font-weight:600; text-align:left; border-bottom:1px solid var(--tm-d-green-line, #d3e7ca); }
.tm-magic .tm-table th:first-child { border-top-left-radius:11px; }
.tm-magic .tm-table th:last-child { border-top-right-radius:11px; }
.tm-magic .tm-table th:nth-last-child(2), .tm-magic .tm-table td:nth-last-child(2) { text-align:center; }
.tm-magic .tm-table th:nth-last-child(3), .tm-magic .tm-table td:nth-last-child(3) { text-align:center; }
.tm-magic .tm-table .tm-col-no { width:48px; text-align:center; color:var(--tm-d-faint, #8a8f98); }
.tm-magic .tm-table td { padding:10px 12px; border-bottom:1px solid var(--tm-d-line, #f1f1ee); color:var(--tm-d-blue-text, #374151); vertical-align:middle; }
.tm-magic .tm-table tr:last-child td { border-bottom:0; }
.tm-magic .tm-table tbody tr:hover { background:var(--tm-d-surface2, #f8faf7); }
.tm-magic .tm-table .team-settings-member-card, .tm-magic .tm-table .group-profile-card { display:table-row !important; aspect-ratio:auto !important; text-align:left !important; border:0 !important; border-radius:0; box-shadow:none; transform:none; background:transparent; padding:0; height:auto; width:auto; cursor:pointer; }
.tm-magic .tm-table .tm-identity { min-width:180px; }
.tm-magic .tm-identity { display:flex; align-items:center; gap:12px; min-width:0; }
.tm-magic .tm-identity-text { min-width:0; flex:1; }
.tm-magic .tm-identity strong { display:block; font-size:14px; font-weight:500; color:var(--tm-ink); }
.tm-magic .tm-identity .group-profile-card-name { display:block; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:unset; -webkit-box-orient:unset; }
.tm-magic .tm-identity small { display:block; font-size:12px; line-height:18px; color:var(--tm-muted); }
.tm-magic .tm-table .tm-identity-text > strong { white-space:nowrap; }
.tm-magic .tm-group-description { display:block; min-height:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-magic .tm-group-description { max-width:100%; }
.tm-magic .tm-avatar { width:36px; height:36px; flex:none; display:grid; place-items:center; position:relative; border-radius:50%; background:var(--tm-soft); color:var(--tm-dark); font-weight:600; font-size:12px; }
.tm-magic .tm-avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.tm-magic .tm-avatar img + span { display:none; }
.tm-magic .tm-avatar.tm-avatar-large { width:48px; height:48px; font-size:15px; border-radius:12px; }
/* Green presence dot at the avatar corner (active members only), like Magic Salon Map MemberAvatar. */
.tm-magic .tm-avatar[data-online="true"]::after { content:""; position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; box-sizing:border-box; border-radius:50%; background:#22c55e; border:2px solid var(--tm-d-surface, #fff); }
.tm-magic .tm-group-member-avatars .tm-avatar::after { display:none; }
.tm-magic .tm-status { display:inline-flex; align-items:center; justify-content:center; color:var(--tm-brand); font-size:15px; }
.tm-magic .tm-status.tm-inactive { color:var(--tm-d-faint, #9ca3af); }
.tm-magic .tm-status .tm-icon { width:18px; height:18px; fill:currentColor; }
.tm-magic .tm-pay { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:13px; }
.tm-magic .tm-pay-dot { width:8px; height:8px; border-radius:50%; flex:none; }
.tm-magic .tm-pay-short { display:none; }
.tm-magic .tm-phone { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.tm-magic .tm-phone button { border:0; background:transparent; color:var(--tm-d-faint, #9ca3af); width:24px; height:24px; padding:0; }
.tm-magic .tm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:10px; padding-bottom:4px; }
.tm-magic .tm-grid .team-settings-member-card, .tm-magic .tm-grid .group-profile-card { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; aspect-ratio:auto; text-align:left; padding:14px; width:auto; height:auto; min-height:0; border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-d-surface, white); box-shadow:none; transform:none; cursor:pointer; }
.tm-magic .tm-grid .team-settings-member-card:hover, .tm-magic .tm-grid .group-profile-card:hover { border-color:#3b8c2b66; box-shadow:0 6px 18px #1f23280f; }
.tm-magic .tm-grid .tm-card-contact { color:var(--tm-d-muted, #4b5563); font-size:13px; margin:10px 0; }
.tm-magic .tm-card-contact > div { display:flex; gap:8px; align-items:center; min-height:25px; }
.tm-magic .tm-card-contact > div > i, .tm-magic .tm-card-contact > div > .tm-icon { color:var(--tm-d-faint, #9ca3af); }
.tm-magic .tm-card-contact .tm-email { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-magic .tm-card-bottom { border-top:1px solid var(--tm-d-line, #f1f1ee); padding-top:8px; margin-top:auto; display:flex; justify-content:space-between; gap:8px; }
.tm-magic .tm-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1px dashed var(--tm-d-line, #d9dce1); border-radius:12px; padding:48px 16px; text-align:center; color:var(--tm-d-muted, #6b7280); background:var(--tm-d-surface, white); font-size:13px; }
.tm-magic .tm-empty i, .tm-magic .tm-empty > .tm-icon { width:28px; height:28px; font-size:25px; color:var(--tm-d-faint, #b0b4ba); }
.tm-magic .tm-schedule-loading { display:flex; align-items:center; justify-content:center; gap:10px; min-height:240px; padding:24px; color:var(--tm-muted); font-size:13px; }
.tm-magic .tm-empty button { border:0; background:none; color:var(--tm-brand); font-size:13px; font-weight:600; }
.tm-magic .ts-browse-mode .team-settings-main { display:none !important; }
.tm-magic .ts-detail-mode .team-settings-sidebar, .tm-magic .ts-detail-mode > .team-settings-header { display:none !important; }
.tm-magic .ts-detail-mode .team-settings-main { display:flex !important; width:100% !important; flex:1 !important; min-width:0; min-height:0; padding:0; opacity:1; transform:none; animation:none; position:static; overflow:hidden; border:0; border-radius:0; background:var(--tm-d-surface2, #f7f7f5); }
.tm-magic .team-settings-profile-header, .tm-magic .team-settings-group-profile-header { padding:0 !important; margin:0; border:0; box-shadow:none; background:var(--tm-d-surface, white); flex-shrink:0; }
.tm-magic .team-settings-profile-header-top { padding:0 !important; min-height:0; overflow:visible; }
.tm-magic .team-settings-profile-gradient, .tm-magic .team-settings-profile-actions, .tm-magic .team-settings-profile-stats { display:none !important; }
.tm-magic .team-settings-profile-header-content { display:flex; flex-wrap:wrap; align-items:stretch; gap:0; padding:0 !important; position:static; }
.tm-magic .team-settings-profile-header-left { display:flex; gap:12px; align-items:center; flex:1 0 100%; width:100%; min-width:0; min-height:76px; padding:10px 16px !important; background:var(--tm-d-surface2, #f3f8f1); border-bottom:1px solid var(--tm-d-line, #e3eddf); }
.tm-magic .team-settings-profile-avatar-large { width:48px !important; height:48px !important; margin:0; border:0; border-radius:12px; box-shadow:none; }
.tm-magic .team-settings-profile-avatar-bg { width:48px; height:48px; background:var(--tm-soft); color:var(--tm-dark); }
.tm-magic .team-settings-profile-avatar-text { font-size:15px; }
.tm-magic .team-settings-avatar-change-btn, .tm-magic .team-settings-group-avatar-change-btn { display:none; }
.tm-magic .team-settings-profile-avatar-section { margin:0; flex:none; }
.tm-magic .team-settings-profile-name { color:var(--tm-ink); font-size:17px !important; font-weight:700 !important; text-transform:uppercase; line-height:24px; margin:0; }
.tm-magic .team-settings-profile-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; font-size:12px; }
.tm-magic .tm-new-member-hint { color:var(--tm-muted); }
/* Dropdowns (Group profile, Level) — Magic Salon Map Select over the hidden native <select>. */
.tm-magic select.tm-select-native, .tm-magic .tm-select-host > :is(.team-settings-custom-select-trigger,.team-settings-custom-select-menu) { display:none !important; }
.tm-magic .tm-select { display:flex; align-items:center; gap:8px; width:100%; height:36px; min-height:0; padding:0 12px; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; background:var(--tm-d-surface, #ffffff); color:var(--tm-ink); font-size:13px; font-weight:400; text-align:left; transition:border-color .15s, box-shadow .15s; }
.tm-magic .tm-select:hover { border-color:var(--tm-d-line, #cfd3d8); }
.tm-magic .tm-select[aria-expanded=true], .tm-magic .tm-select:focus-visible { border-color:var(--tm-brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--tm-brand) 15%, transparent); outline:0; }
.tm-magic .tm-select-dot { flex:none; width:8px; height:8px; border-radius:50%; }
.tm-magic .tm-select-value { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-magic .tm-select > .tm-icon { color:var(--tm-d-muted, #6b7280); transition:transform .15s; }
.tm-magic .tm-select[aria-expanded=true] > .tm-icon { transform:rotate(180deg); }
.tm-magic .tm-select-menu { position:fixed; z-index:9600; max-height:280px; overflow-y:auto; padding:4px; border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-d-surface, #ffffff); box-shadow:0 12px 32px rgba(0, 0, 0, 0.12); animation:tm-select-in .14s cubic-bezier(.23, 1, .32, 1); }
.tm-magic .tm-select-menu [role=option] { display:flex; align-items:center; gap:10px; width:100%; height:36px; min-height:0; padding:0 10px; border:0; border-radius:8px; background:transparent; color:var(--tm-d-text, #374151); font-size:13px; text-align:left; white-space:nowrap; outline:0; }
.tm-magic .tm-select-menu [role=option] > span { flex:1; }
.tm-magic .tm-select-menu [role=option]:hover, .tm-magic .tm-select-menu [role=option]:focus-visible { background:var(--tm-d-surface2, #f4f5f4); }
.tm-magic .tm-select-menu [aria-selected=true] { color:var(--tm-brand); font-weight:500; }
@keyframes tm-select-in { from { opacity:0; transform:translateY(-4px) scale(.98); } }
/* Employment status line: toggle · icon · Active · Shown in Salon Center. */
.tm-magic .tm-status-line { display:flex; align-items:center; gap:10px; height:36px; min-width:0; }
.tm-magic .tm-status-line .team-settings-toggle-switch { margin:0 !important; }
.tm-magic .tm-status-state { display:flex; align-items:center; gap:6px; min-width:0; }
.tm-magic .tm-status-state strong { font-size:13px; font-weight:600; color:var(--tm-muted); }
.tm-magic .tm-status-state.is-on strong { color:var(--tm-brand); }
.tm-magic .tm-status-state small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--tm-muted); }
@media (max-width: 1279px) { .tm-magic .tm-status-state small { display:none; } }
/* Turn bonus with a % prefix (Magic Salon Map PrefixInput). */
.tm-magic .tm-prefix-input { display:flex; height:36px; overflow:hidden; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; background:var(--tm-d-surface, #ffffff); transition:border-color .15s, box-shadow .15s; }
.tm-magic .tm-prefix-input:focus-within { border-color:var(--tm-brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--tm-brand) 15%, transparent); }
.tm-magic .tm-prefix-input > span { display:grid; place-items:center; flex:none; width:32px; border-right:1px solid var(--tm-d-line, #ededea); background:var(--tm-d-surface2, #f7f7f5); color:var(--tm-d-muted, #6b7280); font-size:12px; font-weight:500; }
.tm-magic .tm-prefix-input .team-settings-input { flex:1; min-width:0; width:auto !important; height:100%; min-height:0; padding:0 10px; border:0 !important; border-radius:0; background:transparent !important; box-shadow:none !important; }
/* Labor contracts (Employment) — Magic Salon Map EmploymentPanel / ContractsDialog. */
.tm-magic .tm-contracts { grid-column:1 / -1; }
.tm-magic .tm-contracts-row { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:8px; background:var(--tm-soft); }
.tm-magic .tm-contracts-row > .tm-icon { color:var(--tm-brand); }
.tm-magic .tm-contracts-text { flex:1; min-width:0; }
.tm-magic .tm-contracts-text strong { display:block; font-size:13px; font-weight:600; line-height:18px; color:var(--tm-ink); }
.tm-magic .tm-contracts-text small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:16px; color:var(--tm-muted); }
.tm-magic .tm-contracts-open { flex:none; height:auto; min-height:0; padding:4px 8px; border:0; border-radius:6px; background:transparent; color:var(--tm-brand); font-size:13px; font-weight:600; transition:background-color .15s; }
.tm-magic .tm-contracts-open:hover { background:var(--tm-d-surface, white); }
.tm-magic .tm-contracts-dialog { max-width:620px; }
.tm-magic .tm-contracts-empty { display:flex; flex-direction:column; align-items:center; padding:32px 0; text-align:center; }
.tm-magic .tm-contracts-empty > span { display:grid; place-items:center; width:40px; height:40px; margin-bottom:8px; border-radius:50%; background:var(--tm-d-surface2, #f1f2f0); color:var(--tm-d-faint, #9ca3af); }
.tm-magic .tm-contracts-empty > span .tm-icon { width:20px; height:20px; }
.tm-magic .tm-contracts-empty > strong { font-size:13px; font-weight:500; color:var(--tm-ink); }
.tm-magic .tm-contracts-empty > p { margin:0; font-size:12px; color:var(--tm-muted); }
.tm-magic .tm-contracts-dialog > footer { flex-wrap:wrap; }
.tm-magic .tm-contracts-to { margin-right:auto; font-size:12px; color:var(--tm-muted); }
.tm-magic .tm-contracts-to.is-warn { color:var(--tm-d-amber-text, #a86400); }
.tm-magic .tm-contracts-template { width:210px; height:32px; font-size:13px; }
.tm-magic .tm-contracts-send { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px; border-radius:8px; font-size:13px; font-weight:600; }
.tm-magic .tm-contracts-send .tm-icon { width:14px; height:14px; }
.tm-magic .tm-contracts-send:disabled { opacity:.4; }
@media (max-width: 640px) { .tm-magic .tm-contracts-to { display:none; } .tm-magic .tm-contracts-template { flex:1; width:auto; } }
.tm-magic .team-settings-profile-role-badge { background:transparent; color:var(--tm-d-muted, #4b5563); border:0; padding:0; font-size:12px; }
.tm-magic .team-settings-profile-username { color:var(--tm-d-muted, #6b7280); font-size:12px; }
.tm-magic .team-settings-profile-status-badge { background:var(--tm-soft); color:var(--tm-dark); }
.tm-magic .ts-detail-close-btn { display:none !important; }
.tm-magic .team-settings-tabs { flex-basis:100%; width:100%; padding:6px 16px; border:0; border-bottom:1px solid var(--tm-d-line, #e5e7eb); margin:0; overflow:auto; }
.tm-magic .team-settings-tabs-scroll, .tm-magic .team-settings-tabs-scroll-gp { display:flex; gap:4px; width:100%; padding:0; }
.tm-magic .team-settings-tab { display:flex; align-items:center; justify-content:center; flex:1; min-width:0; gap:6px; height:36px; padding:0 8px !important; margin:0; border:1px solid transparent !important; border-radius:8px; font-size:13px; font-weight:500; color:var(--tm-d-muted, #6b7280); background:var(--tm-d-surface, white); white-space:nowrap; }
.tm-magic .team-settings-tab svg { width:16px !important; height:16px !important; color:var(--tm-d-faint, #9ca3af); }
.tm-magic .team-settings-tab-active { background:var(--tm-soft) !important; color:var(--tm-brand) !important; border-color:var(--tm-d-green-line, #cfe6c8) !important; font-weight:600; box-shadow:none; }
.tm-magic .team-settings-tab-active svg { color:var(--tm-brand); }
.tm-magic .team-settings-form-content { flex:1; min-height:0; padding:12px !important; overflow:auto !important; background:var(--tm-d-surface2, #f7f7f5); }
.tm-magic .team-settings-sections { margin:0; padding:0; max-width:none; }
.tm-magic .team-settings-sections[data-tab-content=profile] { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:10px; }
.tm-magic .tm-profile-column { display:flex; flex-direction:column; gap:10px; min-width:0; }
.tm-magic .team-settings-section, .tm-magic .tm-panel { margin:0; padding:0 !important; border:1px solid var(--tm-border); border-radius:12px; overflow:visible; background:var(--tm-d-surface, white); box-shadow:none; }
.tm-magic .team-settings-section-header, .tm-magic .tm-panel-header { display:flex; align-items:flex-start; gap:10px; padding:10px 16px; margin:0; border-bottom:1px solid var(--tm-d-line, #eef0ec); background:var(--tm-d-surface, white); border-radius:12px 12px 0 0; }
.tm-magic .team-settings-section-icon-wrapper { width:3px !important; height:16px !important; min-width:3px; border-radius:3px; background:var(--tm-brand) !important; padding:0; margin-top:3px; }
.tm-magic .team-settings-section-icon-wrapper svg { display:none; }
.tm-magic .team-settings-section-title, .tm-magic .tm-panel-header h3 { font-size:15px; line-height:20px; color:var(--tm-dark); font-weight:700; margin:0; }
.tm-magic .team-settings-section-description, .tm-magic .tm-panel-header p { font-size:12px; line-height:18px; color:var(--tm-muted); margin:0; }
.tm-magic .team-settings-section > :not(.team-settings-section-header) { margin:12px 16px !important; }
.tm-magic .team-settings-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; align-items:start; }
.tm-magic .team-settings-form-field { gap:0; }
.tm-magic .team-settings-form-label { display:block; font-size:12px; font-weight:500; color:var(--tm-d-muted, #4b5563); margin-bottom:4px; }
.tm-magic .team-settings-input, .tm-magic .team-settings-textarea, .tm-magic .tm-field { border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; background:var(--tm-d-surface, white); font-size:13px; font-weight:400; color:var(--tm-ink); height:36px; padding:0 12px; box-shadow:none; width:100%; }
.tm-magic .team-settings-input:focus, .tm-magic .team-settings-textarea:focus, .tm-magic .tm-field:focus { border-color:var(--tm-brand); outline:0; box-shadow:0 0 0 2px #3b8c2b20; }
.tm-magic .team-settings-textarea { height:auto; padding:8px 12px; }
.tm-magic .team-settings-input-with-icon { padding-left:36px; }
.tm-magic .team-settings-input-icon { color:var(--tm-d-faint, #9ca3af); }
.tm-magic .team-settings-custom-select-trigger { height:36px; min-height:36px; padding:0 12px; border-radius:8px; font-size:13px; font-weight:400; border-color:var(--tm-d-line, #e2e4e8); }
.tm-magic .tm-field-hint { display:block; color:var(--tm-muted); font-size:11px; margin-top:5px; }
.tm-magic .tm-pay-structure { margin-bottom:10px; }
.tm-magic .tm-pay-structure .cm-row { margin:0; display:block; }
.tm-magic .tm-pay-structure .cm-lbl, .tm-magic .tm-pay-structure .cm-pay-select-trigger { display:none !important; }
.tm-magic .tm-pay-structure .cm-pay-select { width:100%; }
.tm-magic .tm-pay-structure .cm-pay-dropdown { display:grid !important; grid-template-columns:repeat(4,1fr); gap:8px; position:static; width:100%; border:0; padding:0; box-shadow:none; background:transparent; }
.tm-magic .tm-pay-structure .cm-pay-option { border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; min-height:48px; font-family:inherit; font-size:13px; background:var(--tm-d-surface, white); }
.tm-magic .tm-pay-structure .cm-pay-option.active { border-color:var(--tm-d-green-line, #cfe6c8); background:var(--tm-soft); color:var(--tm-dark); }
.tm-magic .cm-layout { gap:10px; align-items:flex-start; }
.tm-magic .cm-col.tm-panel { padding:0 !important; min-width:0; }
.tm-magic .cm-row { align-items:flex-start; padding:8px 0; margin-bottom:8px; }
.tm-magic .cm-lbl { text-transform:none; letter-spacing:0; font-size:12px; min-width:140px; color:var(--tm-d-muted, #4b5563); }
.tm-magic .cm-formula-hint { background:var(--tm-soft); border-color:var(--tm-d-green-line, #cfe6c8); color:var(--tm-dark); font-weight:400; }
.tm-magic .cm-radio, .tm-magic .cm-checkbox { accent-color:var(--tm-brand); }
/* Member Pay Structure: Magic's type cards, earnings, fees and cash/check split. */
.tm-magic .tm-pay-settings { display:flex; flex-direction:column; gap:10px; min-width:0; }
.tm-magic .tm-pay-type-panel { padding:16px; border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-d-surface, white); }
.tm-magic .tm-pay-type-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; margin-bottom:10px; }
.tm-magic .tm-pay-type-heading h3 { margin:0; color:var(--tm-dark); font-size:15px; font-weight:700; line-height:22px; }
.tm-magic .tm-pay-type-heading p { display:flex; align-items:center; gap:6px; margin:0; color:var(--tm-muted); font-size:12px; line-height:18px; }
.tm-magic .tm-pay-types { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.tm-magic .tm-pay-types .cm-pay-option { display:flex; align-items:flex-start; justify-content:flex-start; gap:10px; width:100%; height:auto; min-height:58px; padding:10px 12px; border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-d-surface, white); text-align:left; color:var(--tm-ink); }
.tm-magic .tm-pay-types .cm-pay-option > span:last-child { min-width:0; }
.tm-magic .tm-pay-types .cm-pay-option:hover { border-color:var(--tm-d-green-line, #cfe6c8); }
.tm-magic .tm-pay-types .cm-pay-option.active { border-color:var(--tm-brand); background:var(--tm-soft); }
.tm-magic .tm-pay-types .cm-pay-option strong { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; line-height:20px; }
.tm-magic .tm-pay-types .cm-pay-option small { display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:11px; color:var(--tm-muted); line-height:16px; }
.tm-magic .tm-pay-choice-dot { display:grid; place-items:center; width:16px; height:16px; margin-top:2px; border:2px solid var(--tm-d-line, #c9cdd3); border-radius:50%; flex:none; }
.tm-magic .cm-pay-option.active .tm-pay-choice-dot { border-color:var(--tm-brand); }
.tm-magic .cm-pay-option.active .tm-pay-choice-dot::after { content:''; height:8px; width:8px; border-radius:50%; background:var(--tm-brand); }
.tm-magic .tm-pay-type-dot { width:8px; height:8px; border-radius:50%; flex:none; }
.tm-magic .tm-pay-mobile { display:none; }
.tm-magic .tm-pay-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:start; }
.tm-magic .tm-pay-right { display:flex; flex-direction:column; gap:10px; min-width:0; }
.tm-magic .tm-pay-panel { min-width:0; border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-d-surface, white); overflow:hidden; }
.tm-magic .tm-pay-panel > header { display:flex; align-items:flex-start; gap:10px; border-bottom:1px solid var(--tm-d-line, #eef0ec); padding:10px 16px; }
.tm-magic .tm-pay-panel > header > span { flex:none; height:16px; width:3px; margin-top:3px; border-radius:99px; background:var(--tm-brand); }
.tm-magic .tm-pay-panel h3 { margin:0; font-size:15px; line-height:20px; font-weight:700; color:var(--tm-dark); }
.tm-magic .tm-pay-panel header p { margin:0; font-size:12px; line-height:18px; color:var(--tm-muted); }
.tm-magic .tm-pay-panel-body { padding:4px 16px; }
.tm-magic .tm-pay-row { display:grid; grid-template-columns:150px minmax(0,1fr); align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid var(--tm-d-line, #f1f1ee); }
.tm-magic .tm-pay-row:last-child { border:0; }
.tm-magic .tm-pay-row[data-pay-align=start] { align-items:start; }
.tm-magic .tm-pay-row[data-pay-align=start] > .tm-pay-label { padding-top:8px; }
.tm-magic .tm-pay-label { font-size:13px; font-weight:500; line-height:20px; color:var(--tm-d-blue-text, #374151); }
.tm-magic .tm-pay-value { min-width:0; }
.tm-magic .tm-pay-inline { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; }
.tm-magic .tm-pay-muted { color:var(--tm-d-faint, #8a8f98); font-size:12px; line-height:18px; }
.tm-magic .tm-pay-input { display:flex; width:112px; height:36px; flex:none; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; overflow:hidden; background:var(--tm-d-surface, white); }
.tm-magic .tm-pay-input-narrow { width:100px; }
.tm-magic .tm-pay-input > span { display:grid; place-items:center; width:32px; flex:none; border-right:1px solid var(--tm-d-line, #ededea); background:var(--tm-d-surface2, #f7f7f5); color:var(--tm-d-muted, #6b7280); font-size:12px; font-weight:500; }
.tm-magic .tm-pay-input:focus-within { border-color:var(--tm-brand); box-shadow:0 0 0 2px #3b8c2b26; }
.tm-magic .tm-pay-input > input { display:block; flex:1; min-width:0; width:0; height:34px; padding:0 10px; border:0; margin:0; outline:0; box-shadow:none; background:transparent; color:var(--tm-ink); font-size:13px; line-height:20px; }
.tm-magic .tm-pay-input:has(input:disabled) { background:var(--tm-d-surface2, #f7f7f5); opacity:.6; }
.tm-magic .tm-pay-settings input[type=number] { -moz-appearance:textfield; }
.tm-magic .tm-pay-settings input::-webkit-inner-spin-button,.tm-magic .tm-pay-settings input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.tm-magic .tm-pay-settings input:invalid:not(:placeholder-shown) { box-shadow:none; }
.tm-magic .tm-pay-hint { margin:6px 0 0; font-size:11px; line-height:16px; color:var(--tm-muted); }
.tm-magic .tm-pay-segment { display:inline-flex; align-items:center; flex-wrap:wrap; gap:2px; max-width:100%; padding:2px; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; background:var(--tm-d-surface2, #f4f5f4); }
.tm-magic .tm-pay-segment button { display:block; height:28px; min-height:0; min-width:32px; padding:0 10px; border:0; border-radius:5px; background:transparent; color:var(--tm-d-muted, #6b7280); font-size:12px; line-height:18px; font-weight:500; white-space:nowrap; }
.tm-magic .tm-pay-segment button[aria-checked=true] { background:var(--tm-d-surface, white); color:var(--tm-brand); box-shadow:0 1px 3px #00000012; }
.tm-magic .tm-pay-period { margin-bottom:10px; }
.tm-magic .tm-pay-requirements { padding:8px 12px; border:1px solid var(--tm-d-line, #ededea); border-radius:8px; background:var(--tm-d-surface2, #fafaf9); }
.tm-magic .tm-pay-requirements > p { margin:0 0 2px; font-size:11px; font-weight:500; color:var(--tm-muted); line-height:16px; }
.tm-magic .tm-pay-radio { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-height:34px; padding:0; margin:0; font-size:13px; color:var(--tm-d-blue-text, #374151); font-weight:400; line-height:20px; cursor:pointer; }
.tm-magic .tm-pay-native-radio { appearance:auto; -webkit-appearance:auto; display:block !important; position:static !important; visibility:visible !important; opacity:1 !important; pointer-events:auto; width:16px !important; height:16px !important; flex:none; margin:0 !important; padding:0; accent-color:#3e9b3a; }
.tm-magic .tm-pay-native-radio:focus-visible { outline:2px solid var(--tm-brand); outline-offset:2px; }
.tm-magic .tm-pay-small { display:block; width:56px; flex:none; }
.tm-magic .tm-pay-small input { display:block; width:100%; height:32px; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:6px; padding:0 4px; margin:0; font-size:12px; line-height:18px; text-align:center; background:var(--tm-d-surface, white); outline:0; color:var(--tm-ink); }
.tm-magic .tm-pay-small input:disabled { background:var(--tm-d-surface2, #f4f5f4); color:var(--tm-muted); }
.tm-magic .tm-pay-small input:focus { border-color:var(--tm-brand); box-shadow:0 0 0 2px #3b8c2b26; }
.tm-magic .tm-pay-switch-row { display:flex; align-items:center; gap:10px; min-height:36px; font-size:13px; color:var(--tm-d-blue-text, #374151); line-height:20px; }
.tm-magic .tm-pay-toggle { position:relative; height:24px; min-height:0; width:44px; padding:0; border:0; border-radius:99px; background:var(--tm-d-line, #d1d5db); flex:none; }
.tm-magic .tm-pay-toggle > span { position:absolute; left:2px; top:2px; width:20px; height:20px; border-radius:50%; background:var(--tm-d-surface, white); box-shadow:0 1px 3px #0002; transition:transform .15s; }
.tm-magic .tm-pay-toggle[aria-checked=true] { background:#3e9b3a; }
.tm-magic .tm-pay-toggle[aria-checked=true] > span { transform:translateX(20px); }
.tm-magic .tm-pay-surcharge-period { margin-top:10px; }
.tm-magic .tm-pay-nested { margin-top:8px; padding-left:12px; border-left:2px solid var(--tm-d-line, #eef0ec); }
.tm-magic .tm-pay-daily-rule { font-size:12px; color:var(--tm-d-muted, #6b7280); }
.tm-magic .tm-pay-ticket-details { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.tm-magic .tm-pay-sub-label { width:86px; font-size:12px; color:var(--tm-d-muted, #6b7280); flex:none; }
.tm-magic .tm-pay-product-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:260px; margin-top:6px; }
.tm-magic .tm-pay-product-pair > label { margin:0; font-size:12px; line-height:18px; font-weight:400; color:var(--tm-d-muted, #6b7280); min-width:0; }
.tm-magic .tm-pay-product-pair .tm-pay-input { width:100%; margin-top:4px; }
.tm-magic .tm-pay-split-head,.tm-magic .tm-pay-split-row { display:grid; grid-template-columns:minmax(0,1fr) 104px 104px; gap:12px; border-bottom:1px solid var(--tm-d-line, #f1f1ee); }
.tm-magic .tm-pay-split-head { padding:8px 0; font-size:11px; font-weight:600; color:var(--tm-muted); }
.tm-magic .tm-pay-split-row { align-items:center; padding:12px 0; font-size:13px; font-weight:500; color:var(--tm-d-blue-text, #374151); }
.tm-magic .tm-pay-split-row:last-child { border:0; }
.tm-magic .tm-pay-split-row .tm-pay-input { width:100%; }
.tm-magic .tm-pay-split-bar { height:6px; max-width:140px; overflow:hidden; border-radius:99px; background:#f2c46d; margin-top:6px; }
.tm-magic .tm-pay-split-bar > span { display:block; height:100%; background:var(--tm-brand); transition:width .2s; }
.tm-magic .tm-pay-error { padding:40px 16px; border:1px dashed var(--tm-border); border-radius:12px; background:var(--tm-d-surface, white); text-align:center; font-size:13px; color:var(--tm-d-muted, #6b7280); }
.tm-magic .tm-pay-error p { margin:8px 0; }
.tm-magic .tm-pay-error button { padding:8px 12px; border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-d-surface, white); color:var(--tm-brand); }
@media(max-width:1279px) { .tm-magic .tm-pay-columns { grid-template-columns:minmax(0,1fr); } }
@media(max-width:1023px) {
  .tm-magic .tm-pay-types { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tm-magic .tm-pay-type-panel { padding:12px; }
  .tm-magic .tm-pay-panel > header { padding:10px 12px; }
  .tm-magic .tm-pay-panel-body { padding:4px 12px; }
}
@media(max-width:767px) {
  .tm-magic .tm-pay-types { display:none; }
  .tm-magic .tm-pay-mobile { display:block; }
  .tm-magic .tm-pay-select-label { display:block; font-size:0; margin:0; }
  .tm-magic .tm-pay-mobile-select { display:block; width:100%; height:36px; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; margin:0; padding:0 12px; background:var(--tm-d-surface, white); color:var(--tm-ink); font-size:13px; outline:0; }
  .tm-magic .tm-pay-type-description { margin:4px 0 0; color:var(--tm-muted); font-size:11px; line-height:16px; }
}
@media(max-width:639px) {
  .tm-magic .tm-pay-row { grid-template-columns:minmax(0,1fr); gap:8px; }
  .tm-magic .tm-pay-row[data-pay-align=start] > .tm-pay-label { padding-top:0; }
  .tm-magic .tm-pay-segment button { padding:0 8px; }
}
@media(max-width:479px) {
  .tm-magic .tm-pay-split-head,.tm-magic .tm-pay-split-row { grid-template-columns:minmax(0,1fr) 88px 88px; gap:8px; }
  .tm-magic .tm-pay-split .tm-pay-input > span { width:24px; }
  .tm-magic .tm-pay-split .tm-pay-input > input { padding:0 6px; }
}
.tm-magic .cm-radio:checked { border-color:var(--tm-brand) !important; }
.tm-magic .cm-radio:checked::before, .tm-magic .cm-radio:checked::after { background:var(--tm-brand) !important; }
.tm-magic .team-settings-toggle-input:checked + .team-settings-toggle-slider { background:var(--tm-brand); }
.tm-magic .tm-detail-footer { display:none; flex:0 0 auto; max-height:none; min-height:57px; overflow:visible; align-items:center; gap:12px; padding:10px 16px; border-top:1px solid var(--tm-d-line, #e5e7eb); background:var(--tm-d-surface, white); }
.tm-magic .ts-detail-mode > .tm-detail-footer { display:flex; }
.tm-magic .tm-footer-note { flex:1; min-width:0; color:var(--tm-muted); font-size:12px; margin:0; }
.tm-magic .tm-footer-note.tm-dirty { color:var(--tm-d-orange-text, #a86400); }
.tm-magic .tm-footer-note.tm-dirty::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:#e58a00; margin-right:8px; }
.tm-magic .tm-footer-actions { flex:none; display:flex; align-items:center; gap:8px; margin-left:auto; }
.tm-magic .team-settings-cancel-btn, .tm-magic .team-settings-save-btn { display:inline-flex !important; justify-content:center; align-items:center; height:36px; padding:0 16px; border-radius:8px; font-size:13px; font-weight:500; box-shadow:none; }
.tm-magic .team-settings-cancel-btn { color:var(--tm-d-blue-text, #374151); background:var(--tm-d-surface, white); border:1px solid var(--tm-d-line, #e2e4e8); }
.tm-magic .team-settings-save-btn { color:var(--tm-d-on-brand, white) !important; background:var(--tm-brand) !important; border:1px solid var(--tm-brand); font-weight:600; }
.tm-magic #teamSettingsGlobalSaveBtn, .tm-magic #teamSettingsGlobalCancelBtn { width:auto !important; height:36px !important; min-height:0 !important; white-space:nowrap; }
.tm-magic .team-settings-btn-disabled { opacity:.4; }
.tm-magic .tm-detail-footer button[hidden] { display:none !important; }
.tm-magic .tm-detail-facts { display:flex; flex-shrink:0; gap:32px; margin:0 0 0 auto; padding:0 4px 0 16px; }
.tm-magic .tm-detail-facts dt { font-size:11px; font-weight:500; color:var(--tm-d-muted, #7a8a74); margin:0; }
.tm-magic .tm-detail-facts dd { font-size:13px; font-weight:600; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-magic .tm-detail-facts > div { max-width:200px; min-width:0; }
.tm-magic .tm-detail-facts-inline { display:none; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:2px; font-size:12px; color:var(--tm-d-muted, #6b7280); }
.tm-magic .tm-detail-facts-inline > span { display:inline-flex; align-items:center; gap:8px; }
.tm-magic .tm-detail-facts-inline > span + span::before { content:'·'; color:var(--tm-d-faint, #b6b9be); }
.tm-magic .tm-panel-body { padding:12px 16px; }
.tm-magic .tm-member-links { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px; }
.tm-magic .tm-member-links button { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--tm-d-line, #e2e4e8); background:var(--tm-d-surface, white); border-radius:8px; text-align:left; }
.tm-magic .tm-member-links button:hover { border-color:#3b8c2b80; background:var(--tm-d-surface2, #fafcf9); }
.tm-magic .tm-group-profile { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:10px; }
.tm-magic .tm-group-details-grid { display:grid; grid-template-columns:minmax(0,1fr) 120px 200px; align-items:start; gap:12px; }
.tm-magic .tm-group-status-field { display:flex; height:36px; align-items:center; gap:10px; color:var(--tm-brand); font-size:13px; }
.tm-magic .tm-group-status-hint { margin:6px 0 0; color:var(--tm-d-faint, #8a8f98); font-size:11px; }
.tm-magic .tm-group-name-error { margin:4px 0 0; color:var(--tm-d-red-text, #c23a3f); font-size:12px; }
.tm-magic #gpNameInput[aria-invalid=true] { border-color:#c23a3f; }
.tm-magic .tm-group-description-label { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.tm-magic .tm-group-description-label span { font-size:11px; color:var(--tm-d-faint, #9ca3af); }
.tm-magic #tm-group-description { min-height:138px; resize:vertical; }
.tm-magic .tm-group-profile .tm-profile-roles button { width:100%; height:auto; min-height:0; background:var(--tm-d-surface, white); color:var(--tm-ink); text-align:left; }
.tm-magic .tm-group-profile .tm-profile-roles .booking-visibility-item-content { display:flex; width:100%; }
.tm-magic .tm-group-cap-row .booking-visibility-item-content { display:flex; width:100%; align-items:center; gap:10px; }
.tm-magic .tm-group-cap-row .booking-visibility-item-text { flex:1; min-width:0; }
.tm-magic .tm-group-tech-only { font-size:10px; color:var(--tm-d-faint, #9ca3af); white-space:nowrap; }
.tm-magic .tm-group-cap-note { display:flex; align-items:start; gap:8px; margin:10px 0 0; font-size:12px; color:var(--tm-d-faint, #8a8f98); line-height:18px; }
.tm-magic .tm-group-cap-note i { margin-top:3px; }
.tm-magic .tm-group-profile .tm-panel-header::before { content:''; flex:none; width:3px; height:16px; margin-top:3px; border-radius:3px; background:var(--tm-brand); }
.tm-magic .tm-group-cap-row { padding:10px 12px !important; }
.tm-magic .tm-group-cap-row .booking-visibility-item-title { font-size:13px !important; font-weight:600 !important; line-height:20px; }
.tm-magic .tm-group-profile .tm-group-cap-row .booking-visibility-item-title, .tm-magic .tm-group-profile .tm-group-cap-row .tm-role-description { display:block; margin:0; }
.tm-magic .team-settings-group-profile-header .team-settings-profile-name-row { justify-content:flex-start; gap:10px; }
.tm-magic .team-settings-group-profile-header [data-group-status] { flex:none; }
.tm-magic [data-group-name] { flex:0 1 auto; width:auto; }
.tm-magic [data-group-status-label].tm-inactive { color:var(--tm-d-muted, #6b7280); }
.tm-magic .team-settings-group-profile-header .tm-detail-facts dd { display:flex; align-items:center; }
.tm-magic .tm-group-avatar { display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:12px; color:white; font-size:15px; font-weight:700; }
.tm-magic .tm-group-description { margin:2px 0 0; color:var(--tm-d-muted, #6b7280); font-size:12px; }
.tm-magic .tm-group-member-avatars { display:flex; margin-right:6px; }
.tm-magic .tm-group-member-avatars .tm-avatar { width:24px; height:24px; font-size:9px; margin-left:-6px; border:2px solid var(--tm-d-line, #f3f8f1); }
.tm-magic .tm-group-member-avatars .tm-avatar:first-child { margin-left:0; }
.tm-magic [data-gp-content=members] .tm-panel-body { padding:12px; }
.tm-magic .tm-member-links { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tm-magic .tm-member-links button { width:100%; height:auto; min-height:62px; gap:12px; color:var(--tm-ink); }
.tm-magic .tm-member-links .tm-identity-text { flex:1; min-width:0; }
.tm-magic .tm-member-links .tm-identity-text strong { display:flex; align-items:center; gap:6px; font-size:14px; }
.tm-magic .tm-member-links .tm-identity-text small { font-size:12px; }
.tm-magic .tm-member-links button > i { flex:none; color:var(--tm-d-faint, #b0b4ba); }
.tm-magic .tm-group-members-empty { padding:44px 12px; text-align:center; color:var(--tm-d-faint, #8a8f98); font-size:13px; }
@media(max-width:1279px) { .tm-magic .tm-group-profile { grid-template-columns:minmax(0,1fr); } .tm-magic .tm-member-links { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:1023px) { .tm-magic .tm-group-description { display:none; } }
@media(max-width:639px) { .tm-magic .tm-group-details-grid, .tm-magic .tm-member-links { grid-template-columns:minmax(0,1fr); } .tm-magic .tm-group-tech-only { white-space:normal; max-width:55px; } }
.tm-magic .tm-gallery-content { display:flex; flex-direction:column; gap:8px; min-width:0; }
.tm-magic .tm-gallery-albums,.tm-magic .tm-gallery-photos { border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-d-surface, white); min-width:0; }
.tm-magic .tm-gallery-albums { padding:12px 16px; }
.tm-magic .tm-gallery-photos { padding:12px; }
.tm-magic .tm-gallery-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.tm-magic .tm-gallery-toolbar > div:first-child { flex:1; min-width:0; }
.tm-magic .tm-gallery-toolbar h3 { margin:0; color:var(--tm-dark); font-size:15px; font-weight:700; }
.tm-magic .tm-gallery-toolbar p { margin:0; font-size:12px; line-height:18px; color:var(--tm-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-magic .tm-gallery-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:none; height:36px; min-height:0; padding:0 14px; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; background:var(--tm-d-surface, white); color:var(--tm-d-blue-text, #374151); font-size:13px; font-weight:500; line-height:20px; }
.tm-magic .tm-gallery-btn i { font-size:16px; }
.tm-magic .tm-gallery-upload-icon { display:block; width:16px; height:16px; flex:none; }
.tm-magic .tm-gallery-primary { background:var(--tm-brand); border-color:var(--tm-brand); color:var(--tm-d-on-brand, white); font-weight:600; }
.tm-magic .tm-gallery-btn:disabled { opacity:.5; cursor:default; }
.tm-magic .tm-gallery-album-strip { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.tm-magic .tm-gallery-album { display:flex; align-items:center; justify-content:flex-start; gap:8px; height:44px; min-height:0; flex:none; padding:0 12px 0 6px; border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-d-surface, white); text-align:left; }
.tm-magic .tm-gallery-album > span:first-child { display:grid; place-items:center; height:32px; width:32px; border-radius:6px; background:var(--tm-d-surface2, #f4f5f4); color:var(--tm-muted); }
.tm-magic .tm-gallery-album strong,.tm-magic .tm-gallery-album small { display:block; line-height:16px; white-space:nowrap; }
.tm-magic .tm-gallery-album strong { color:var(--tm-ink); font-size:13px; font-weight:600; }
.tm-magic .tm-gallery-album small { font-size:11px; color:var(--tm-muted); }
.tm-magic .tm-gallery-album:hover:not(:disabled) { border-color:var(--tm-d-green-line, #cfe6c8); }
.tm-magic .tm-gallery-album:focus-visible { outline:2px solid var(--tm-brand); outline-offset:2px; }
.tm-magic .tm-gallery-album[aria-selected=true] { border-color:var(--tm-d-green-line, #cfe6c8); background:var(--tm-soft); }
.tm-magic .tm-gallery-album[aria-selected=true] > span:first-child { background:var(--tm-d-surface, white); color:var(--tm-brand); }
.tm-magic .tm-gallery-album[aria-selected=true] strong { color:var(--tm-brand); }
.tm-magic .tm-gallery-sort { display:block; flex:none; width:140px; height:36px; padding:0 12px; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; background:var(--tm-d-surface, white); font-size:13px; color:var(--tm-ink); }
.tm-magic .tm-gallery-month + .tm-gallery-month { margin-top:12px; }
.tm-magic .tm-gallery-month h4 { display:flex; align-items:baseline; gap:8px; margin:0 0 8px; font-size:13px; line-height:20px; font-weight:600; color:var(--tm-ink); }
.tm-magic .tm-gallery-month h4 > span { font-size:12px; font-weight:400; color:var(--tm-muted); }
.tm-magic .tm-gallery-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.tm-magic .tm-photo { min-width:0; }
.tm-magic .tm-gallery-view { display:block; width:100%; height:auto; min-height:0; padding:0; overflow:hidden; border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-d-surface, white); text-align:left; }
.tm-magic .tm-gallery-view:hover { border-color:#3b8c2b66; box-shadow:0 6px 18px #1f232814; }
.tm-magic .tm-gallery-image { display:block; position:relative; overflow:hidden; background:var(--tm-d-surface2, #f4f5f4); }
.tm-magic .tm-photo .tm-gallery-image { aspect-ratio:1; }
.tm-magic .tm-gallery-image img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.tm-magic .tm-gallery-image-fallback { display:flex; position:absolute; inset:0; align-items:center; justify-content:center; flex-direction:column; gap:8px; padding:8px; font-size:12px; color:var(--tm-muted); text-align:center; }
.tm-magic .tm-gallery-image-fallback i { font-size:24px; }
.tm-magic .tm-photo-caption { display:block; padding:6px 8px; }
.tm-magic .tm-photo-caption > strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:18px; color:var(--tm-ink); font-weight:600; }
.tm-magic .tm-photo-caption > span { display:flex; justify-content:space-between; gap:8px; font-size:11px; line-height:16px; color:var(--tm-muted); }
.tm-magic .tm-photo-caption time { flex:none; }
.tm-magic .tm-gallery-empty { display:flex; flex-direction:column; align-items:center; padding:48px 16px; border:1px dashed var(--tm-d-line, #d9dce1); border-radius:8px; text-align:center; }
.tm-magic .tm-gallery-empty > span { display:grid; place-items:center; height:48px; width:48px; border-radius:50%; background:var(--tm-soft); color:var(--tm-brand); font-size:24px; margin-bottom:12px; }
.tm-magic .tm-gallery-empty > strong { font-size:14px; font-weight:600; color:var(--tm-ink); }
.tm-magic .tm-gallery-empty p { max-width:320px; margin:2px 0 12px; font-size:12px; line-height:18px; color:var(--tm-muted); }
.tm-magic .tm-gallery-overlay { position:fixed; inset:0; z-index:9500; display:grid; place-items:center; padding:16px; background:#11182766; }
.tm-magic .tm-gallery-dialog { display:flex; flex-direction:column; width:100%; max-width:640px; max-height:90dvh; margin:0; border:0; border-radius:16px; background:var(--tm-d-surface, white); box-shadow:0 24px 60px #0003; overflow:hidden; }
.tm-magic .tm-gallery-dialog > header { display:flex; align-items:flex-start; gap:12px; padding:12px 20px; border-bottom:1px solid var(--tm-d-line, #f1f1ee); flex:none; }
.tm-magic .tm-gallery-dialog > header > div { flex:1; min-width:0; }
.tm-magic .tm-gallery-dialog h2 { margin:0; font-size:16px; line-height:24px; font-weight:600; color:var(--tm-ink); }
.tm-magic .tm-gallery-dialog header p { margin:2px 0 0; font-size:12px; line-height:18px; color:var(--tm-muted); }
.tm-magic .tm-gallery-close { display:grid; place-items:center; width:32px; height:32px; min-height:0; flex:none; padding:0; border:0; border-radius:8px; background:var(--tm-d-surface, white); color:var(--tm-d-muted, #6b7280); }
.tm-magic .tm-gallery-dialog-body { padding:14px 20px; overflow-y:auto; min-height:0; }
.tm-magic .tm-gallery-dialog-grid { display:grid; grid-template-columns:200px minmax(0,1fr); gap:16px; height:232px; }
.tm-magic .tm-gallery-viewer-image,.tm-magic .tm-gallery-selected { align-self:start; aspect-ratio:1; border:1px solid var(--tm-border); border-radius:12px; }
.tm-magic .tm-gallery-dialog-fields { min-width:0; overflow-y:auto; }
.tm-magic .tm-gallery-dialog-fields dl { display:grid; grid-template-columns:1fr; gap:10px; margin:0; font-size:13px; }
.tm-magic .tm-gallery-dialog-fields dl > div { display:flex; align-items:flex-start; gap:10px; }
.tm-magic .tm-gallery-dialog-fields dl i { flex:none; margin-top:2px; font-size:16px; color:var(--tm-d-faint, #9ca3af); }
.tm-magic .tm-gallery-dialog-fields dl > div:first-child i { color:var(--tm-brand); }
.tm-magic .tm-gallery-dialog-fields dt { font-size:11px; font-weight:500; color:var(--tm-muted); }
.tm-magic .tm-gallery-dialog-fields dd { margin:0; color:var(--tm-ink); overflow-wrap:anywhere; }
.tm-magic .tm-gallery-description { margin-top:10px; border-top:1px solid var(--tm-d-line, #f1f1ee); padding-top:10px; }
.tm-magic .tm-gallery-description p { margin:0; font-size:11px; font-weight:500; color:var(--tm-muted); }
.tm-magic .tm-gallery-description > div { margin-top:2px; font-size:13px; line-height:20px; color:var(--tm-d-blue-text, #374151); white-space:pre-line; overflow-wrap:anywhere; }
.tm-magic .tm-gallery-description .tm-gallery-no-description { font-style:italic; color:var(--tm-d-faint, #a1a7b0); }
.tm-magic .tm-gallery-prev,.tm-magic .tm-gallery-next { position:absolute; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:32px; height:32px; min-height:0; padding:0; border:0; border-radius:50%; background:var(--tm-d-surface, #ffffffe6); color:var(--tm-ink); box-shadow:0 1px 3px #0002; }
.tm-magic .tm-gallery-prev { left:8px; }
.tm-magic .tm-gallery-next { right:8px; }
.tm-magic .tm-gallery-prev:disabled,.tm-magic .tm-gallery-next:disabled { opacity:0; }
.tm-magic .tm-gallery-dialog > footer { display:flex; flex:none; justify-content:flex-end; align-items:center; gap:8px; min-height:0; max-height:none; height:auto; padding:10px 20px; border-top:1px solid var(--tm-d-line, #f1f1ee); background:var(--tm-d-surface, white); box-shadow:none; }
.tm-magic .tm-gallery-delete { color:var(--tm-d-red-text, #c23a3f); border-color:var(--tm-d-red-line, #f4d4d5); }
.tm-magic .tm-gallery-drop { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; width:100%; height:200px; min-height:0; padding:16px; border:2px dashed var(--tm-d-line, #d9dce1); border-radius:12px; background:var(--tm-d-surface, white); text-align:center; }
.tm-magic .tm-gallery-drop i { color:var(--tm-brand); font-size:28px; }
.tm-magic .tm-gallery-drop .tm-gallery-upload-icon { width:28px; height:28px; color:var(--tm-brand); }
.tm-magic .tm-gallery-drop strong { font-size:13px; color:var(--tm-ink); line-height:20px; }
.tm-magic .tm-gallery-drop small { color:var(--tm-muted); font-size:11px; line-height:16px; }
.tm-magic .tm-gallery-dragging { border-color:var(--tm-brand); background:var(--tm-soft); }
.tm-magic .tm-upload-form .tm-gallery-dialog-grid { height:auto; min-height:240px; }
.tm-magic .tm-gallery-selected img { object-fit:contain; }
.tm-magic .tm-gallery-photo-column { min-width:0; }
.tm-magic .tm-gallery-photo-tools { display:flex; align-items:center; justify-content:center; gap:4px; margin-top:10px; }
.tm-magic .tm-gallery-photo-tools button { display:inline-flex; justify-content:center; align-items:center; position:static; height:34px; min-height:0; min-width:34px; padding:0 8px; border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-d-surface, white); color:var(--tm-ink); font-size:12px; font-weight:500; white-space:nowrap; gap:5px; flex:none; }
.tm-magic .tm-gallery-photo-tools svg { width:16px; height:16px; flex:none; }
.tm-magic .tm-gallery-photo-tools button:hover:not(:disabled) { border-color:var(--tm-brand); background:var(--tm-soft); color:var(--tm-brand); }
.tm-magic .tm-gallery-photo-tools button:focus-visible { outline:2px solid var(--tm-brand); outline-offset:2px; }
.tm-magic .tm-gallery-photo-tools button:disabled { opacity:.5; cursor:wait; }
.tm-magic .tm-gallery-crop-stage { position:relative; width:fit-content; max-width:100%; margin:0 auto; overflow:hidden; border-radius:10px; background:var(--tm-d-surface2, #f2f3f5); touch-action:none; cursor:crosshair; }
.tm-magic .tm-gallery-crop-stage canvas { display:block; max-width:100%; max-height:min(48dvh,380px); width:auto; height:auto; }
.tm-magic .tm-gallery-logo-layer { position:absolute; overflow:visible; pointer-events:none; z-index:1; }
.tm-magic .tm-gallery-logo-transform { position:absolute; outline:1px solid var(--tm-d-surface, white); box-shadow:0 0 0 2px var(--tm-brand); transform-origin:center; }
.tm-magic .tm-gallery-logo-image { display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; cursor:grab; pointer-events:auto; touch-action:none; user-select:none; }
.tm-magic .tm-gallery-logo-image:active { cursor:grabbing; }
.tm-magic .tm-gallery-logo-image:focus-visible { outline:2px solid var(--tm-brand); outline-offset:2px; }
.tm-magic .tm-gallery-logo-handle { position:absolute; display:flex; align-items:center; justify-content:center; width:24px; height:24px; min-width:0; min-height:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--tm-brand); pointer-events:auto; touch-action:none; user-select:none; }
.tm-magic .tm-gallery-logo-grip { display:block; width:10px; height:10px; border:1px solid var(--tm-brand); border-radius:2px; background:var(--tm-d-surface, white); }
.tm-magic .tm-gallery-logo-handle[data-logo-corner=nw] { left:0; top:0; transform:translate(-50%,-50%); cursor:nwse-resize; }
.tm-magic .tm-gallery-logo-handle[data-logo-corner=ne] { left:100%; top:0; transform:translate(-50%,-50%); cursor:nesw-resize; }
.tm-magic .tm-gallery-logo-handle[data-logo-corner=sw] { left:0; top:100%; transform:translate(-50%,-50%); cursor:nesw-resize; }
.tm-magic .tm-gallery-logo-handle[data-logo-corner=se] { left:100%; top:100%; transform:translate(-50%,-50%); cursor:nwse-resize; }
.tm-magic .tm-gallery-logo-rotate { left:50%; top:-26px; transform:translate(-50%,-50%); border:1px solid var(--tm-brand); border-radius:50%; background:var(--tm-d-surface, white); cursor:grab; font-size:12px; }
.tm-magic .tm-gallery-logo-rotate[data-side=right] { left:calc(100% + 26px); top:50%; }
.tm-magic .tm-gallery-logo-rotate[data-side=bottom] { left:50%; top:calc(100% + 26px); }
.tm-magic .tm-gallery-logo-rotate[data-side=left] { left:-26px; top:50%; }
.tm-magic .tm-gallery-logo-rotate[data-side=inside] { left:50%; top:12px; }
.tm-magic .tm-gallery-logo-rotate:active { cursor:grabbing; }
.tm-magic .tm-gallery-logo-tools { display:grid; grid-template-columns:minmax(0,1fr) 32px; align-items:center; gap:6px; width:100%; max-width:360px; margin:12px auto 0; padding-top:8px; border-top:1px solid var(--tm-border); color:var(--tm-ink); }
.tm-magic .tm-gallery-logo-tools > span { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; }
.tm-magic .tm-gallery-logo-adjustments { display:grid; grid-column:1 / -1; grid-template-columns:32px minmax(0,1fr) 32px 20px 64px; align-items:center; gap:6px; min-width:0; }
.tm-magic .tm-gallery-logo-tools button { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:1px solid var(--tm-border); border-radius:6px; background:var(--tm-d-surface, white); color:var(--tm-ink); }
.tm-magic .tm-gallery-logo-tools button:hover { background:var(--tm-soft); }
.tm-magic .tm-gallery-logo-tools button:focus-visible { outline:2px solid var(--tm-brand); outline-offset:1px; }
.tm-magic .tm-gallery-logo-adjustments label { display:flex; justify-content:center; margin:0; color:var(--tm-muted); }
.tm-magic .tm-upload-form .tm-gallery-logo-scale { width:100%; min-width:0; height:32px; margin:0; padding:0; accent-color:var(--tm-brand); }
.tm-magic .tm-upload-form .tm-gallery-logo-angle { width:64px; min-width:0; height:32px; margin:0; padding:0 4px; font-size:12px; }
.tm-magic .tm-gallery-logo-message { margin:8px 0 0; color:var(--tm-muted); font-size:12px; text-align:center; }
.tm-magic :is(.tm-gallery-logo-layer,.tm-gallery-logo-tools,.tm-gallery-logo-adjustments,.tm-gallery-logo-message)[hidden] { display:none; }
.tm-magic .tm-gallery-crop-box { position:absolute; border:2px solid var(--tm-d-surface, white); box-shadow:0 0 0 1px #0004,0 0 0 1000px #11182766; cursor:move; touch-action:none; }
.tm-magic .tm-gallery-crop-box::before,.tm-magic .tm-gallery-crop-box::after { content:""; position:absolute; pointer-events:none; inset:33.333% 0; border-block:1px solid #ffffff66; }
.tm-magic .tm-gallery-crop-box::after { inset:0 33.333%; border-block:0; border-inline:1px solid #ffffff66; }
.tm-magic .tm-gallery-crop-box:focus-visible { border-color:var(--tm-brand); outline:0; }
/* Resize zones are invisible so the frame stays clean: hover shows a resize cursor. */
.tm-magic .tm-gallery-crop-handle { position:absolute; width:24px; height:24px; }
.tm-magic .tm-gallery-crop-handle[data-corner=nw] { top:-8px; left:-8px; cursor:nwse-resize; }
.tm-magic .tm-gallery-crop-handle[data-corner=ne] { top:-8px; right:-8px; cursor:nesw-resize; }
.tm-magic .tm-gallery-crop-handle[data-corner=sw] { bottom:-8px; left:-8px; cursor:nesw-resize; }
.tm-magic .tm-gallery-crop-handle[data-corner=se] { bottom:-8px; right:-8px; cursor:nwse-resize; }
.tm-magic .tm-gallery-crop-handle[data-edge=n],.tm-magic .tm-gallery-crop-handle[data-edge=s] { left:16px; right:16px; width:auto; height:16px; cursor:ns-resize; }
.tm-magic .tm-gallery-crop-handle[data-edge=e],.tm-magic .tm-gallery-crop-handle[data-edge=w] { top:16px; bottom:16px; width:16px; height:auto; cursor:ew-resize; }
.tm-magic .tm-gallery-crop-handle[data-edge=n] { top:-8px; }
.tm-magic .tm-gallery-crop-handle[data-edge=s] { bottom:-8px; }
.tm-magic .tm-gallery-crop-handle[data-edge=e] { right:-8px; }
.tm-magic .tm-gallery-crop-handle[data-edge=w] { left:-8px; }
.tm-magic .tm-gallery-zoom { margin-top:12px; }
.tm-magic .tm-gallery-crop-tools { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px; margin-top:14px; }
.tm-magic .tm-gallery-crop-tools .tm-gallery-photo-tools { margin:0; }
.tm-magic .tm-upload-form .tm-gallery-crop-tools label { display:flex; align-items:center; gap:6px; }
.tm-magic .tm-upload-form .tm-gallery-crop-tools select { width:92px; height:34px; margin:0; padding:0 8px; background:var(--tm-d-surface, white); color:var(--tm-ink); }
.tm-magic .tm-gallery-crop-hint { margin:10px 0 0; color:var(--tm-muted); font-size:12px; line-height:18px; text-align:center; }
/* Fingers need a larger grab area. */
@media (pointer:coarse) {
  .tm-magic .tm-gallery-crop-handle[data-corner] { width:40px; height:40px; }
  .tm-magic .tm-gallery-crop-handle[data-corner=nw] { top:-14px; left:-14px; }
  .tm-magic .tm-gallery-crop-handle[data-corner=ne] { top:-14px; right:-14px; }
  .tm-magic .tm-gallery-crop-handle[data-corner=sw] { bottom:-14px; left:-14px; }
  .tm-magic .tm-gallery-crop-handle[data-corner=se] { bottom:-14px; right:-14px; }
  .tm-magic .tm-gallery-crop-handle[data-edge=n],.tm-magic .tm-gallery-crop-handle[data-edge=s] { left:26px; right:26px; height:28px; }
  .tm-magic .tm-gallery-crop-handle[data-edge=e],.tm-magic .tm-gallery-crop-handle[data-edge=w] { top:26px; bottom:26px; width:28px; }
  .tm-magic .tm-gallery-crop-handle[data-edge=n] { top:-14px; }
  .tm-magic .tm-gallery-crop-handle[data-edge=s] { bottom:-14px; }
  .tm-magic .tm-gallery-crop-handle[data-edge=e] { right:-14px; }
  .tm-magic .tm-gallery-crop-handle[data-edge=w] { left:-14px; }
}
/* Profile photo editor: one column, circular preview matching the avatar. */
.tm-magic .tm-upload-form .tm-avatar-editor-grid { grid-template-columns:minmax(0,1fr); min-height:0; }
.tm-magic .tm-avatar-editor-grid .tm-gallery-selected { width:min(220px,100%); height:auto; aspect-ratio:1; margin:0 auto; border-radius:50%; overflow:hidden; }
.tm-magic .tm-avatar-editor-grid .tm-gallery-selected img { width:100%; height:100%; object-fit:cover; }
.tm-magic .tm-avatar-editor-grid .tm-gallery-photo-tools { flex-wrap:wrap; margin-top:14px; }
.tm-magic .tm-avatar-editor-grid .tm-gallery-drop { max-width:320px; margin:0 auto; }
/* Avatar crop: fixed circle, the photo is dragged and zoomed behind it. */
.tm-magic .tm-avatar-crop-stage { width:min(100%,320px); aspect-ratio:1; margin:0 auto; overflow:hidden; border-radius:12px; background:#1f2328; touch-action:none; user-select:none; cursor:grab; }
.tm-magic .tm-avatar-crop-stage:active { cursor:grabbing; }
.tm-magic .tm-avatar-crop-stage:focus-visible { outline:2px solid var(--tm-brand); outline-offset:2px; }
.tm-magic .tm-avatar-crop-stage canvas { display:block; width:100%; height:100%; }
.tm-magic .tm-avatar-zoom { display:flex; align-items:center; gap:8px; width:min(100%,320px); margin:14px auto 0; }
.tm-magic .tm-avatar-zoom-step { display:grid; place-items:center; width:32px; height:32px; min-height:0; padding:0; flex:none; border:0; border-radius:50%; background:transparent; color:var(--tm-ink); }
.tm-magic .tm-avatar-zoom-step:hover:not(:disabled) { background:var(--tm-soft); color:var(--tm-brand); }
.tm-magic .tm-avatar-zoom-step:focus-visible { outline:2px solid var(--tm-brand); outline-offset:1px; }
.tm-magic .tm-avatar-zoom-step svg { width:18px; height:18px; }
.tm-magic .tm-avatar-zoom-range { flex:1; min-width:0; width:auto; height:24px; margin:0; padding:0; border:0; background:transparent; accent-color:var(--tm-brand); cursor:pointer; }
.tm-magic .tm-avatar-crop .tm-gallery-crop-tools { margin-top:10px; }
.tm-magic .tm-upload-form label { display:block; margin:0; font-size:12px; line-height:18px; font-weight:500; color:var(--tm-d-muted, #4b5563); }
.tm-magic .tm-upload-form select { display:block; width:100%; height:36px; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; padding:0 12px; margin:4px 0 8px; background:var(--tm-d-surface2, #f7f7f5); font-size:13px; color:var(--tm-d-faint, #8a8f98); }
.tm-magic .tm-gallery-description-label { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:4px; }
.tm-magic .tm-gallery-description-count { color:var(--tm-d-faint, #9ca3af); font-size:11px; }
.tm-magic .tm-upload-form textarea { display:block; width:100%; height:78px; padding:8px 12px; margin:0; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; outline:0; resize:none; font-size:13px; line-height:20px; color:var(--tm-ink); }
.tm-magic .tm-upload-form textarea:focus { border-color:var(--tm-brand); box-shadow:0 0 0 2px #3b8c2b26; }
.tm-magic .tm-gallery-dialog-error { margin:8px 0 0; color:var(--tm-d-red-text, #c23a3f); font-size:12px; line-height:18px; }
.tm-magic .tm-gallery-load-error { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:8px; padding:10px 12px; border:1px solid var(--tm-d-red-line, #f4d4d5); border-radius:8px; background:var(--tm-d-surface2, #fff7f7); color:var(--tm-d-red-text, #c23a3f); font-size:12px; }
.tm-magic .tm-gallery-load-error button { height:30px; min-height:0; padding:0 10px; border:1px solid var(--tm-d-red-line, #f4d4d5); border-radius:6px; background:var(--tm-d-surface, white); color:var(--tm-d-red-text, #c23a3f); font-size:12px; }
@media(max-width:1535px) { .tm-magic .tm-gallery-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(max-width:1279px) { .tm-magic .tm-gallery-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1023px) {
  .tm-magic .tm-gallery-albums { padding:10px 12px; }
  .tm-magic .tm-gallery-photos { padding:10px; }
  .tm-magic .tm-gallery-toolbar .tm-gallery-btn,.tm-magic .tm-gallery-dialog footer .tm-gallery-btn:has(i) { width:36px; padding:0; }
  .tm-magic .tm-gallery-toolbar .tm-gallery-btn > span,.tm-magic .tm-gallery-dialog footer .tm-gallery-btn > span { display:none; }
}
@media(max-width:767px) { .tm-magic .tm-gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:639px) {
  .tm-magic .tm-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tm-magic .tm-gallery-sort { width:132px; }
  .tm-magic .tm-gallery-album-note { display:none; }
  .tm-magic .tm-gallery-overlay { padding:64px 12px 12px; }
  .tm-magic .tm-gallery-dialog { max-height:calc(100dvh - 80px); }
  .tm-magic .tm-gallery-dialog > header { padding:10px 16px; }
  .tm-magic .tm-gallery-dialog h2 { font-size:15px; line-height:22px; }
  .tm-magic .tm-gallery-dialog header p { display:none; }
  .tm-magic .tm-gallery-dialog-body { padding:12px 16px; }
  .tm-magic .tm-gallery-dialog > footer { padding:10px 16px; }
  .tm-magic .tm-gallery-dialog-grid { grid-template-columns:minmax(0,1fr); height:auto; gap:12px; }
  .tm-magic .tm-gallery-dialog-fields { overflow:visible; }
  .tm-magic .tm-gallery-dialog-fields dl { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; }
  .tm-magic .tm-gallery-viewer-image,.tm-magic .tm-gallery-selected { aspect-ratio:auto; height:min(34vh,260px); }
  .tm-magic .tm-gallery-viewer-image img,.tm-magic .tm-gallery-selected img { height:100%; aspect-ratio:auto; }
  .tm-magic .tm-gallery-drop { height:150px; }
}
/* Keep existing form bindings; replace their visual language with Magic panels. */
.tm-magic .services-content-wrapper, .tm-magic .services2-main, .tm-magic .services2-content { background:var(--tm-d-surface, white); }
.tm-magic .services-category-btn.services-category-active, .tm-magic .services-tab-active, .tm-magic .services2-category-active { background:var(--tm-soft) !important; color:var(--tm-brand) !important; border-color:var(--tm-d-green-line, #cfe6c8) !important; }
.tm-magic .services-header { display:none; }
.tm-magic .services2-allow-cards { border-color:var(--tm-border); border-radius:12px; }
.tm-magic .permissions-header, .tm-magic .permissions-role-section, .tm-magic .permissions-quick-actions, .tm-magic .permissions-card { border-color:var(--tm-border); border-radius:12px; box-shadow:none; }
.tm-magic .permissions-role-section { display:none; }
.tm-magic .permissions-save-btn, .tm-magic .permissions-reset-btn { display:none; }
.tm-magic .permission-checkbox { accent-color:var(--tm-brand); }
.tm-magic .permissions-quick-card { padding:0; border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-d-surface, white); box-shadow:none; }
.tm-magic .permissions-quick-header { padding:12px 16px; border-bottom:1px solid var(--tm-d-line, #eef0ec); }
.tm-magic .permissions-quick-icon-box { display:none; }
.tm-magic .permissions-quick-text h3 { margin:0; color:var(--tm-dark); font-size:15px; font-weight:700; }
.tm-magic .permissions-quick-text p { margin:2px 0 0; color:var(--tm-muted); font-size:12px; }
.tm-magic .permissions-quick-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); align-content:start; gap:10px; height:auto !important; max-height:none; min-height:0; padding:12px 16px; background:var(--tm-d-surface, white); border:0; }
.tm-magic .permission-column { padding:12px; border:1px solid var(--tm-border); border-radius:8px; }
.tm-magic .permission-main-group { margin:0; }
.tm-magic .permission-main-title { text-transform:none; letter-spacing:0; color:var(--tm-d-blue-text, #374151); font-size:13px; }
.tm-magic .permission-checkbox-custom { border:1px solid var(--tm-d-line, #d1d5db); border-radius:5px; }
.tm-magic .permission-checkbox:checked + .permission-checkbox-custom,
.tm-magic .permission-checkbox:indeterminate + .permission-checkbox-custom { background:var(--tm-brand); border-color:var(--tm-brand); }
.tm-magic .permission-children { border-left-color:var(--tm-d-line, #e7e7e4); }
/* Accessibilities follows Magic's summary and collapsible permission cards. */
.tm-magic .permissions-quick-card.tm-access { border:0; border-radius:0; background:transparent; overflow:visible; }
.tm-magic .permissions-quick-header { display:none; }
.tm-magic .tm-access-load-error,.tm-magic .permissions-loading { column-span:all; }
.tm-magic .tm-access-toolbar { padding:10px 16px; border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-d-surface, white); margin-bottom:8px; }
.tm-magic .tm-access-controls { display:flex; align-items:center; gap:10px; position:relative; min-width:0; }
.tm-magic .tm-access-summary { flex:1; min-width:0; }
.tm-magic .tm-access-summary h3 { margin:0; color:var(--tm-dark); font-size:15px; line-height:22px; font-weight:700; }
.tm-magic .tm-access-progress-row { display:flex; align-items:center; gap:10px; margin-top:4px; }
.tm-magic .tm-access-progress { height:6px; width:100%; max-width:200px; border-radius:99px; overflow:hidden; background:var(--tm-d-surface2, #eef0ec); }
.tm-magic .tm-access-progress > span { display:block; height:100%; border-radius:99px; background:var(--tm-brand); transition:width .2s; }
.tm-magic .tm-access-count { font-size:12px; line-height:18px; color:var(--tm-d-muted, #6b7280); white-space:nowrap; }
.tm-magic .tm-access-desktop-search { width:220px; flex:none; }
.tm-magic .tm-access-search { display:block; width:100%; position:relative; margin:0; }
.tm-magic .tm-access .tm-sr-only { position:absolute; height:1px; width:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.tm-magic .tm-access svg { height:16px; width:16px; flex:none; display:block; }
.tm-magic .tm-access-search > svg { position:absolute; left:12px; top:10px; color:var(--tm-d-faint, #9ca3af); pointer-events:none; }
.tm-magic .tm-access .permissions-search-input { display:block; width:100%; height:36px; min-height:0; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; background:var(--tm-d-surface, white); padding:0 12px 0 36px; font-size:13px; line-height:20px; color:var(--tm-ink); outline:0; box-shadow:none; margin:0; }
.tm-magic .tm-access .permissions-search-input::placeholder { color:var(--tm-d-faint, #a1a1aa); }
.tm-magic .tm-access .permissions-search-input:focus { border-color:var(--tm-brand); box-shadow:0 0 0 2px #3b8c2b26; }
.tm-magic .tm-access-search-open { display:none; }
.tm-magic .tm-access-bulk { display:flex; flex:none; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; overflow:hidden; }
.tm-magic .tm-access-bulk > button { display:flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 12px; font-size:13px; font-weight:600; line-height:20px; border:0; border-radius:0; background:var(--tm-d-surface, white); color:var(--tm-brand); white-space:nowrap; }
.tm-magic .tm-access-bulk > .tm-access-clear { border-left:1px solid var(--tm-d-line, #e2e4e8); color:var(--tm-d-muted, #6b7280); font-weight:500; }
.tm-magic .tm-access-enable:hover:not(:disabled) { background:var(--tm-soft); }
.tm-magic .tm-access-clear:hover:not(:disabled) { color:var(--tm-d-red-text, #c23a3f); background:var(--tm-d-surface2, #fdecec); }
.tm-magic .tm-access-bulk > button:disabled { opacity:1; color:var(--tm-d-faint, #b0b4ba); }
.tm-magic .tm-access-inheritance { display:flex; align-items:center; gap:8px; color:var(--tm-muted); margin:8px 0 0; font-size:12px; line-height:18px; }
.tm-magic .tm-access-inheritance svg { height:14px; width:14px; }
.tm-magic .tm-access-inheritance strong { font-weight:600; color:var(--tm-d-muted, #4b5563); }
.tm-magic .tm-access-groups.permissions-quick-grid { display:block; padding:0; gap:8px; background:transparent; columns:2; }
.tm-magic .tm-access-group { border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-d-surface, white); overflow:hidden; margin:0 0 8px; break-inside:avoid; }
.tm-magic .tm-access-group-header { display:flex; align-items:center; gap:8px; padding-right:12px; }
.tm-magic .tm-access-expand { display:flex; align-items:center; gap:10px; flex:1; min-width:0; height:auto; min-height:58px; text-align:left; padding:10px 0 10px 10px; border:0; background:var(--tm-d-surface, white); }
.tm-magic .tm-access-expand:hover { background:var(--tm-d-surface2, #fafbf9); }
.tm-magic .tm-access-expand > svg { color:var(--tm-d-faint, #9ca3af); transform:rotate(-90deg); transition:transform .15s; }
.tm-magic .tm-access-expand[aria-expanded=true] > svg { transform:none; }
.tm-magic .tm-access-group-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:var(--tm-d-surface2, #f1f2f0); color:var(--tm-d-faint, #a1a7b0); flex:none; }
.tm-magic .tm-access-group-icon > svg { width:16px; height:16px; }
.tm-magic .tm-access-group-icon.tm-access-has-enabled { background:var(--tm-soft); color:var(--tm-brand); }
.tm-magic .tm-access-group-title { flex:1; min-width:0; }
.tm-magic .tm-access-group-title strong { display:block; font-size:14px; line-height:20px; font-weight:600; color:var(--tm-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-magic .tm-access-group-count { display:block; font-size:12px; line-height:18px; color:var(--tm-muted); }
.tm-magic .tm-access-toggle { position:relative; width:44px; height:24px; flex:none; padding:0; border:0; border-radius:99px; background:var(--tm-d-line, #d1d5db); transition:background .15s; }
.tm-magic .tm-access-toggle[aria-checked=true] { background:#3e9b3a; }
.tm-magic .tm-access-toggle > span { position:absolute; left:2px; top:2px; height:20px; width:20px; background:var(--tm-d-surface, white); border-radius:50%; box-shadow:0 1px 3px #0002; transition:transform .15s; }
.tm-magic .tm-access-toggle[aria-checked=true] > span { transform:translateX(20px); }
.tm-magic .tm-access-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; border-top:1px solid var(--tm-d-line, #f1f1ee); list-style:none; margin:0; padding:8px 14px; }
.tm-magic .tm-access-items.tm-access-items-tree { grid-template-columns:minmax(0,1fr); }
.tm-magic .tm-access-items li { list-style:none; min-width:0; margin:0; padding:0; }
.tm-magic .tm-access-item.permission-checkbox-label { display:flex; align-items:center; gap:10px; padding:6px 0 6px calc(var(--access-depth) * 26px); margin:0; cursor:pointer; color:var(--tm-d-blue-text, #374151); font-size:13px; font-weight:400; line-height:20px; min-height:32px; }
.tm-magic .tm-access-item:hover { color:var(--tm-ink); }
.tm-magic .tm-access-item .permission-checkbox { display:block !important; position:static !important; appearance:auto; -webkit-appearance:auto; visibility:visible !important; opacity:1 !important; pointer-events:auto; width:16px !important; height:16px !important; min-width:16px; margin:0 !important; padding:0; flex:none; clip:auto; clip-path:none; accent-color:#3e9b3a; cursor:pointer; }
.tm-magic .tm-access-item .permission-checkbox:focus-visible { outline:2px solid var(--tm-brand); outline-offset:2px; }
.tm-magic .tm-access-item .permission-checkbox-custom { display:none; }
.tm-magic .tm-access-empty,.tm-magic .tm-access-load-error { padding:48px 16px; border:1px dashed var(--tm-d-line, #d9dce1); border-radius:12px; text-align:center; background:var(--tm-d-surface, white); color:var(--tm-d-muted, #6b7280); font-size:13px; }
.tm-magic .tm-access-empty svg { width:24px; height:24px; margin:auto; color:var(--tm-d-faint, #b0b4ba); }
.tm-magic .tm-access-empty p,.tm-magic .tm-access-load-error p { margin:8px 0 0; }
.tm-magic .tm-access-retry { margin-top:12px; padding:8px 12px; border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-d-surface, white); color:var(--tm-brand); }
.tm-magic .tm-access-search-overlay { position:absolute; inset:0; display:flex; align-items:center; gap:8px; background:var(--tm-d-surface, white); z-index:10; }
.tm-magic .tm-access-search-close { display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:8px; color:var(--tm-d-muted, #4b5563); background:var(--tm-d-surface, white); flex:none; }
@media(max-width:1279px) { .tm-magic .tm-access-groups.permissions-quick-grid { columns:1; } }
@media(min-width:1024px) { .tm-magic .tm-access-search-overlay { display:none; } }
@media(max-width:1023px) {
  .tm-magic .tm-access-desktop-search { display:none; }
  .tm-magic .tm-access-search-open { display:grid; place-items:center; flex:none; height:36px; width:36px; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; background:var(--tm-d-surface, white); color:var(--tm-d-muted, #4b5563); padding:0; }
  .tm-magic .tm-access-search-open.tm-access-search-active { color:var(--tm-brand); background:var(--tm-soft); border-color:var(--tm-d-green-line, #cfe6c8); }
  .tm-magic .tm-access-toolbar { padding:10px 12px; }
}
@media(max-width:639px) {
  .tm-magic .tm-access-bulk > button > span,.tm-magic .tm-access-count > span { display:none; }
  .tm-magic .tm-access-items { grid-template-columns:minmax(0,1fr); }
}
.tm-magic .gp-card, .tm-magic .cm-card { border-color:var(--tm-border) !important; border-radius:12px !important; box-shadow:none !important; }
.tm-magic .gp-card-title, .tm-magic .cm-card-title { color:var(--tm-dark) !important; font-size:15px !important; }
.tm-magic .gp-card-hd, .tm-magic .cm-card-hd { border-bottom-color:var(--tm-d-line, #eef0ec) !important; background:var(--tm-d-surface, white) !important; }
.tm-magic .gp-btn.active, .tm-magic .cm-pay-btn.active, .tm-magic .cm-seg-btn.active { background:var(--tm-soft) !important; color:var(--tm-brand) !important; border-color:var(--tm-d-green-line, #cfe6c8) !important; }
.tm-magic .cm-radio, .tm-magic .gp-radio { accent-color:var(--tm-brand) !important; }
.tm-magic .cm-inp { font-family:inherit !important; border-radius:8px !important; border-color:var(--tm-d-line, #e2e4e8) !important; }
.tm-magic .cm-pay-select-trigger { border-color:var(--tm-d-green-line, #cfe6c8) !important; background:var(--tm-soft) !important; color:var(--tm-brand) !important; }
.tm-magic .group-capabilities-grid { grid-template-columns:1fr !important; gap:0 !important; }
.tm-magic .group-capability-item { padding:8px 0 !important; border:0 !important; border-bottom:1px solid var(--tm-d-line, #f1f1ee) !important; border-radius:0; box-shadow:none; background:var(--tm-d-surface, white) !important; }
.tm-magic .group-capability-checkbox:checked + .group-capability-toggle { background:var(--tm-brand); }
.tm-magic .team-settings-section-danger { border-color:var(--tm-d-red-line, #f0d5d5); }
.tm-magic .tm-profile-identity-form { display:flex; align-items:flex-start; gap:16px; }
.tm-magic .tm-profile-identity-form > .team-settings-form-grid { flex:1; min-width:0; }
.tm-magic .tm-profile-column .team-settings-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.tm-magic .tm-profile-column .team-settings-form-field { min-width:0 !important; }
.tm-magic .tm-profile-wide, .tm-magic .tm-profile-color { grid-column:1 / -1; }
.tm-magic .tm-profile-basic-body .team-settings-form-grid { margin:0; }
.tm-magic .tm-profile-avatar-edit { display:flex; flex:none; flex-direction:column; align-items:center; gap:6px; margin:0; }
.tm-magic .tm-profile-avatar-edit .tm-avatar { width:96px; height:96px; font-size:28px; border-radius:12px; }
.tm-magic .tm-profile-avatar-edit .tm-avatar.tm-avatar-light { box-shadow:inset 0 0 0 1px var(--tm-border); }
.tm-magic .tm-profile-avatar-edit .tm-avatar > span .tm-icon { width:32px; height:32px; }
.tm-magic .tm-profile-avatar-edit button { height:auto; gap:0; overflow:visible; padding:0; border:0; background:transparent; }
.tm-magic .tm-profile-avatar-edit .tm-profile-photo { display:block; width:96px; height:96px; min-height:96px; position:relative; border-radius:12px; }
.tm-magic .tm-profile-camera { position:absolute; right:-6px; bottom:-6px; display:grid; place-items:center; width:32px; height:32px; border:2px solid var(--tm-d-surface, white); border-radius:50%; background:#1f2328; color:white; font-size:16px; transition:background-color .15s; }
.tm-magic .tm-profile-photo:hover .tm-profile-camera { background:var(--tm-brand); }
.tm-magic .tm-profile-photo-link { color:var(--tm-brand); font-size:12px; font-weight:600; line-height:18px; }
.tm-magic .tm-profile-photo-link:hover { text-decoration:underline; }
.tm-magic .tm-avatar-inactive { opacity:.6; filter:grayscale(1); }
.tm-magic .tm-profile-bio { margin-top:12px; }
.tm-magic .tm-profile-bio-label { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.tm-magic .tm-profile-bio-label .team-settings-form-label, .tm-magic .tm-profile-bio-label .team-settings-char-count, .tm-magic .tm-profile-bio-label p { margin:0; }
.tm-magic .tm-profile-bio .team-settings-textarea { height:64px; min-height:64px; resize:none; }
.tm-magic .team-settings-profile-name-row { display:flex; align-items:center; justify-content:flex-start; gap:8px; }
.tm-magic .team-settings-profile-name-row .team-settings-profile-name { flex:none; }
.tm-magic .tm-name-status .tm-status { display:inline-grid; place-items:center; color:var(--tm-d-green-text, #3b8c2b); }
.tm-magic .tm-name-status .tm-status.tm-inactive { color:var(--tm-d-faint, #9ca3af); }
.tm-magic .tm-name-status .tm-icon { width:16px; height:16px; }
.tm-magic .tm-profile-subtitle { font-size:12px; line-height:16px; color:var(--tm-muted); }
.tm-magic .tm-app-block .booking-visibility-item-content > .tm-profile-passcode-action, .tm-magic .tm-portal-parent .ts-portal-send-btn { order:2; }
.tm-magic .tm-app-block .booking-visibility-item-content > .booking-toggle-medium, .tm-magic .tm-portal-parent > label { order:3; }
.tm-magic .tm-profile-column .team-settings-custom-select { width:100% !important; min-width:0; max-width:none; flex:1; }
.tm-magic .tm-profile-column #ts-turn-bonus, .tm-magic .tm-profile-column #ts-booking-index { width:100% !important; }
.tm-magic .tm-profile-app-grid { display:flex; flex-direction:column; align-items:stretch; gap:0; }
.tm-magic .tm-profile-app-options { overflow:hidden; border:1px solid var(--tm-border); border-radius:8px; margin-bottom:10px; }
.tm-magic #ts-booking-index:disabled { background:var(--tm-d-surface2, #f7f7f5); color:var(--tm-d-faint, #9ca3af); cursor:not-allowed; }
.tm-magic.tm-new-member .team-settings-profile-header :is(.tm-detail-facts,.tm-detail-facts-inline,.team-settings-profile-status-badge,.team-settings-profile-actions) { display:none !important; }
.tm-magic .tm-member-setup-notice { margin:0 0 10px; padding:10px 12px; border:1px solid var(--tm-d-orange-line, #f4dbac); border-radius:8px; background:var(--tm-d-amber-soft, #fffbeb); color:var(--tm-d-orange-text, #8a5b10); font-size:12px; }
.tm-magic .tm-app-block + .tm-app-block { border-top:1px solid var(--tm-d-line, #eef0ec); }
.tm-magic .tm-app-block > .ts-cap-card { border-bottom:0 !important; }
.tm-magic .tm-app-children { border-top:1px solid var(--tm-d-line, #f1f1ee); background:var(--tm-d-surface2, #fbfbfa); }
.tm-magic .tm-app-children > .ts-cap-card { position:relative; padding-left:36px !important; background:var(--tm-d-surface2, #fbfbfa) !important; }
.tm-magic .tm-app-children > .ts-cap-card::before { content:''; position:absolute; top:0; left:20px; width:10px; height:50%; border-left:1px solid var(--tm-d-line, #cbd0d6); border-bottom:1px solid var(--tm-d-line, #cbd0d6); border-bottom-left-radius:4px; }
/* Tech App & Portal blocks follow Magic Salon Map AppAccessBlock: 32px icon tile, brand tint when on. */
.tm-magic .tm-app-ico { display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:8px; background:var(--tm-d-surface2, #f1f2f0); color:var(--tm-d-faint, #a1a7b0); transition:background-color .15s, color .15s; }
.tm-magic .tm-app-ico .tm-icon { width:16px; height:16px; }
.tm-magic .tm-app-block.is-on .tm-app-ico { background:var(--tm-soft); color:var(--tm-brand); }
.tm-magic .tm-app-block > .ts-cap-card .booking-visibility-item-content, .tm-magic .tm-portal-parent { gap:12px; }
.tm-magic .tm-app-block > .ts-cap-card .booking-visibility-item-title, .tm-magic .tm-app-block .tm-portal-text strong { font-size:13px; font-weight:600; color:var(--tm-ink); }
.tm-magic .tm-app-block > .ts-cap-card .tm-role-description, .tm-magic .tm-app-block .tm-portal-text small { color:var(--tm-muted); }
.tm-magic .tm-app-block .booking-visibility-item-text { flex:1; }
.tm-magic .tm-portal-parent { display:flex; align-items:center; gap:10px; padding:10px 12px; }
.tm-magic .tm-portal-text { flex:1; min-width:0; }
.tm-magic .tm-portal-text strong { display:block; font-size:13px; font-weight:500; color:var(--tm-ink); }
.tm-magic .tm-portal-text small { display:block; margin-top:2px; font-size:12px; line-height:16px; color:var(--tm-d-muted, #6b7280); }
.tm-magic .tm-profile-app-grid :is(.ts-portal-send-btn,.ts-portal-reset-btn), .tm-magic .tm-profile-app-grid .ts-cap-card .ts-send-passcode-btn { height:30px; border:1px solid var(--tm-border) !important; padding:0 8px !important; border-radius:6px; background:var(--tm-d-surface, white) !important; color:var(--tm-brand) !important; font-size:11px; white-space:nowrap; }
.tm-magic .tm-portal-touch { padding:10px 12px 10px 36px; margin:0; }
.tm-magic .tm-app-extra h4 { margin:0; padding:4px 0 6px; font-size:12px; font-weight:500; color:var(--tm-d-muted, #6b7280); }
.tm-magic .tm-app-extra > .ts-cap-card { padding-left:0 !important; padding-right:0 !important; }
.tm-magic .tm-boss-access { padding-left:0; padding-right:0; }
.tm-magic .tm-app-email { display:flex; align-items:center; gap:8px; margin:10px 0 0; color:var(--tm-d-muted, #6b7280); font-size:12px; overflow-wrap:anywhere; }
.tm-magic .tm-app-email strong { font-weight:600; color:var(--tm-ink); }
.tm-magic .tm-app-email.is-warn { color:var(--tm-d-amber-text, #a86400); }
.tm-magic .tm-profile-app-grid :is(.ts-portal-send-btn,.ts-portal-reset-btn), .tm-magic .tm-profile-app-grid .ts-cap-card .ts-send-passcode-btn { height:32px; padding:0 10px !important; border-color:var(--tm-d-green-line, #cfe6c8) !important; border-radius:8px; font-size:12px; font-weight:600; }
.tm-magic .tm-profile-app-grid :is(.ts-portal-send-btn,.ts-portal-reset-btn):not(:disabled):hover, .tm-magic .tm-profile-app-grid .ts-send-passcode-btn:not(:disabled):hover { background:var(--tm-soft) !important; }
.tm-magic .tm-profile-app-grid :is(.ts-portal-send-btn,.ts-portal-reset-btn,.ts-send-passcode-btn):disabled { border-color:var(--tm-d-line, #e2e4e8) !important; color:var(--tm-d-faint, #b0b4ba) !important; opacity:1; }
.tm-magic .tm-app-extra { overflow:hidden; border:1px solid var(--tm-border); border-radius:8px; }
.tm-magic .tm-app-extra h4 { padding:8px 14px; border-bottom:1px solid var(--tm-d-line, #f1f1ee); background:var(--tm-d-surface2, #fbfbfa); }
.tm-magic .tm-app-extra > :is(.ts-cap-card,.tm-boss-access) { padding:10px 14px !important; }
.tm-magic .tm-app-extra > :is(.ts-cap-card,.tm-boss-access) + :is(.ts-cap-card,.tm-boss-access) { border-top:1px solid var(--tm-d-line, #f1f1ee); }
.tm-magic .tm-app-email .tm-icon { width:14px; height:14px; }
.tm-magic .tm-mobile-search-open, .tm-magic .tm-mobile-search-close, .tm-magic .tm-mobile-filter-open { display:none; }
.tm-magic .tm-mobile-filter-panel { position:fixed; inset:auto; margin:0; padding:0; width:min(300px,calc(100vw - 20px)); max-height:min(65dvh,calc(100dvh - 20px)); border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-d-surface, white); box-shadow:0 12px 32px #0000001f; color:var(--tm-ink); z-index:1100; }
.tm-magic .tm-mobile-filter-panel:popover-open { display:flex; flex-direction:column; }
.tm-magic .tm-mobile-filter-panel > header, .tm-magic .tm-mobile-filter-panel > footer { display:flex; flex:none; align-items:center; justify-content:space-between; padding:10px 12px; gap:12px; }
.tm-magic .tm-mobile-filter-panel > header { border-bottom:1px solid var(--tm-d-line, #eef0ec); font-size:14px; }
.tm-magic .tm-mobile-filter-panel > footer { border-top:1px solid var(--tm-d-line, #eef0ec); }
.tm-magic .tm-mobile-filter-panel header button { display:grid; place-items:center; border:0; background:transparent; width:28px; height:28px; color:var(--tm-d-muted, #6b7280); }
.tm-magic .tm-mobile-filter-body { overflow:auto; min-height:0; padding:0 6px; }
.tm-magic .tm-mobile-filter-body section + section { border-top:1px solid var(--tm-d-line, #eef0ec); }
.tm-magic .tm-mobile-filter-body h4 { margin:0; padding:10px 8px 2px; font-size:12px; font-weight:600; color:var(--tm-d-muted, #6b7280); }
.tm-magic .tm-mobile-filter-panel .tm-filter-menu { display:block; position:static; border:0; border-radius:0; box-shadow:none; max-height:none; overflow:visible; min-width:0; padding:0 0 6px; }
.tm-magic .tm-group-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr)); }
.tm-magic .tm-group-grid .group-profile-card { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:12px 14px; text-align:left; }
.tm-magic .tm-group-grid .tm-identity { align-items:flex-start; gap:12px; }
.tm-magic .tm-group-grid .tm-avatar { width:40px; height:40px; font-size:14px; border-radius:8px; }
.tm-magic .tm-group-grid [data-inactive=true] .tm-avatar { opacity:.5; }
.tm-magic .tm-group-grid .tm-identity strong { font-size:15px; font-weight:600; }
.tm-magic .tm-group-grid [data-inactive=true] .tm-identity strong { color:var(--tm-d-muted, #6b7280); }
.tm-magic .tm-group-grid .tm-group-description { display:block; margin:8px 0 0; color:var(--tm-d-muted, #6b7280); font-size:12.5px; line-height:18px; }
.tm-magic .tm-group-table .tm-group-description { display:block; }
.tm-magic .tm-group-card-settings { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.tm-magic .tm-group-permissions { display:inline-flex; align-items:center; gap:4px; color:var(--tm-d-muted, #6b7280); font-size:12px; }
.tm-magic .tm-group-permissions .tm-icon { width:14px; height:14px; color:var(--tm-d-faint, #9ca3af); }
.tm-magic .tm-group-card-members { display:flex; align-items:center; gap:8px; border-top:1px solid var(--tm-d-line, #f1f1ee); padding-top:8px; margin-top:8px; font-size:12px; font-weight:500; color:var(--tm-d-muted, #4b5563); }
.tm-magic .tm-group-card-members .tm-icon { color:var(--tm-d-faint, #9ca3af); }
.tm-magic .tm-contract-status { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:12px; font-size:12px; color:var(--tm-muted); }
.tm-magic .tm-schedule-notice { font-size:12px; color:var(--tm-muted); margin:0 0 10px; }
.tm-magic .team-add-member-modal { z-index:1050; position:fixed; inset:0; padding:0; background:var(--tm-d-surface2, #f7f7f5); }
.tm-magic .team-add-member-modal-content { display:flex; flex-direction:column; position:relative; width:100%; max-width:none; height:100%; max-height:none; margin:0; border:0; border-radius:0; font-family:inherit; transform:none; }
.tm-magic .team-add-member-modal-header { background:var(--tm-d-surface2, #f3f8f1); border-bottom:1px solid var(--tm-d-line, #e3eddf); padding:18px 20px; }
.tm-magic .team-add-member-modal-title { font-size:17px; font-weight:700; text-transform:uppercase; }
.tm-magic .team-add-member-modal-body { flex:1; min-height:0; overflow:auto; padding:12px; background:var(--tm-d-surface2, #f7f7f5); }
.tm-magic #addTechForm { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:12px; }
.tm-magic .team-add-member-section { margin:0; background:var(--tm-d-surface, white); border:1px solid var(--tm-border); border-radius:12px; padding:16px; }
.tm-magic .team-add-member-section-title { color:var(--tm-dark); font-size:15px; font-weight:700; border-bottom:1px solid var(--tm-d-line, #eef0ec); padding-bottom:12px; }
.tm-magic .team-add-member-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tm-magic .team-add-member-form-label { font-size:12px; font-weight:500; color:var(--tm-d-muted, #4b5563); }
.tm-magic .team-add-member-form-input { height:36px; border-radius:8px; border-color:var(--tm-d-line, #e2e4e8); font-size:13px; }
.tm-magic .team-add-member-modal-footer { flex:none; padding:10px 16px; background:var(--tm-d-surface, white); border-top:1px solid var(--tm-d-line, #e5e7eb); }
.tm-magic .team-add-member-modal-footer button { height:36px; padding:0 16px; border-radius:8px; font-size:13px; }
.tm-magic .team-add-member-btn-submit { background:var(--tm-brand); border-color:var(--tm-brand); }
.tm-magic .booking-visibility-grid.ts-cap-grid { display:flex !important; flex-direction:column; gap:0 !important; padding:0 !important; }
.tm-magic .ts-cap-card { display:flex !important; flex-direction:row !important; align-items:center; padding:10px 12px !important; border:0 !important; border-bottom:1px solid var(--tm-d-line, #f1f1ee) !important; border-radius:0 !important; background:var(--tm-d-surface, white) !important; box-shadow:none !important; }
.tm-magic .ts-cap-card .booking-visibility-item-title { font-size:13px !important; font-weight:500 !important; color:var(--tm-ink) !important; }
.tm-magic .ts-cap-icon { display:none; }
.tm-magic .ts-cap-card .booking-toggle-medium { margin-left:auto; }
.tm-magic .ts-cap-card .booking-visibility-item-content { display:flex; align-items:center; width:100%; min-width:0; gap:12px; }
.tm-magic .ts-cap-card .booking-visibility-item-text { min-width:0; margin-right:0; }
.tm-magic .booking-toggle-medium { display:inline-flex; align-items:center; justify-content:flex-start; gap:0; width:36px; height:20px; padding:2px; border:0; background:var(--tm-d-line, #d1d5db); }
.tm-magic .booking-toggle-medium-knob { flex:0 0 16px; width:16px; height:16px; background:var(--tm-d-surface, white); transform:translateX(0); }
.tm-magic .booking-toggle-medium.enabled .booking-toggle-medium-knob { transform:translateX(16px); }
.tm-magic .ts-cap-card .ts-send-passcode-btn { background:var(--tm-brand) !important; width:auto !important; white-space:nowrap; }
.tm-magic .team-settings-toggle-switch { width:36px; height:20px; margin:0; background:var(--tm-d-line, #d1d5db); }
.tm-magic .team-settings-toggle-switch:has(input:checked) { background:var(--tm-brand); }
.tm-magic .team-settings-toggle-slider { width:16px; height:16px; top:2px; left:2px; background:var(--tm-d-surface, white) !important; transform:none; }
.tm-magic .team-settings-toggle-input:checked + .team-settings-toggle-slider { transform:translateX(16px); }
.tm-magic .team-settings-toggle-slider::before { display:none; }
.tm-magic .booking-toggle-medium.enabled { background:var(--tm-brand) !important; }
.tm-magic .ts-cap-card.ts-cap-locked { opacity:.45; }
.tm-magic .tm-profile-roles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
.tm-magic .tm-profile-role.ts-cap-card { align-items:flex-start; padding:10px 12px !important; border:1px solid var(--tm-border) !important; border-radius:8px !important; cursor:pointer; }
.tm-magic .tm-profile-role.ts-cap-card[aria-checked=true] { border-color:var(--tm-brand) !important; background:var(--tm-soft) !important; }
.tm-magic .tm-profile-role .booking-visibility-item-content { align-items:flex-start; gap:10px; }
.tm-magic .tm-profile-role .booking-visibility-item-content::before { content:''; flex:none; width:16px; height:16px; margin-top:2px; border:2px solid var(--tm-d-line, #c9cdd3); border-radius:50%; }
.tm-magic .tm-profile-role[aria-checked=true] .booking-visibility-item-content::before { border-color:var(--tm-brand); background:radial-gradient(circle,var(--tm-brand) 0 4px,transparent 4.5px); }
.tm-magic .tm-profile-role .booking-toggle-medium { display:none; }
.tm-magic .tm-profile-role.ts-cap-card .booking-visibility-item-title { font-weight:600 !important; }
.tm-magic .tm-role-description { display:block; margin-top:2px; font-size:12px; line-height:16px; color:var(--tm-d-muted, #6b7280); }
.tm-magic .tm-profile-capabilities { overflow:hidden; border:1px solid var(--tm-border); border-radius:8px; }
.tm-magic .tm-profile-capabilities > .ts-cap-card { padding:10px 16px !important; }
/* Online Booking is one level below Book Appointment, as in CapabilityRow. */
.tm-magic .tm-profile-capabilities > .ts-cap-card:is([data-cap=bookingOnline], [data-group-cap-row=allowBookingOnline]) {
  position:relative; padding-left:36px !important; background:var(--tm-d-surface2, #fbfbfa) !important;
}
.tm-magic .tm-profile-capabilities > .ts-cap-card:is([data-cap=bookingOnline], [data-group-cap-row=allowBookingOnline])::before {
  content:''; position:absolute; top:0; left:20px; width:10px; height:50%;
  border-left:1px solid var(--tm-d-line, #cbd0d6); border-bottom:1px solid var(--tm-d-line, #cbd0d6);
  border-bottom-left-radius:4px; pointer-events:none;
}
@media (max-width:639px) {
  .tm-magic .tm-profile-capabilities > .ts-cap-card { padding-left:12px !important; padding-right:12px !important; }
  .tm-magic .tm-profile-capabilities > .ts-cap-card:is([data-cap=bookingOnline], [data-group-cap-row=allowBookingOnline]) { padding-left:28px !important; }
  .tm-magic .tm-profile-capabilities > .ts-cap-card:is([data-cap=bookingOnline], [data-group-cap-row=allowBookingOnline])::before { left:14px; }
}
.tm-magic .tm-profile-capabilities .ts-cap-card:last-child, .tm-magic .tm-profile-app-options .ts-cap-card:last-child { border-bottom:0 !important; }
.tm-magic .tm-profile-app-options .ts-cap-card[data-cap=techApp] { flex-wrap:nowrap; }
.tm-magic .tm-profile-app-options .ts-cap-card[data-cap=techApp] .booking-visibility-item-content { gap:8px; }
.tm-magic .tm-profile-passcode-action { display:flex; flex:none; padding:0; margin:0; border:0; }
.tm-magic .tm-profile-passcode-action .ts-send-passcode-btn { height:30px; padding:0 8px !important; }
.tm-magic .gp-acc-card, .tm-magic .permissions-permission-group { background:var(--tm-d-surface, white); border:1px solid var(--tm-border); border-radius:12px; }
.tm-magic .cm-card-hd::before, .tm-magic .gp-card-hd::before { background:var(--tm-brand) !important; }
.tm-magic .cm-cash-check-row, .tm-magic .cm-check-label { color:var(--tm-dark) !important; }
.tm-magic .ts-portal-send-btn { background:var(--tm-brand) !important; }
.tm-magic .ts-portal-reset-btn { background:var(--tm-soft) !important; color:var(--tm-brand) !important; }
.tm-magic .ts-booking-item { border-color:var(--tm-border) !important; }
@media (max-width:1279px) {
  .tm-magic .team-settings-sections[data-tab-content=profile] { grid-template-columns:1fr; }
  .tm-magic .tm-detail-facts { gap:16px; }
}
@media (min-width:640px) and (max-width:1023px) {
  .tm-magic .tm-detail-facts-inline { display:flex; }
  .tm-magic .tm-detail-facts-inline .tm-pay-long { display:inline; }
  .tm-magic .tm-detail-facts-inline .tm-pay-short { display:none; }
}
@media (max-width:1023px) {
  .tm-magic .tm-toolbar { position:relative; flex-wrap:nowrap; }
  .tm-magic .tm-toolbar-actions { flex:1; flex-wrap:nowrap; justify-content:flex-end; }
  .tm-magic .tm-toolbar :is(.tm-search,.tm-filters,.tm-filter,.tm-clear-filters) { display:none; }
  .tm-magic .tm-mobile-search-open, .tm-magic .tm-mobile-search-close, .tm-magic .tm-mobile-filter-open { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; background:var(--tm-d-surface, white); color:var(--tm-d-muted, #6b7280); padding:0 10px; font-size:13px; }
  .tm-magic .tm-mobile-search-open, .tm-magic .tm-mobile-search-close { width:36px; padding:0; flex:none; }
  .tm-magic .tm-mobile-search-close { width:28px; height:28px; border:0; }
  .tm-magic .tm-mobile-filter-open.tm-filter-active, .tm-magic .tm-mobile-search-open.tm-filter-active { background:var(--tm-soft); color:var(--tm-brand); border-color:var(--tm-d-green-line, #cfe6c8); }
  .tm-magic .tm-filter-count { display:grid; place-items:center; min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:var(--tm-brand); color:var(--tm-d-on-brand, white); font-size:10px; }
  .tm-magic .tm-toolbar.tm-search-open .tm-search { display:flex; position:absolute; inset:8px 10px; width:auto; height:36px; z-index:3; }
  .tm-magic .tm-mobile-filter-open { position:relative; width:36px; padding:0; flex:none; }
  .tm-magic .tm-mobile-filter-open > span:not(.tm-filter-count) { display:none; }
  .tm-magic .tm-mobile-filter-open .tm-filter-count { position:absolute; right:-6px; top:-6px; box-shadow:0 0 0 2px #f7f7f5; }
  .tm-magic .tm-filter summary { padding:0 8px; font-size:12px; }
  .tm-magic .tm-detail-facts { display:none; }
  .tm-magic .team-settings-tab:not(.team-settings-tab-active) .team-settings-tab-text { display:none; }
  .tm-magic .team-settings-tab-active { flex:3; }
  .tm-magic .tm-pay-long { display:none; }
  .tm-magic .tm-pay-short { display:inline; }
}
@media (max-width:639px) {
  .tm-magic .team-settings-sidebar-tab > .tm-icon { display:none; }
}
@media (max-width:767px) {
  .tm-magic .tm-pay-structure .cm-pay-dropdown { grid-template-columns:repeat(2,1fr); }
  .tm-magic #addTechForm { grid-template-columns:1fr; }
  .tm-magic .team-add-member-form-grid { grid-template-columns:1fr; }
  .tm-magic .team-settings-header { padding:8px 10px 2px; }
  .tm-magic .team-settings-sidebar-tabs { padding:0 6px; }
  .tm-magic .team-settings-sidebar-tab { font-size:12px; padding:0 6px; gap:4px; }
  .tm-magic .team-settings-sidebar-tab > i { display:none; }
  .tm-magic .tm-toolbar { padding:8px 10px; gap:6px; }
  .tm-magic .tm-toolbar-actions { gap:6px; }
  .tm-magic .tm-search { width:160px; flex:1; }
  .tm-magic .tm-filters { flex-basis:100%; order:4; justify-content:flex-end; }
  .tm-magic .tm-primary, .tm-magic .team-settings-add-member-btn { padding:0 10px; }
  .tm-magic .tm-primary span, .tm-magic .team-settings-add-member-btn span { display:none; }
  .tm-magic .team-settings-members-list, .tm-magic .team-settings-group-list { padding:0 10px 8px; }
  .tm-magic .tm-grid { gap:8px; }
  .tm-magic .team-settings-form-content { padding:8px !important; }
  .tm-magic .team-settings-profile-header-left { padding:8px 10px !important; min-height:64px; }
  .tm-magic .team-settings-profile-name { font-size:15px !important; }
  .tm-magic .team-settings-tabs { padding:6px 8px; }
  .tm-magic .team-settings-tab { font-size:12px; padding:0 6px !important; }
  .tm-magic .team-settings-form-grid { grid-template-columns:1fr; }
  .tm-magic .tm-detail-footer { padding:8px 10px; }
  .tm-magic .tm-footer-note { font-size:11px; }
  .tm-magic .team-settings-cancel-btn, .tm-magic .team-settings-save-btn { padding:0 12px; font-size:12px; }
  .tm-magic .tm-group-table th, .tm-magic .tm-group-table td { padding:10px 8px; }
  .tm-magic .tm-group-table .tm-identity { min-width:0; gap:8px; }
  .tm-magic .tm-group-table .tm-identity strong, .tm-magic .tm-group-table .tm-identity small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media (prefers-reduced-motion:reduce) { .tm-magic *, .tm-magic *::before, .tm-magic *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
/* Services uses the same natural-height cards and responsive table as Magic. */
/* Schedule follows Magic's calendar, monthly summary and regular-hours cards. */
.tm-magic .team-settings-form-content:has(.tm-schedule-layout) { animation:none !important; transform:none !important; }
.tm-magic .tm-schedule-layout { display:grid; align-items:start; gap:10px; grid-template-columns:minmax(0,1fr); }
.tm-magic .tm-schedule-layout .sched-cal-wrap { min-width:0; height:auto; overflow:hidden; border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-d-surface, white); }
.tm-magic .tm-schedule-toolbar { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--tm-d-line, #f1f1ee); }
.tm-magic .tm-schedule-toolbar .tm-select { height:32px; padding:0 10px; }
.tm-magic .tm-schedule-month-field { width:128px; min-width:0; }
.tm-magic .tm-schedule-year-field { width:88px; flex:none; }
.tm-magic .tm-schedule-layout .sched-cal-weekdays { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); padding:6px 0; border-bottom:1px solid var(--tm-d-line, #f1f1ee); background:var(--tm-d-surface2, #fafaf9); text-align:center; font-size:12px; font-weight:600; line-height:16px; color:var(--tm-d-muted, #6b7280); }
.tm-magic .tm-schedule-layout .sched-cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; padding:8px; }
.tm-magic .tm-schedule-layout .sched-cal-cell { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px; min-width:0; min-height:84px; height:auto; margin:0; padding:6px; border:1px solid var(--tm-d-line, #eeeeeb); border-radius:8px; background:var(--tm-d-surface, white); text-align:left; overflow:hidden; }
.tm-magic .tm-schedule-layout button.sched-cal-cell:hover { background:var(--tm-d-surface2, #fafcf9); border-color:#a6cd9c; }
.tm-magic .tm-schedule-layout div.sched-cal-cell { cursor:default; }
.tm-magic .tm-schedule-layout .sched-cal-cell.is-outside { background:var(--tm-d-surface2, #f6f6f4); border-color:transparent; }
.tm-magic .tm-schedule-layout .sched-cal-cell.is-today { border-color:var(--tm-brand); box-shadow:0 0 0 1px var(--tm-brand); }
.tm-magic .tm-schedule-layout .sched-cal-cell-num { display:grid; place-items:center; align-self:flex-end; flex:none; min-width:24px; height:24px; padding:0 4px; border-radius:50%; font-size:12px; font-weight:600; line-height:16px; color:var(--tm-d-faint, #8a8f98); }
.tm-magic .tm-schedule-layout .is-future .sched-cal-cell-num { color:var(--tm-d-text, #1f2328); }
.tm-magic .tm-schedule-layout .is-outside .sched-cal-cell-num { color:#c4c8ce; }
.tm-magic .tm-schedule-layout .sched-cal-cell-num.today { background:var(--tm-brand); color:var(--tm-d-on-brand, white); }
.tm-magic .tm-schedule-layout .sched-cal-times { display:flex; flex:1; flex-direction:column; justify-content:center; gap:4px; min-width:0; margin-top:0; }
.tm-magic .tm-schedule-layout .is-outside .sched-cal-times { opacity:.4; }
.tm-magic .tm-schedule-mobile-mark { display:none; }
.tm-magic .tm-schedule-side { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; min-width:0; }
.tm-magic .tm-schedule-side-card { min-width:0; border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-d-surface, white); }
.tm-magic .tm-schedule-side-card > header { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--tm-d-line, #eef0ec); }
.tm-magic .tm-schedule-side-card > header > span { flex:none; width:3px; height:16px; border-radius:99px; background:var(--tm-brand); }
.tm-magic .tm-schedule-side-card h3 { margin:0; font-size:15px; line-height:20px; font-weight:700; color:var(--tm-dark); }
.tm-magic .tm-schedule-side-body { padding:10px 16px; }
.tm-magic .tm-schedule-legend, .tm-magic .tm-schedule-regular { list-style:none; padding:0; margin:0; }
.tm-magic .tm-schedule-legend { display:flex; flex-direction:column; gap:6px; }
.tm-magic .tm-schedule-legend li { display:flex; align-items:center; gap:10px; font-size:13px; line-height:20px; color:var(--tm-d-muted, #4b5563); }
.tm-magic .tm-schedule-legend-swatch { flex:none; width:12px; height:12px; border-radius:4px; }
.tm-magic .tm-schedule-legend strong { margin-left:auto; font-weight:600; color:var(--tm-d-text, #1f2328); font-variant-numeric:tabular-nums; }
.tm-magic .tm-schedule-help { display:flex; align-items:flex-start; gap:6px; margin:12px 0 0; padding-top:10px; border-top:1px solid var(--tm-d-line, #f1f1ee); font-size:12px; line-height:16px; color:var(--tm-d-faint, #8a8f98); }
.tm-magic .tm-schedule-help > i { flex:none; margin-top:2px; font-size:14px; }
.tm-magic .tm-schedule-regular li { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--tm-d-line, #f4f4f2); font-size:13px; line-height:20px; color:var(--tm-d-blue-text, #374151); }
.tm-magic .tm-schedule-regular li:last-child { border-bottom:0; }
.tm-magic .tm-schedule-regular li > span:first-child { font-weight:500; }
.tm-magic .tm-schedule-regular li > span:last-child { text-align:right; font-variant-numeric:tabular-nums; color:var(--tm-d-text, #1f2328); }
.tm-magic .tm-schedule-regular li > span > span { display:block; }
.tm-magic .tm-schedule-regular .tm-schedule-muted { color:var(--tm-d-faint, #9ca3af); }
.tm-magic .team-settings-sections[data-tab-content="schedule"] > .ws2 { height:auto; min-height:0; overflow:visible; background:transparent; }
.tm-magic .team-settings-sections[data-tab-content="schedule"] .ws2-content { position:relative; padding:0; overflow:visible; }
.tm-magic .tm-schedule-toolbar select { width:100%; }
.tm-magic .tm-schedule-toolbar .sched-cal-nav-btn { display:grid; flex:none; place-items:center; width:32px; height:32px; padding:0; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; background:var(--tm-d-surface, white); color:var(--tm-d-muted, #4b5563); }
.tm-magic .tm-schedule-toolbar svg { width:16px; height:16px; }
.tm-magic .tm-schedule-toolbar .sched-cal-today-btn { flex:none; height:32px; padding:0 12px; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; background:var(--tm-d-surface, white); font-size:12px; font-weight:600; color:var(--tm-d-muted, #4b5563); }
.tm-magic .tm-sc-total { margin:0 0 0 auto; font-size:12px; color:var(--tm-d-muted, #6b7280); white-space:nowrap; }
.tm-magic .tm-sc-total strong { font-weight:700; color:var(--tm-d-text, #1f2328); }
.tm-magic .tm-sc-legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin:0; padding:8px 12px; list-style:none; border-bottom:1px solid var(--tm-d-line, #f1f1ee); font-size:12px; line-height:16px; color:var(--tm-d-muted, #6b7280); }
.tm-magic .tm-sc-legend li { display:inline-flex; align-items:center; gap:6px; }
.tm-magic .tm-sc-mark { display:inline-grid; flex:none; place-items:center; width:12px; height:12px; border-radius:3px; font-size:11px; }
.tm-magic .tm-sc-mark--full { border:1px solid #cfe5c9; border-left:3px solid #3e9b3a; background:#eaf5e6; }
.tm-magic .tm-sc-mark--partial { border:1px solid #cfd8c9; background:var(--tm-d-surface, white); }
.tm-magic .tm-sc-mark--extra { color:#e58a00; }
.tm-magic .tm-sc-mark--timeOff { border:1px solid #f0a8a8; background:#fdecec; }
.tm-magic .tm-sc-mark--dayOff { color:var(--tm-d-muted, #6b7280); }
.tm-magic .tm-sc-mark--notScheduled { border:1px dashed #c4c8ce; }
.tm-magic .tm-sc-outside { display:inline-block; flex:none; width:6px; height:6px; border-radius:50%; background:#e58a00; }
.tm-magic .tm-sc-cell { position:relative; }
.tm-magic .tm-sc-cell > .tm-sc-outside { position:absolute; top:34px; right:12px; z-index:1; }
.tm-magic .tm-schedule-layout .sched-cal-cell.is-outside { opacity:.55; }
.tm-magic .tm-sc-shift { display:flex; align-items:center; justify-content:center; gap:4px; min-width:0; padding:3px 4px; overflow:hidden; border-radius:4px; font-size:12px; font-weight:600; line-height:16px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tm-magic .tm-sc-shift--full { border-left:3px solid #3e9b3a; background:#eaf5e6; color:#2f7322; }
.tm-magic .tm-sc-shift--partial { border:1px solid #cfd8c9; background:var(--tm-d-surface, white); color:#2f7322; }
.tm-magic .tm-sc-shift--extra { border-left:3px solid #e58a00; background:#fff4e6; color:#a86400; }
.tm-magic .tm-sc-cell .tm-sc-shift:only-child { flex:1; }
.tm-magic .tm-sc-more { font-size:11px; line-height:14px; text-align:center; color:var(--tm-d-faint, #8a8f98); }
.tm-magic .tm-sc-state { display:flex; flex:1; align-items:center; justify-content:center; gap:6px; min-height:44px; border-radius:6px; font-size:12px; font-weight:600; }
.tm-magic .tm-sc-state--notScheduled { border:1px dashed var(--tm-d-line, #dcdedf); background:var(--tm-d-surface2, #fafaf9); color:var(--tm-d-faint, #b0b4ba); }
.tm-magic .tm-sc-state--dayOff { background:var(--tm-d-surface2, #f4f5f4); color:var(--tm-d-muted, #6b7280); }
.tm-magic .tm-sc-state--timeOff { border:1px solid #f0a8a8; background:#fdecec; color:#c23a3f; }
.tm-magic .tm-sc-month-label { margin:0; font-size:12px; line-height:16px; color:var(--tm-d-muted, #6b7280); }
.tm-magic .tm-sc-month-total { margin:0 0 8px; font-size:22px; line-height:28px; font-weight:700; color:var(--tm-d-text, #1f2328); }
.tm-magic .tm-schedule-side-card > header .tm-sc-edit { display:inline-flex; align-items:center; gap:4px; margin-left:auto; padding:0; border:0; background:transparent; font-size:12px; font-weight:600; color:var(--tm-brand); }
html[data-pos-appearance="dark"] .tm-magic .tm-sc-shift--full, html[data-pos-appearance="dark"] .tm-magic .tm-sc-mark--full { background:#3e9b3a29; color:#8fd488; }
html[data-pos-appearance="dark"] .tm-magic .tm-sc-shift--partial { border-color:#3e9b3a66; color:#8fd488; }
html[data-pos-appearance="dark"] .tm-magic .tm-sc-mark--partial { border-color:#3e9b3a66; }
html[data-pos-appearance="dark"] .tm-magic .tm-sc-shift--extra { background:#e58a0029; color:#f5b45a; }
html[data-pos-appearance="dark"] .tm-magic .tm-sc-state--timeOff, html[data-pos-appearance="dark"] .tm-magic .tm-sc-mark--timeOff { border-color:#e5484d66; background:#e5484d29; color:#f19a9d; }
html[data-pos-appearance="dark"] .tm-magic .tm-schedule-regular li { color:var(--tm-d-muted, #6b7280); }
.tm-magic .ws2-cell-menu .ws2-cell-person .ws2-avatar { display:none; }
.ws2-cell-menu .ws2-cell-actions .ws2-btn { width:100%; }
.ws2-cell-menu .ws2-cell-actions .ws2-action-tag { margin-left:auto; font-size:10px; font-weight:600; letter-spacing:.04em; color:var(--pos-muted, #8a8f98); }
.ws2-cell-menu .ws2-hint .ws2-icon { width:14px; height:14px; margin-right:6px; vertical-align:-2px; }
.tm-magic .tm-schedule-retry { width:auto; height:36px; margin-top:12px; padding:0 16px; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; background:var(--tm-d-surface, white); color:var(--tm-d-blue-text, #374151); font-size:13px; }
@media (min-width:640px) and (max-width:1279px) {
  .tm-magic .tm-schedule-side { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1280px) {
  .tm-magic .tm-schedule-layout { grid-template-columns:minmax(0,1fr) 280px; }
}
@media (max-width:767px) {
  .tm-magic .tm-schedule-layout .sched-cal-cell { min-height:64px; }
  .tm-magic .tm-schedule-mobile-mark { display:block; width:100%; height:6px; flex:none; border-radius:999px; }
  .tm-magic .sched-cal-times { display:none !important; }
  .tm-magic .tm-sc-cell > .tm-sc-outside { top:6px; right:auto; left:6px; }
  .tm-magic .tm-schedule-mobile-mark--full { background:#3e9b3a; }
  .tm-magic .tm-schedule-mobile-mark--partial { background:#a6cd9c; }
  .tm-magic .tm-schedule-mobile-mark--extra { background:#e58a00; }
  .tm-magic .tm-schedule-mobile-mark--timeOff { background:#e5484d; }
  .tm-magic .tm-schedule-mobile-mark--dayOff { background:#8a8f98; }
  .tm-magic .tm-schedule-mobile-mark--notScheduled { background:#dcdedf; }
}
@media (max-width:639px) {
  .tm-magic .tm-schedule-toolbar { flex-wrap:wrap; padding:8px; gap:6px; }
  .tm-magic .tm-sc-total { flex-basis:100%; margin:0; }
  .tm-magic .tm-schedule-month-field { flex:1; width:0; min-width:96px; }
  .tm-magic .tm-schedule-year-field { width:76px; }
  .tm-magic .tm-schedule-toolbar .tm-select { gap:2px; padding:0 6px; }
  .tm-magic .tm-schedule-layout .sched-cal-grid { gap:4px; padding:6px; }
}
.tm-magic .team-settings-form-content-services { animation:none !important; transform:none !important; }
.tm-magic .team-settings-sections-services-active { display:block; height:auto; min-height:0; }
.tm-magic .tm-services-panel { display:flex; flex-direction:column; gap:10px; height:auto; min-height:0; background:transparent; border:0; }
.tm-magic .services2-allow-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-d-surface, white); }
.tm-magic .services2-allow-item { position:relative; display:flex; align-items:center; gap:12px; padding:10px 14px; margin:0; border-right:1px solid var(--tm-d-line, #f1f1ee); cursor:pointer; }
.tm-magic .services2-allow-item:last-child { border-right:0; }
.tm-magic .services2-allow-icon { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:8px; font-size:18px; color:var(--service-accent); background:color-mix(in srgb,var(--service-accent) 10%,var(--tm-d-surface, white)); }
.tm-magic .services2-allow-item:has(input:not(:checked)) .services2-allow-icon { background:var(--tm-d-surface2, #f1f2f0); color:var(--tm-d-faint, #a1a7b0); }
.tm-magic .services2-allow-copy { flex:1; min-width:0; }
.tm-magic .services2-allow-copy strong { display:block; font-size:13px; font-weight:600; line-height:20px; color:var(--tm-d-text, #1f2328); }
.tm-magic .services2-allow-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:16px; color:var(--tm-d-faint, #8a8f98); }
.tm-magic .services2-allow-checkbox { position:absolute; right:14px; width:44px; height:24px; margin:0; visibility:visible; opacity:0; cursor:pointer; }
.tm-magic .services2-allow-dot { flex:none; width:44px; height:24px; padding:2px; border-radius:999px; background:var(--tm-d-line, #d1d5db); pointer-events:none; }
.tm-magic .services2-allow-dot::after { content:''; display:block; width:20px; height:20px; border-radius:50%; background:var(--tm-d-surface, white); transition:transform .15s; }
.tm-magic .services2-allow-checkbox:checked + .services2-allow-dot { background:var(--tm-brand); }
.tm-magic .services2-allow-checkbox:checked + .services2-allow-dot::after { transform:translateX(20px); }
.tm-magic .services2-allow-checkbox:focus-visible + .services2-allow-dot { outline:2px solid var(--tm-brand); outline-offset:3px; }
.tm-magic .services2-allow-item.disabled { opacity:.45; cursor:default; }
.tm-magic .services2-body { display:grid; grid-template-columns:252px minmax(0,1fr); overflow:hidden; border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-d-surface, white); }
.tm-magic .services2-sidebar { min-width:0; padding:8px; border-right:1px solid var(--tm-d-line, #f1f1ee); }
.tm-magic .services2-sidebar-title { padding:4px 10px 6px; color:var(--tm-d-faint, #8a8f98); font-size:12px; font-weight:600; line-height:16px; }
.tm-magic .services2-category-item { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; height:36px; margin:0 0 2px; padding:8px 10px; border:0; border-radius:8px; background:transparent; text-align:left; font-size:13px; color:var(--tm-d-blue-text, #374151); }
.tm-magic .services2-category-item:hover { background:var(--tm-d-surface2, #f7f7f5); }
.tm-magic .services2-category-item.active { background:var(--tm-soft); color:var(--tm-brand); }
.tm-magic .services2-category-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.tm-magic .services2-category-item.active .services2-category-name { font-weight:600; }
.tm-magic .services2-category-count { flex:none; padding:2px 6px; border-radius:999px; background:var(--tm-d-surface2, #f1f2f0); font-size:11px; line-height:16px; color:var(--tm-d-muted, #6b7280); font-weight:600; }
.tm-magic .services2-category-item.active .services2-category-count { background:var(--tm-d-surface, white); color:var(--tm-brand); }
.tm-magic .services2-content { min-width:0; }
.tm-magic .services2-toolbar { position:relative; display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--tm-d-line, #f1f1ee); }
.tm-magic .services2-category-mobile { display:none; }
.tm-magic .services2-search-area { flex:1; min-width:180px; max-width:280px; }
.tm-magic .services2-search-wrap { position:relative; display:block; margin:0; min-width:0; }
.tm-magic .services2-search-wrap > i { position:absolute; z-index:1; left:12px; top:50%; transform:translateY(-50%); font-size:16px; color:var(--tm-d-faint, #9ca3af); pointer-events:none; }
.tm-magic .services2-search { width:100%; height:36px; padding:0 12px 0 36px; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; font-family:inherit; font-size:13px; outline:none; background:var(--tm-d-surface, white); }
.tm-magic .services2-search::placeholder { color:var(--tm-d-faint, #a1a1aa); }
.tm-magic .services2-search:focus { border-color:var(--tm-brand); box-shadow:0 0 0 2px #3e9b3a26; }
.tm-magic .services2-search-open, .tm-magic .services2-search-close { display:none; }
.tm-magic .services2-select-all { display:flex; flex:none; align-items:center; gap:8px; margin:0 0 0 auto; cursor:pointer; font-size:13px; font-weight:500; color:var(--tm-d-blue-text, #374151); }
.tm-magic .services2-select-all-checkbox { flex:none; width:16px; height:16px; margin:0; visibility:visible; accent-color:var(--tm-brand); }
.tm-magic .services2-select-all-count { font-size:12px; font-weight:400; color:var(--tm-d-faint, #8a8f98); }
.tm-magic .services2-column-headings { display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:12px; padding:6px 12px; background:var(--tm-d-surface2, #fafaf9); font-size:11px; font-weight:600; line-height:16px; color:var(--tm-d-faint, #8a8f98); }
.tm-magic .services2-second-heading { display:none; }
.tm-magic .services2-list { display:grid; grid-template-columns:minmax(0,1fr); }
.tm-magic .services2-service-row { display:grid; grid-template-columns:minmax(0,1fr) 170px; align-items:center; gap:12px; min-height:45px; padding:6px 12px; border:0; border-bottom:1px solid var(--tm-d-line, #f4f4f2); background:transparent; }
.tm-magic .services2-service-main { display:flex; align-items:center; min-width:0; gap:12px; margin:0; cursor:pointer; }
.tm-magic .services2-service-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; line-height:20px; font-weight:500; color:var(--tm-d-text, #1f2328); }
.tm-magic .services2-service-main:has(input:not(:checked)) .services2-service-name { color:var(--tm-d-faint, #9ca3af); font-weight:400; }
.tm-magic .services2-service-check-wrap { position:relative; flex:none; width:16px; height:16px; }
.tm-magic .services2-service-check-wrap input { position:absolute; inset:0; width:16px; height:16px; margin:0; visibility:visible; opacity:0; cursor:pointer; }
.tm-magic .services2-service-check { display:block; width:16px; height:16px; border:1px solid #767676; border-radius:2px; pointer-events:none; }
.tm-magic .services2-service-check-wrap input:checked + .services2-service-check { background:var(--tm-brand); border-color:var(--tm-brand); }
.tm-magic .services2-service-check-wrap input:checked + .services2-service-check::after { content:''; display:block; width:5px; height:9px; margin:1px 0 0 5px; border:solid var(--tm-d-surface, white); border-width:0 2px 2px 0; transform:rotate(45deg); }
.tm-magic .services2-service-check-wrap input:focus-visible + .services2-service-check { outline:2px solid var(--tm-brand); outline-offset:3px; }
.tm-magic .services2-duration-wrap { min-width:0; }
.tm-magic .services2-duration-trigger { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; height:32px; padding:0 10px; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; background:var(--tm-d-surface, white); font-size:13px; font-weight:400; color:var(--tm-d-blue-text, #374151); }
.tm-magic .services2-duration-trigger:disabled { background:var(--tm-d-surface2, #f8f8f6); border-color:var(--tm-d-line, #f0f0ed); color:var(--tm-d-faint, #b0b5bd); opacity:1; cursor:default; }
.tm-magic .services2-duration-chevron { flex:none; width:16px; height:16px; color:var(--tm-d-faint, #9ca3af); }
.tm-magic .services2-duration-menu { position:fixed; z-index:2000; min-width:170px; padding:4px; border:1px solid var(--tm-d-line, #e7e7e4); border-radius:8px; background:var(--tm-d-surface, white); box-shadow:0 10px 24px #0000001a; max-height:calc(100vh - 16px); overflow:auto; }
.tm-magic .services2-duration-menu.display-hide, .tm-magic .services2-custom-duration-box.display-hide { display:none !important; }
.tm-magic .services2-duration-option { display:block; width:100%; height:32px; padding:6px 10px; border:0; border-radius:6px; background:var(--tm-d-surface, white); text-align:left; font-size:13px; font-weight:400; color:var(--tm-d-blue-text, #374151); }
.tm-magic .services2-duration-option:hover { background:var(--tm-d-surface2, #f7f7f5); }
.tm-magic .services2-duration-option.active { background:var(--tm-soft); color:var(--tm-brand); }
.tm-magic .services2-custom-duration-box { display:flex; gap:6px; padding:6px 2px 2px; }
.tm-magic .services2-custom-duration-input { flex:1; min-width:0; width:0; height:32px; padding:0 8px; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:6px; font-size:12px; }
.tm-magic .services2-custom-duration-save { flex:none; height:32px; padding:0 10px; border:0; border-radius:6px; background:var(--tm-brand); color:var(--tm-d-on-brand, white); font-size:12px; }
.tm-magic .services2-duration-inline { display:none; align-items:center; gap:4px; }
.tm-magic .services2-duration-wrap.is-inline .services2-duration-inline { display:flex; }
.tm-magic .services2-duration-wrap.is-inline .services2-duration-trigger { display:none; }
.tm-magic .services2-duration-field { display:flex; flex:1; min-width:0; height:32px; overflow:hidden; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; background:var(--tm-d-surface, white); }
.tm-magic .services2-duration-field:focus-within { border-color:var(--tm-brand); box-shadow:0 0 0 2px var(--tm-soft); }
.tm-magic .services2-duration-field:has(.is-invalid) { border-color:#e5484d; box-shadow:0 0 0 2px #e5484d26; }
.tm-magic .services2-duration-inline-input { flex:1; min-width:0; width:0; padding:0 8px; border:0; outline:0; background:transparent; font-size:12px; font-weight:500; color:var(--tm-d-blue-text, #1f2328); }
.tm-magic .services2-duration-unit { display:grid; place-items:center; padding:0 8px; border-left:1px solid var(--tm-d-line, #ededea); background:var(--tm-d-surface2, #f7f7f5); font-size:11px; color:var(--tm-d-faint, #6b7280); }
.tm-magic .services2-duration-back { display:grid; flex:none; place-items:center; width:24px; height:32px; padding:0; border:0; background:transparent; color:var(--tm-d-faint, #9ca3af); }
.tm-magic .services2-duration-back:hover { color:#4b5563; }
.tm-magic .services2-hidden { display:none !important; }
.tm-magic .services2-results-empty { padding:48px 12px; text-align:center; font-size:13px; color:var(--tm-d-faint, #9ca3af); }
@media (min-width:1280px) {
  .tm-magic .services2-column-headings { grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr) 170px; }
  .tm-magic .services2-second-heading { display:block; }
  .tm-magic .services2-list { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; }
}
@media (max-width:1023px) {
  .tm-magic .services2-search-area { display:none; }
  .tm-magic .services2-search-open, .tm-magic .services2-search-close { flex:none; display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; color:var(--tm-d-muted, #4b5563); background:var(--tm-d-surface, white); }
  .tm-magic .services2-search-close { border:0; }
  .tm-magic .services2-toolbar.is-search-open .services2-search-area { position:absolute; inset:0; z-index:10; display:flex; align-items:center; gap:8px; max-width:none; min-width:0; padding:0 10px; background:var(--tm-d-surface, white); }
  .tm-magic .services2-toolbar.is-search-open .services2-search-wrap { flex:1; }
  .tm-magic .services2-toolbar:has(.services2-search:not(:placeholder-shown)) .services2-search-open { border-color:var(--tm-d-green-line, #cfe6c8); background:var(--tm-soft); color:var(--tm-brand); }
}
@media (max-width:767px) {
  .tm-magic .services2-allow-row { grid-template-columns:minmax(0,1fr); }
  .tm-magic .services2-allow-item { padding:8px 12px; border-right:0; border-bottom:1px solid var(--tm-d-line, #f1f1ee); }
  .tm-magic .services2-allow-item:last-child { border-bottom:0; }
  .tm-magic .services2-allow-icon { width:32px; height:32px; font-size:16px; }
  .tm-magic .services2-allow-copy small { display:none; }
  .tm-magic .services2-body { grid-template-columns:minmax(0,1fr); }
  .tm-magic .services2-sidebar { display:none; }
  .tm-magic .services2-toolbar { padding:8px 10px; }
  .tm-magic .services2-category-mobile { display:block; flex:1; min-width:0; width:0; height:36px; padding:0 10px; border:1px solid var(--tm-d-line, #e2e4e8); border-radius:8px; background:var(--tm-d-surface, white); color:var(--tm-d-blue-text, #374151); font-size:13px; }
}
@media (max-width:639px) {
  .tm-magic .services2-select-all-label { display:none; }
  .tm-magic .services2-column-headings, .tm-magic .services2-service-row { grid-template-columns:minmax(0,1fr) 140px; gap:8px; padding-left:10px; padding-right:10px; }
}
@media (max-width:639px) {
  .tm-magic .tm-profile-identity-form { flex-direction:column; }
  .tm-magic .tm-profile-avatar-edit { align-self:center; }
  .tm-magic .tm-profile-identity-form > .team-settings-form-grid { width:100%; }
  .tm-magic .tm-profile-column .team-settings-form-grid, .tm-magic .tm-profile-roles { grid-template-columns:minmax(0,1fr); }
}
.tm-magic .team-settings-date-wrapper .team-settings-date-display { padding-left:36px; cursor:pointer; }
/* Date picker popover (Magic Salon Map DatePicker): anchored under the field, Sunday-first. */
.tm-magic .team-date-popover { position:fixed; z-index:9600; width:272px; padding:10px; border:1px solid var(--tm-d-line, #e7e7e4); border-radius:12px; background:var(--tm-d-surface, #ffffff); box-shadow:0 12px 32px rgba(0, 0, 0, 0.12); animation:tm-select-in .14s cubic-bezier(.23, 1, .32, 1); }
.tm-magic .team-date-popover-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.tm-magic .team-date-popover-title { font-size:13px; font-weight:600; color:var(--tm-d-text, #1f2328); }
.tm-magic .team-date-popover-nav { display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--tm-d-muted, #4b5563); cursor:pointer; }
.tm-magic .team-date-popover-nav:hover { background:var(--tm-d-surface2, #f4f5f4); }
.tm-magic .team-date-popover-weekdays, .tm-magic .team-date-popover-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); text-align:center; }
.tm-magic .team-date-popover-weekdays { font-size:11px; font-weight:600; color:var(--tm-d-muted, #8a8f98); }
.tm-magic .team-date-popover-weekdays span { padding:4px 0; }
.tm-magic .team-date-popover-grid { gap:2px; }
.tm-magic .team-date-popover-cell { display:grid; place-items:center; height:32px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--tm-d-text, #1f2328); font-size:12px; cursor:pointer; transition:background-color .1s; }
.tm-magic .team-date-popover-cell:hover:not(:disabled) { background:var(--tm-soft); }
.tm-magic .team-date-popover-cell.is-out { color:#b0b4ba; }
.tm-magic .team-date-popover-cell.is-selected { background:var(--tm-brand); color:#ffffff; font-weight:600; }
.tm-magic .team-date-popover-cell:disabled { color:#d1d5db; cursor:not-allowed; }

/* team.css reserved 300px under these tabs for the old layout; the detail footer already sits outside the scroller. */
.tm-magic .team-settings-sections[data-tab-content="profile"],
.tm-magic .team-settings-sections[data-tab-content="commission"].team-settings-sections-commission-active,
.tm-magic .team-settings-sections[data-tab-content="permissions"].team-settings-sections-permissions-active,
.tm-magic .team-settings-sections[data-tab-content="permissions"].team-settings-sections-permissions-active .permissions-quick-grid { padding-bottom:0; }

/* Activity Log */
.tm-magic .tm-activity-header { align-items:center; justify-content:space-between; }
.tm-magic .tm-activity-title { display:flex; align-items:flex-start; gap:10px; min-width:0; }
.tm-magic .tm-activity-title::before { content:''; flex:none; width:3px; height:16px; margin-top:3px; border-radius:3px; background:var(--tm-brand); }
.tm-magic .tm-activity-filter-field { flex:none; width:170px; }
.tm-magic .tm-activity-content { padding:4px 16px; }
.tm-magic .tm-activity-empty { display:flex; flex-direction:column; align-items:center; padding:40px 0; text-align:center; }
.tm-magic .tm-activity-empty > span { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--tm-d-surface2, #f1f2f0); color:var(--tm-d-faint, #9ca3af); font-size:18px; }
.tm-magic .tm-activity-empty strong { margin-top:8px; font-size:13px; font-weight:500; color:var(--tm-d-text, #374151); }
.tm-magic .tm-activity-empty p { margin:0; font-size:12px; color:var(--tm-muted); }
.tm-magic .tm-activity-loading { padding:40px 16px; text-align:center; color:var(--tm-muted); font-size:13px; }
.tm-magic .tm-activity-list { margin:0; padding:0; list-style:none; }
.tm-magic .tm-activity-row { display:grid; grid-template-columns:96px auto minmax(0,1fr); column-gap:12px; padding:10px 0; border-top:1px solid var(--tm-d-line, #f1f1ee); }
.tm-magic .tm-activity-row:first-child { border-top:0; }
.tm-magic .tm-activity-row time { padding-top:2px; font-size:12px; color:var(--tm-muted); }
.tm-magic .tm-activity-row time strong { display:block; font-weight:600; color:var(--tm-d-text, #374151); }
.tm-magic .tm-activity-row time span { display:block; }
.tm-magic .tm-activity-avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--tm-d-surface2, #f1f2f0); color:var(--tm-d-text, #4b5563); font-size:11px; font-weight:600; }
.tm-magic .tm-activity-body { min-width:0; }
.tm-magic .tm-activity-line { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0; font-size:13px; line-height:20px; color:var(--tm-d-text, #374151); }
.tm-magic .tm-activity-line strong { font-weight:600; color:var(--tm-ink); }
.tm-magic .tm-activity-section { padding:2px 8px; border-radius:999px; font-size:11px; font-weight:500; line-height:16px; }
.tm-magic .tm-activity-values { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 0; font-size:12px; line-height:18px; overflow-wrap:anywhere; }
.tm-magic .tm-activity-values i { font-size:12px; color:var(--tm-d-faint, #b0b4ba); }
.tm-magic .tm-activity-from { padding:2px 6px; border-radius:4px; background:var(--tm-d-line, #f4f5f4); color:var(--tm-muted); text-decoration:line-through; }
.tm-magic .tm-activity-to { padding:2px 6px; border-radius:4px; background:var(--tm-soft); color:var(--tm-brand); font-weight:500; }
.tm-magic .tm-activity-more { margin:10px 0; padding:0; border:0; background:none; color:var(--tm-brand); font-size:12px; font-weight:600; }
.tm-magic .tm-activity-more:hover { text-decoration:underline; }
@media (max-width:640px) {
  .tm-magic .tm-activity-content { padding:4px 12px; }
  .tm-magic .tm-activity-row { grid-template-columns:auto minmax(0,1fr); }
  .tm-magic .tm-activity-row time { grid-column:1 / -1; display:flex; gap:6px; margin-bottom:4px; padding-top:0; }
}