/* Exact styles from user-supplied Horizon BuilderKit clone. */
.horizon {
  --hz-bg: oklch(0.9824 0.003 277.7);
  --hz-surface: #fff;
  --hz-text: oklch(0.2413 0.0099 277.7);
  --hz-muted: oklch(0.09492 0.0438 257.5 / 0.616);
  --hz-faint: oklch(0.1149 0.0528 264.9 / 0.495);
  --hz-card: oklch(0.1555 0.1022 265.8 / 0.059);
  --hz-border: oklch(0.1877 0.0881 263 / 0.095);
  --hz-shadow: oklch(0.1744 0.0872 261.4 / 0.122);
  background: var(--hz-bg); color: var(--hz-text); font-family: var(--font-inter), Inter, sans-serif;
  font-size: 13px; line-height: 20px; font-weight: 450; min-height: 100vh;
}
.horizon[data-theme="dark"] { --hz-bg: #18191b; --hz-surface: #202124; --hz-text: #eeeef0; --hz-muted: #aaaab4; --hz-faint: #85858f; --hz-card: #ffffff0e; --hz-border: #ffffff20; --hz-shadow: #0005; }
.horizon * { box-sizing: border-box; }
.horizon button, .horizon a, .horizon select { -webkit-tap-highlight-color: transparent; }
.horizon button:not(:disabled), .horizon select { cursor: pointer; }
.horizon button:focus-visible, .horizon a:focus-visible, .horizon select:focus-visible, .horizon input:focus-visible { outline: 2px solid #4664ff; outline-offset: 2px; }
.hz-icon { width: 16px; height: 16px; flex-shrink: 0; }
.hz-muted { color: var(--hz-muted); }
.hz-sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; width: 256px; background: var(--hz-bg); transform: translateX(-100%); transition: transform .4s cubic-bezier(.25,.8,.25,1); overflow-y: auto; scrollbar-width: none; }
.hz-sidebar.open { transform: translateX(0); }
.hz-sidebar-inner { min-height: 100%; display: flex; flex-direction: column; }
.hz-sidebar-head { padding: 24px 22px 8px; display: flex; flex-direction: column; gap: 20px; }
.hz-logo-row { height: 37px; display: flex; justify-content: space-between; align-items: center; }
.hz-logo { width: 112px; height: auto; }
.hz-logo-dark { display: none; }
[data-theme="dark"] .hz-logo-light { display: none; }
[data-theme="dark"] .hz-logo-dark { display: block; }
.hz-icon-button { width: 24px; height: 24px; border: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--hz-muted); }
.hz-icon-button:hover { background: var(--hz-card); }
.hz-icon-button .hz-icon { width: 14px; height: 14px; }
.hz-search-trigger { height: 32px; padding: 0 8px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--hz-border); border-radius: 6px; background: var(--hz-surface); color: var(--hz-faint); font-size: 12px; text-align: left; }
.hz-search-trigger span { flex: 1; }
.horizon kbd { font-family: inherit; font-size: 11px; line-height: 18px; padding: 0 4px; border: 1px solid var(--hz-border); border-radius: 3px; color: var(--hz-muted); background: var(--hz-bg); white-space: nowrap; }
.hz-sidebar-body { padding: 8px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.hz-sidebar-body > nav:first-child { padding-top: 4px; }
.hz-sidebar-body > nav:nth-of-type(2) { margin-top: 16px; }
.hz-nav-group { padding: 0 8px; display: flex; flex-direction: column; gap: 4px; }
.hz-nav-row { position: relative; height: 32px; padding: 0 6px; display: flex; align-items: center; gap: 4px; border-radius: 6px; text-decoration: none; color: inherit; white-space: nowrap; }
.hz-nav-row:hover, .hz-nav-row.active { background: var(--hz-card); }
.hz-nav-row>.hz-icon { width: 20px; height: 20px; padding: 2px; color: var(--hz-muted); }
.hz-nav-label { flex: 1; padding: 0 2px; text-align: left; }
.hz-count { background: var(--hz-card); border-radius: 4px; padding: 0 4px; font-size: 12px; line-height: 20px; font-weight: 550; }
.hz-project-toggle { color: var(--hz-muted); font-size: 12px; font-weight: 550; margin-bottom: 4px; width: 100%; }
.hz-project-toggle .hz-icon { margin-left: auto; transition: transform .2s; }
.hz-project-toggle.collapsed .hz-icon { transform: rotate(-90deg); }
.hz-dot-box { width: 20px; display: flex; align-items: center; justify-content: center; }
.hz-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.hz-pink { background: #e93d82; } .hz-teal { background: #29a383; } .hz-cyan { background: #7ce2fe; } .hz-purple { background: #8e4ec6; } .hz-amber { background: #ffc53d; }
.hz-promo { margin: 0 14px; padding: 20px; min-height: 190px; background: var(--hz-border); border: 1px solid var(--hz-border); border-radius: 8px; position: relative; overflow: hidden; }
.hz-promo strong { display: block; font-weight: 650; }
.hz-promo p { margin: 8px 0 16px; color: var(--hz-muted); }
.hz-promo a { font-size: 12px; font-weight: 550; }
.hz-promo>.hz-icon { position: absolute; width: 64px; height: 64px; right: 12px; bottom: -8px; opacity: .07; }
.hz-user { padding: 16px; display: none; }
.hz-user-button { width: 100%; display: flex; align-items: center; text-align: left; gap: 12px; padding: 4px 6px; border-radius: 6px; }
.hz-user-button:hover { background: var(--hz-card); }
.hz-avatar { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; }
.hz-user-button .hz-avatar { filter: grayscale(1); }
.hz-user-copy { flex: 1; min-width: 0; line-height: 18px; }
.hz-user-copy strong { display: block; font-weight: 650; }
.hz-user-copy small { display: block; font-size: 12px; }
.hz-panel { background: var(--hz-surface); min-height: 100vh; }
.hz-mobile-bar { height: 56px; padding: 12px 20px 12px 16px; display: flex; align-items: center; gap: 8px; }
.hz-mobile-bar>:first-child { margin-right: auto; }
.hz-mobile-bar .hz-avatar { width: 24px; height: 24px; }
.hz-content { max-width: 1280px; margin: 0 auto; padding: 8px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.hz-overview { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hz-heading-copy { min-width: 0; max-width: calc(100% - 132px); }
.hz-heading-copy h1 { margin: 0; font-size: 20px; line-height: 24px; letter-spacing: -.6px; font-weight: 650; }
.hz-heading-copy p { margin: 2px 0 0; color: var(--hz-muted); font-size: 13px; line-height: 20px; }
.hz-actions { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.hz-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 3px 9px; height: 28px; border: 1px solid var(--hz-border); border-radius: 8px; box-shadow: 0 1px 2px var(--hz-shadow); background: var(--hz-surface); font-weight: 550; white-space: nowrap; }
.hz-button:hover { background: var(--hz-bg); }
.hz-button .hz-icon { width: 14px; height: 14px; color: var(--hz-muted); }
.hz-action-label { display: none; }
.hz-actions .hz-button { padding: 6px; }
.hz-metrics { container-type: inline-size; }
.hz-metrics-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@container (min-width:448px) { .hz-metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@container (min-width:896px) { .hz-metrics-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
.hz-card { padding: 4px; border-radius: 12px; background: var(--hz-card); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hz-card-heading { display: flex; align-items: center; gap: 8px; height: 40px; padding: 8px 12px; flex-shrink: 0; font-size: 13px; line-height: 20px; font-weight: 550; }
.hz-card-heading>.hz-icon { color: var(--hz-muted); }
.hz-card-heading .hz-menu-wrap { margin-left: auto; }
.hz-card-inner { border: 1px solid var(--hz-border); border-radius: 8px; background: var(--hz-surface); box-shadow: 0 1px 3px var(--hz-shadow),0 1px 2px -1px var(--hz-shadow); min-width: 0; }
.hz-metric .hz-card-heading { height: 36px; }
.hz-metric .hz-card-inner { padding: 16px; height: 90px; }
.hz-metric-value { font-size: 24px; line-height: 32px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hz-change { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; line-height: 16px; font-weight: 550; color: var(--hz-muted); white-space: nowrap; }
.hz-change .hz-icon { color: #008f62; }
.hz-change.negative .hz-icon { color: #e5484d; }
.hz-sales { height: 367px; }
.hz-sales .hz-card-inner { height: 316px; padding: 16px 0 4px; overflow: hidden; }
.hz-sales-summary { padding: 8px 16px 0 24px; height: 70px; }
.hz-sales-total { font-size: 30px; line-height: 36px; font-weight: 650; }
.hz-chart { height: 224px; position: relative; }
.hz-plot { display: block; width: calc(100% - 16px); height: 161px; margin-top: 30px; overflow: visible; }
.hz-chart-grid { stroke: var(--hz-border); stroke-width: 1; }
.hz-chart-labels { display: flex; justify-content: space-between; color: var(--hz-muted); font-size: 12px; line-height: 16px; margin-right: 16px; padding: 10px 0 0 5.7%; }
.hz-chart-labels span { display: none; }
.hz-chart-labels span:nth-child(3n) { display: block; }
.hz-tooltip { position: absolute; top: 12px; right: 16px; padding: 8px 12px; border: 1px solid var(--hz-border); background: var(--hz-surface); border-radius: 6px; box-shadow: 0 3px 12px var(--hz-shadow); font-size: 12px; pointer-events: none; z-index: 3; }
.hz-tooltip strong { display: block; }
.hz-table-scroll { overflow-x: auto; border-radius: 8px 8px 0 0; }
.hz-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
.hz-table th { height: 40px; padding: 0 12px; color: var(--hz-faint); font-size: 12px; line-height: 16px; font-weight: 550; box-shadow: inset 0 -1px var(--hz-border); }
.hz-table th button { display: flex; align-items: center; gap: 4px; }
.hz-table td { height: 48px; padding: 0 12px; box-shadow: inset 0 -1px var(--hz-card); }
.hz-table tbody tr:hover { background: var(--hz-card); }
.hz-badge { display: inline-flex; font-size: 12px; font-weight: 550; line-height: 16px; padding: 2px 6px; border: 1px solid var(--hz-border); border-radius: 5px; }
.hz-badge-paid { background: #c2e5ff; }
.hz-badge-fulfilled { background: #c4e8d1; }
.hz-badge-cancelled { background: #dfe0e5; }
[data-theme="dark"] .hz-badge { color: #202124; }
.hz-pagination { min-height: 55px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
.hz-page-size { display: flex; align-items: center; gap: 8px; }
.hz-page-size select { border: 1px solid var(--hz-border); border-radius: 8px; background: var(--hz-surface); width: 84px; height: 32px; padding: 0 10px; box-shadow: 0 1px 2px var(--hz-shadow); }
.hz-page-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hz-page-controls span { margin-right: 8px; }
.hz-page-controls button:disabled { opacity: .35; }
.hz-menu-wrap { position: relative; }
.hz-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 160px; padding: 4px; background: var(--hz-surface); border: 1px solid var(--hz-border); border-radius: 8px; box-shadow: 0 4px 16px var(--hz-shadow); z-index: 50; }
.hz-menu-up { top: auto; bottom: calc(100% + 4px); }
.hz-menu-left { left: 0; right: auto; }
.hz-menu-item { display: flex; width: 100%; align-items: center; gap: 8px; padding: 6px 8px; min-height: 32px; border-radius: 4px; white-space: nowrap; text-align: left; }
.hz-menu-item:hover, .hz-menu-item:focus-visible { background: var(--hz-card); }
.hz-menu hr { border-color: var(--hz-border); margin: 4px -4px; }
.hz-backdrop { position: fixed; inset: 0; background: #0006; z-index: 35; }
.hz-dialog-backdrop { position: fixed; inset: 0; background: #0006; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: min(15vh,120px) 16px 24px; }
.hz-command { width: 512px; max-width: 100%; background: var(--hz-surface); border-radius: 12px; box-shadow: 0 16px 64px #0003; overflow: hidden; }
.hz-command-search { display: flex; align-items: center; gap: 12px; padding: 16px; }
.hz-command-search input { outline: none; background: transparent; width: 100%; font-size: 14px; }
.hz-command-tabs { padding: 0 16px 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.hz-command-tabs button { padding: 2px 8px; border-radius: 5px; border: 1px solid var(--hz-border); font-size: 12px; }
.hz-command-tabs button.active { background: var(--hz-card); }
.hz-command-results { max-height: 430px; overflow-y: auto; padding: 0 8px 8px; }
.hz-command-results h3 { font-size: 10px; line-height: 16px; font-weight: 650; color: var(--hz-muted); padding: 8px; letter-spacing: .5px; }
.hz-command-option { height: 36px; width: 100%; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 8px; text-align: left; }
.hz-command-option small { color: var(--hz-muted); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hz-command-option:hover, .hz-command-option.selected { background: var(--hz-card); }
.hz-command-footer { display: flex; align-items: center; gap: 16px; background: var(--hz-bg); border-top: 1px solid var(--hz-border); padding: 12px 16px; color: var(--hz-muted); font-size: 12px; }
.hz-notifications { position: fixed; top: 58px; left: 16px; z-index: 80; width: 320px; max-width: calc(100vw - 32px); background: var(--hz-surface); border: 1px solid var(--hz-border); border-radius: 10px; box-shadow: 0 8px 24px var(--hz-shadow); }
.hz-notification-head { padding: 16px; display: flex; justify-content: space-between; font-weight: 650; }
.hz-notification-tabs { display: flex; padding: 0 12px 8px; gap: 8px; border-bottom: 1px solid var(--hz-border); }
.hz-notification-tabs button { padding: 4px 8px; border-radius: 6px; }
.hz-notification-tabs button.active { background: var(--hz-card); }
.hz-notification-list { max-height: 480px; overflow-y: auto; }
.hz-notification { padding: 12px 16px; border-bottom: 1px solid var(--hz-border); }
.hz-notification p { color: var(--hz-muted); margin-top: 4px; font-size: 12px; line-height: 18px; }
.hz-notification-actions { display: flex; gap: 8px; margin-top: 8px; }
.hz-toast { position: fixed; right: 24px; bottom: 24px; z-index: 110; padding: 12px 20px; border: 1px solid var(--hz-border); border-radius: 10px; background: var(--hz-surface); box-shadow: 0 4px 20px var(--hz-shadow); }
@media (min-width:640px) { .hz-content { gap: 24px; } .hz-metrics-grid { gap: 24px; } .hz-heading-copy p { font-size: 14px; } .hz-chart-labels span { display: block; } }
@media (min-width:1024px) { .hz-sidebar { transform: none; } .hz-sidebar-inner { width: 264px; } .hz-main { margin-left: 256px; padding: 8px; } .hz-panel { border-radius: 8px; min-height: calc(100vh - 16px); box-shadow: 0 0 0 1px var(--hz-border),0 1px 2px var(--hz-shadow); } .hz-mobile-bar { display: none; } .hz-user { display: block; } .hz-content { padding: 32px 40px 40px; } .hz-action-label { display: inline; } .hz-actions .hz-button { padding: 3px 9px; } .hz-actions .hz-menu-wrap .hz-button { padding: 6px; } .hz-heading-copy { flex: 1; max-width: none; } .hz-table th:nth-child(1) { width: 10%; } .hz-table th:nth-child(2) { width: 30%; } .hz-table th:nth-child(3),.hz-table th:nth-child(4),.hz-table th:nth-child(5) { width: 20%; } }
@media (max-width:479px) { .hz-page-controls { margin-left: 0; } .hz-pagination { min-height: 79px; } }
@media print { .hz-sidebar,.hz-mobile-bar,.hz-actions,.hz-menu-wrap,.hz-pagination { display:none; } .hz-main { margin:0; padding:0; } .hz-content { padding:0; } }
.hz-full-content { max-width:1280px; margin:0 auto; padding:8px 24px 24px; }
.hz-page-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hz-page-header h1,.hz-calendar-toolbar h1,.hz-settings>h1 { margin:0; font-size:20px; line-height:24px; font-weight:650; letter-spacing:-.6px; }
.hz-page-header p,.hz-setting-section>div:first-child p { color:var(--hz-muted); margin:2px 0 0; }
.hz-page-actions { display:flex; gap:12px; }
.hz-users-more { display:none; position:relative; width:32px; height:32px; color:inherit; }
.hz-users-more summary { width:32px; height:32px; display:grid; place-items:center; cursor:pointer; list-style:none; }.hz-users-more summary::-webkit-details-marker{display:none}.hz-users-more>div{position:absolute;right:0;top:34px;width:130px;padding:4px;background:var(--hz-surface);border:1px solid var(--hz-border);border-radius:8px;box-shadow:0 5px 18px var(--hz-shadow);z-index:20}.hz-users-more>div button,.hz-users-more>div a{width:100%;height:32px;padding:6px 8px;display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;border-radius:6px}.hz-users-more>div button:hover,.hz-users-more>div a:hover{background:var(--hz-card)}
.hz-small-button,.hz-primary-button { height:32px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:5px 11px; border:1px solid var(--hz-border); border-radius:8px; background:var(--hz-surface); box-shadow:0 1px 2px var(--hz-shadow); font-weight:550; text-decoration:none; white-space:nowrap; }
.hz-small-button:hover { background:var(--hz-bg); }
.hz-small-button .hz-icon,.hz-primary-button .hz-icon { width:16px; height:16px; color:var(--hz-muted); }
.hz-primary-button { background:#3e63dd; color:white; border-color:#3451b2; }
.hz-primary-button .hz-icon { color:white; }
.hz-view-toolbar { display:flex; align-items:center; gap:8px; margin:24px 0 12px; border-bottom:1px solid var(--hz-border); padding-bottom:12px; }
.hz-view-toolbar button,.hz-view-toolbar select,.hz-filter-toolbar .hz-small-button { height:24px; padding:3px 7px; border:0; box-shadow:none; border-radius:8px; background:transparent; font-size:12px; line-height:16px; font-weight:550; }
.hz-view-toolbar .active { background:var(--hz-card); }
.hz-view-desktop { display:none; align-items:center; gap:8px; }
.hz-view-mobile { border:0; background:var(--hz-card); }
.hz-toolbar-spacer { flex:1; }
.hz-filter-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.hz-filter-toolbar i { width:1px; height:16px; background:var(--hz-border); }
.hz-clear { margin-left:auto; font-size:12px; color:var(--hz-muted); }
.hz-task-list { padding:0 0 16px; display:flex; flex-direction:column; gap:4px; }
.hz-task-row { min-height:44px; display:flex; align-items:center; border-radius:6px; }
.hz-task-row:hover { background:var(--hz-card); }
.hz-task-row label { width:44px; height:44px; display:grid; place-items:center; flex:0 0 44px; }
.hz-task-row input,.hz-data-table input { width:16px; height:16px; accent-color:#3e63dd; }
.hz-task-row>a { flex:1; min-width:0; padding:12px 0; color:inherit; text-decoration:none; }
.hz-task-row>a.completed { text-decoration:line-through; color:var(--hz-muted); }
.hz-priority { min-width:54px; display:none; justify-content:center; margin-right:12px; font-size:12px; line-height:20px; font-weight:550; border-radius:5px; }
.priority-high { color:#ce2c31; background:#ffcdce; }.priority-medium { color:#9e6c00; background:#ffe3a2; }.priority-low { color:#008573; background:#c4e8d1; }.priority-— { color:var(--hz-muted); background:var(--hz-card); }
.hz-modal-backdrop,.hz-drawer-backdrop { position:fixed; inset:0; z-index:120; background:#0005; backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:16px; }
html:has(.hz-modal-backdrop),body:has(.hz-modal-backdrop),html:has(.hz-drawer-backdrop),body:has(.hz-drawer-backdrop){overflow:hidden}
.hz-task-modal { width:448px; max-width:100%; padding:24px; background:var(--hz-surface); border-radius:16px; box-shadow:0 16px 60px #0004; }
.hz-modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.hz-modal-head h2 { font-size:16px; line-height:24px; font-weight:600; margin:0; }
.hz-modal-head>button { width:40px; height:40px; border:2px solid #3e63dd; border-radius:12px; display:grid; place-items:center; }
.hz-task-modal>label,.hz-user-drawer>label,.hz-field { display:flex; flex-direction:column; gap:8px; margin-top:24px; font-weight:550; }
.hz-task-modal input,.hz-task-modal textarea,.hz-user-drawer input,.hz-user-drawer textarea,.hz-user-drawer select,.hz-field input,.hz-field select,.hz-inline-field,.hz-prefix-field,.hz-invite-link input,.hz-settings select { border:1px solid #d2d5dc; border-radius:8px; background:var(--hz-surface); color:inherit; min-height:32px; padding:5px 11px; box-shadow:0 1px 2px var(--hz-shadow); }
.hz-task-modal textarea,.hz-user-drawer textarea { min-height:72px; resize:none; }
.hz-character-count { color:var(--hz-muted); text-align:right; margin-top:6px; }
.hz-modal-actions { display:flex; justify-content:flex-end; align-items:center; gap:20px; margin-top:24px; }
.hz-modal-actions .hz-primary-button { height:32px; }

.hz-wide-table-wrap { width:100%; overflow:hidden; }
.hz-data-table { width:100%; border-collapse:collapse; text-align:left; white-space:nowrap; }
.hz-data-table th { height:40px; color:var(--hz-faint); font-size:12px; font-weight:550; box-shadow:inset 0 -1px var(--hz-border); padding:0 8px; }
.hz-data-table th button { width:100%; text-align:left; }
.hz-data-table td { height:48px; padding:0 8px; box-shadow:inset 0 -1px var(--hz-card); }
.hz-data-table tbody tr:hover { background:var(--hz-card); }
.hz-users-table { min-width:619px; }
.hz-users-table th:first-child,.hz-users-table td:first-child { width:32px; }
.hz-users-table th:nth-child(2) { width:29%; }.hz-users-table th:nth-child(3) { width:27%; }.hz-users-table th:nth-child(4),.hz-users-table th:nth-child(5) { width:21%; }
.hz-person { display:flex; align-items:center; gap:12px; }
.hz-person img,.hz-person i,.hz-table-avatar { width:24px; height:24px; border-radius:50%; object-fit:cover; flex:0 0 24px; }
.hz-person i,.hz-initial { display:grid; place-items:center; background:var(--hz-card); color:var(--hz-muted); font-style:normal; font-weight:650; }
.hz-person b { font-weight:450; }
.hz-tier,.hz-status { display:inline-flex; align-items:center; gap:6px; padding:2px 6px; border-radius:5px; font-size:12px; line-height:16px; font-weight:550; }
.hz-tier { background:var(--hz-card); border:1px solid var(--hz-border); }
.hz-tier i { width:6px; height:6px; border-radius:50%; }.tier-personal i { background:#8e4ec6; }.tier-team i { background:#0091ff; }.tier-enterprise i { background:#29a383; }
.hz-full-paginator { min-height:78px; display:flex; align-items:center; gap:8px; padding:12px 8px; flex-wrap:wrap; }
.hz-full-paginator>select { height:32px; min-width:84px; padding:0 12px; border:1px solid var(--hz-border); border-radius:8px; background:var(--hz-surface); }
.hz-full-paginator>div { margin-left:auto; display:flex; align-items:center; gap:8px; }
.hz-small-button.disabled { opacity:.35; pointer-events:none; }
.hz-drawer-backdrop { justify-content:flex-end; padding:0; }
.hz-user-drawer { height:100%; width:416px; max-width:100%; background:var(--hz-surface); padding:20px 24px; box-shadow:-12px 0 48px #0003; overflow-y:auto; }
.hz-upload-row { display:flex; gap:16px; align-items:flex-start; }
.hz-upload-row>span { width:64px; height:64px; border-radius:12px; display:grid; place-items:center; background:#dcdde2; color:#62636c; }
.hz-upload-row>span .hz-icon { width:28px; height:28px; }
.hz-upload-row button { display:flex; gap:6px; align-items:center; font-weight:550; }
.hz-upload-row p { color:var(--hz-muted); margin-top:10px; }
.hz-user-drawer>label { margin-top:24px; }
.hz-user-drawer .hz-character-count { font-weight:450; }
.hz-drawer-actions { position:sticky; bottom:-20px; background:var(--hz-surface); border-top:1px solid var(--hz-border); margin-top:208px; padding:24px 0 4px; display:flex; justify-content:flex-end; gap:20px; }

.hz-audit-toolbar { display:flex; align-items:center; gap:8px; margin-top:24px; }
.hz-audit-toolbar>label { width:400px; height:28px; display:flex; align-items:center; gap:8px; padding:3px 8px; border:1px solid var(--hz-border); border-radius:8px; box-shadow:0 1px 2px var(--hz-shadow); }
.hz-audit-toolbar input { min-width:0; width:100%; outline:0; background:transparent; }
.hz-audit-toolbar select { height:28px; padding:3px 9px; border:1px solid var(--hz-border); border-radius:8px; background:var(--hz-surface); }
.hz-audit-toolbar .hz-small-button { margin-left:auto; height:28px; }
.hz-audit-table { min-width:834px; margin-top:16px; }
.hz-audit-table th:nth-child(1){width:19%}.hz-audit-table th:nth-child(2){width:37%}.hz-audit-table th:nth-child(3){width:12%}.hz-audit-table th:nth-child(4){width:21%}.hz-audit-table th:nth-child(5){width:12%}
.hz-audit-table td:first-child { display:flex; align-items:center; gap:12px; }
.hz-audit-table td:nth-child(2) i { color:var(--hz-faint); font-style:normal; }
.status-success,.status-paid,.status-active { color:#008f62; background:#c4e8d1; }.status-error,.status-blocked { color:#ce2c31; background:#ffcdce; }.status-pending,.status-invited { color:#9e6c00; background:#ffe3a2; }

.hz-calendar-page { height:calc(100vh - 16px); min-height:700px; display:flex; flex-direction:column; }
.hz-compact-content { max-width:none; padding:0; }
.hz-calendar-toolbar { min-height:112px; padding:32px 40px 8px; display:flex; align-items:flex-start; justify-content:space-between; }
.hz-calendar-toolbar>div { display:flex; gap:8px; }
.hz-calendar-toolbar select { height:32px; padding:5px 11px; border:1px solid var(--hz-border); border-radius:8px; background:var(--hz-surface); box-shadow:0 1px 2px var(--hz-shadow); }
.hz-calendar-toolbar .hz-small-button:last-child,.hz-calendar-toolbar .hz-small-button:nth-last-child(2) { width:32px; padding:8px; border-color:transparent; box-shadow:none; }
.hz-calendar { flex:1; min-height:0; display:flex; flex-direction:column; }
.hz-weekdays { height:40px; display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--hz-border); }
.hz-weekdays span { display:grid; place-items:center; font-size:12px; }.hz-weekdays i { display:none; font-style:normal; }.hz-weekdays b { font-weight:450; }
.hz-month-grid { position:relative; flex:1; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:repeat(6,minmax(105px,1fr)); }
.hz-day { border-right:1px solid var(--hz-border); border-bottom:1px solid var(--hz-border); text-align:right; position:relative; }
.hz-day>span { display:inline-grid; place-items:center; width:20px; height:20px; margin:4px; font-size:12px; }
.hz-day.outside { color:var(--hz-faint); }.hz-day.today>span { background:#3e63dd; color:white; border-radius:5px; }
.hz-cal-event { --event-span:1; position:absolute; left:calc((var(--start) - 1) * (100% / 7) + 4px); width:calc((100% / 7) * var(--event-span) - 8px); top:calc(var(--row) * (100% / 6) + var(--event-index) * 20px + 28px); height:18px; padding:1px 6px; border-radius:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; font-size:12px; line-height:16px; }
.hz-event-0{--row:0;--start:1;--event-span:1;--event-index:0}.hz-event-1{--row:0;--start:1;--event-span:1;--event-index:1}.hz-event-2{--row:0;--start:6;--event-span:1;--event-index:0}.hz-event-3{--row:0;--start:6;--event-span:1;--event-index:1}.hz-event-4{--row:0;--start:6;--event-span:1;--event-index:2}.hz-event-5{--row:2;--start:1;--event-span:7;--event-index:0}.hz-event-6{--row:2;--start:1;--event-span:2;--event-index:1}.hz-event-7{--row:2;--start:2;--event-span:1;--event-index:1}.hz-event-8{--row:2;--start:2;--event-span:5;--event-index:2}.hz-event-9{--row:2;--start:4;--event-span:1;--event-index:1}.hz-event-10{--row:2;--start:7;--event-span:1;--event-index:1}.hz-event-11{--row:3;--start:5;--event-span:3;--event-index:0}.hz-event-12{--row:4;--start:3;--event-span:1;--event-index:0}
.tone-gray{background:#e5e7eb}.tone-jade{background:#e1f8ec;color:#007a5e}.tone-amber{background:#ffe681}.tone-brown{background:#eee3d0}.tone-cyan{background:#c4f1f9}.tone-red{background:#ffd1d3;color:#b4232b}.tone-teal{background:#c7ebe5;color:#006d5b}.tone-plain{background:transparent}
.hz-calendar-empty { flex:1; display:grid; place-content:center; text-align:center; color:var(--hz-muted); }.hz-calendar-empty .hz-icon { width:48px; height:48px; margin:auto; }

.hz-settings { max-width:896px; margin:0 auto; }
.hz-settings>h1 { margin-bottom:24px; }
.hz-settings>nav { display:none; align-items:center; gap:8px; border-bottom:1px solid var(--hz-border); }
.hz-settings>nav a { height:34px; padding:6px 8px 8px; display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--hz-muted); white-space:nowrap; border-bottom:2px solid transparent; }
.hz-settings>nav a.active { color:var(--hz-text); border-bottom-color:#3e63dd; }
.hz-settings-select { width:100%; margin-bottom:24px; }
.hz-settings-body { display:flex; flex-direction:column; gap:32px; }
.hz-settings-stack,.hz-account-form { display:flex; flex-direction:column; gap:32px; }
.hz-setting-section { display:grid; grid-template-columns:1fr; gap:24px; padding-top:32px; border-top:1px solid var(--hz-border); }
.hz-setting-section:first-child { padding-top:8px; border-top:0; }
.hz-setting-section h2 { font-size:14px; line-height:20px; font-weight:650; margin:0; }
.hz-setting-section>div:last-child { min-width:0; }
.hz-settings-stack .hz-setting-section>div:last-child>.hz-small-button { margin-left:auto; display:flex; }
.hz-profile-photo { display:flex; align-items:center; gap:16px; }
.hz-profile-photo>img { width:52px; height:52px; border-radius:8px; object-fit:cover; }
.hz-profile-photo>div>button { margin-right:12px; }
.hz-profile-photo p { margin-top:8px; color:var(--hz-muted); }
.hz-field { margin-top:24px; }
.hz-field-grid { display:grid; grid-template-columns:1fr; gap:24px; }
.hz-field-grid .hz-field { margin-top:0; }
.hz-inline-field { display:flex; padding:0 0 0 11px; }.hz-inline-field input { flex:1; border:0; box-shadow:none; padding:0; }.hz-inline-field .hz-small-button { height:30px; width:32px; border:0; box-shadow:none; padding:8px; }
.hz-prefix-field { display:flex; align-items:center; padding:0; overflow:hidden; }.hz-prefix-field>span { height:30px; display:flex; align-items:center; padding:0 10px; background:var(--hz-card); color:var(--hz-muted); }.hz-prefix-field input { flex:1; border:0; box-shadow:none; }
.hz-unsaved { border-top:1px solid var(--hz-border); padding-top:32px; display:flex; align-items:center; justify-content:flex-end; gap:16px; }.hz-unsaved>span { margin-right:auto; display:flex; align-items:center; gap:8px; color:var(--hz-muted); }
.hz-small-button.danger { background:#e5484d; color:white; border-color:#d1343a; }.hz-small-button.danger .hz-icon{color:white}
.hz-swatches { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }.hz-swatches button { width:16px; height:16px; border-radius:50%; }.hz-swatches button.active { outline:2px solid currentColor; outline-offset:2px; }
.hz-primary-swatch-0{background:#e93d82}.hz-primary-swatch-1{background:#ab4aba}.hz-primary-swatch-2{background:#6e56cf}.hz-primary-swatch-3{background:#3e63dd}.hz-primary-swatch-4{background:#00a2c7}.hz-primary-swatch-5{background:#86ead4}.hz-primary-swatch-6{background:#29a383}.hz-primary-swatch-7{background:#ffe629}.hz-primary-swatch-8{background:#ffc53d}.hz-primary-swatch-9{background:#978365}.hz-primary-swatch-10{background:#ad7f58}.hz-neutral-swatch-0{background:#b9bbc6}.hz-neutral-swatch-1{background:#a1a1aa}.hz-neutral-swatch-2{background:#8b8d98}.hz-neutral-swatch-3{background:#7c7f87}.hz-neutral-swatch-4{background:#6f727b}.hz-neutral-swatch-5{background:#5c5f66}
.hz-billing-history { display:block; position:relative; }.hz-billing-history>div:first-child { margin-right:150px; }.hz-billing-history>div:last-child>.hz-small-button { position:absolute; right:0; top:32px; }.hz-billing-history table,.hz-members table { margin-top:24px; width:100%; border-collapse:collapse; text-align:left; }.hz-billing-history th,.hz-billing-history td,.hz-members th,.hz-members td { height:48px; padding:0 8px; border-bottom:1px solid var(--hz-card); }.hz-billing-history th,.hz-members th { color:var(--hz-faint); font-size:12px;font-weight:550; }.hz-billing-history .hz-icon{width:14px}
.hz-notification-settings>div { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:64px; border-bottom:1px solid var(--hz-card); }.hz-notification-settings b,.hz-notification-settings small { display:block; }.hz-notification-settings b { font-weight:550; }.hz-notification-settings small { color:var(--hz-muted); }
.hz-toggle { width:36px;height:20px;border-radius:12px;background:#c7c9d1;padding:2px;transition:.2s;flex:0 0 36px}.hz-toggle span{display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:.2s}.hz-toggle.on{background:#3e63dd}.hz-toggle.on span{transform:translateX(16px)}
.hz-invite-link { display:flex; gap:12px; }.hz-invite-link input { flex:1; min-width:0; }.hz-members { display:block; }.hz-members table td:first-child { display:flex; align-items:center; gap:12px; }.hz-members td:first-child>span:last-child b,.hz-members td:first-child>span:last-child small { display:block; }.hz-members td:first-child>span:last-child small { color:var(--hz-muted); }.hz-members td:last-child{text-align:right}

@media (min-width:640px){.hz-view-desktop{display:flex}.hz-view-mobile{display:none}.hz-priority{display:flex}.hz-full-paginator{min-height:78px}.hz-settings>nav{display:flex}.hz-settings-select{display:none}.hz-setting-section{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.hz-account-form .hz-setting-section{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}.hz-account-form .hz-setting-section>div:last-child{grid-column:span 2}.hz-field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hz-field-grid .hz-field:nth-child(-n+2){grid-column:1/-1}.hz-settings-stack .hz-setting-section{align-items:start}.hz-billing-history,.hz-members{grid-template-columns:1fr!important}.hz-billing-history>div:last-child,.hz-members>div:last-child{grid-column:1/-1}.hz-calendar-toolbar h1{white-space:nowrap}}
@media (min-width:1024px){.hz-full-content{padding:32px 40px 40px}.hz-task-list{padding:0 32px 32px}.hz-audit-toolbar{margin-top:32px}.hz-compact-content{padding:0}.hz-settings{padding:0 40px}.hz-setting-section:first-child{padding-top:40px}.hz-notifications{left:272px}}
@media (max-width:639px){.hz-page-actions .hz-small-button:first-child{display:none}.hz-users-desktop-action{display:none}.hz-users-more{display:block}.hz-users-toolbar{gap:2px}.hz-users-toolbar .hz-view-mobile{width:48px}.hz-users-toolbar .hz-small-button{padding:3px}.hz-audit-toolbar>label{width:auto;flex:1;min-width:0}.hz-audit-toolbar .hz-small-button{font-size:0;gap:0;padding:5px 8px}.hz-audit-toolbar .hz-small-button .hz-icon{margin:0}.hz-settings>h1{margin-bottom:16px}.hz-setting-section{gap:16px}.hz-settings-stack .hz-setting-section>div:last-child>.hz-small-button{margin:0}.hz-field-grid{gap:32px}.hz-account-form .hz-setting-section:first-child .hz-field:nth-of-type(2) .hz-inline-field{border:0;box-shadow:none;padding:0}.hz-account-form .hz-setting-section:first-child .hz-field:nth-of-type(2) .hz-inline-field input{min-height:24px;padding:0}.hz-unsaved{align-items:flex-end;flex-wrap:wrap}.hz-unsaved>span{width:auto;max-width:110px;margin-right:auto}.hz-billing-history>div:first-child{margin-right:0}.hz-billing-history>div:last-child>.hz-small-button{position:static;margin-top:16px}.hz-invite-link{flex-wrap:wrap}.hz-invite-link input{width:100%;flex-basis:100%}.hz-members{overflow:hidden}.hz-members table{min-width:620px}.hz-modal-backdrop{padding:0}.hz-task-modal{width:100%}.hz-user-drawer{width:calc(100% - 98px)}.hz-calendar-page{height:calc(100vh - 56px);min-height:788px}.hz-calendar-toolbar{min-height:80px;padding:8px 24px 0;gap:12px;align-items:flex-start}.hz-calendar-toolbar h1{width:111px;flex:0 0 111px}.hz-calendar-toolbar>div{margin-top:8px;flex:0 0 auto}.hz-calendar-toolbar select{width:84px}.hz-weekdays b{display:none}.hz-weekdays i{display:block}.hz-month-grid{grid-template-rows:repeat(6,minmax(105px,1fr))}.hz-cal-event{font-size:11px;padding:1px 3px}.hz-full-content{overflow:hidden}}
@media (max-width:479px){.hz-full-paginator>div{width:100%;margin-left:0}.hz-full-paginator>div span{margin-right:auto}}