img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} :root { color-scheme: light; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --leading: 1.4; --leading-tight: 1.15; --bg: #fafaf9; --surface: #ffffff; --surface-hover: #f5f5f4; --border: #d6d3d1; --border-strong: #78716c; --border-light: #e7e5e4; --text: #1c1917; --text-muted: #57534e; --text-dim: #78716c; --track: #d6d3d1; --accent: #2563eb; --accent-fill: #2563eb; --accent-hover: #1d4ed8; --accent-subtle: #dbeafe; --danger: #dc2626; --danger-subtle: #fee2e2; --warn: #b45309; --success: #15803d; --success-subtle: #dcfce7; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06); --shadow-md: 0 1px 3px rgb(0 0 0 / 0.12); --skeleton-base: #e7e5e4; --skeleton-shine: #f5f5f4; --backdrop: rgb(0 0 0 / 0.5); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --tab-height: 48px; --header-height: 44px; --measure: 65ch; --page-max: 1120px;} :root[data-theme="dark"] { color-scheme: dark; --bg: #0c0a09; --surface: #1c1917; --surface-hover: #292524; --border: #44403c; --border-strong: #6b665e; --border-light: #292524; --text: #e7e5e4; --text-muted: #a8a29e; --text-dim: #8a847e; --track: #6b665e; --accent: #3b82f6; --accent-fill: #2563eb; --accent-hover: #60a5fa; --accent-subtle: #1e3a5f; --danger: #ef4444; --danger-subtle: #450a0a; --warn: #f59e0b; --success: #22c55e; --success-subtle: #052e16; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3); --shadow-md: 0 1px 3px rgb(0 0 0 / 0.4); --skeleton-base: #292524; --skeleton-shine: #44403c; --backdrop: rgb(0 0 0 / 0.6);} .link { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }.link:hover { color: var(--accent); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; padding: var(--space-1); background: none; border: none; color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer;}.icon-btn:hover { color: var(--text); background: var(--surface-hover); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }html, body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; font-size: var(--text-base); line-height: var(--leading);}body { padding-bottom: var(--tab-height); }a { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px;} .page__title { font-size: var(--text-xl); font-weight: 600; line-height: var(--leading-tight); margin-bottom: var(--space-6); }.app-content { padding: var(--space-4); max-width: var(--page-max); margin-inline: auto; } .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); z-index: 100; padding-bottom: env(safe-area-inset-bottom);}.tab-bar ul { display: flex; list-style: none; }.tab-bar li { flex: 1; }.tab-btn { transition: color 200ms ease; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 6px 4px 4px; font-size: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: inherit; width: 100%;}.tab.active .tab-btn { color: var(--accent); }.tab-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;}.tab.active .tab-icon { background: var(--accent-subtle); color: var(--accent); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4);}.card__title { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-3);} .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--text-sm); cursor: pointer; white-space: nowrap;}.btn:active { background: var(--surface-hover); }.btn--primary { background: var(--accent-fill); color: #fff; border-color: var(--accent-fill); }.btn--primary:active { background: var(--accent-hover); }.btn--ghost { background: transparent; border-color: transparent; }.btn--ghost:active { background: var(--surface-hover); }.btn--small { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); } .input { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--text-base);}.input::placeholder { color: var(--text-muted); }.input:focus { border-color: var(--accent); } .stat { padding: var(--space-2) 0; text-align: center; }.stat__value { display: block; font-size: var(--text-2xl); font-weight: 600; line-height: 1; margin-bottom: var(--space-1); font-variant-numeric: tabular-nums; }.stat__label { display: block; font-size: var(--text-xs); color: var(--text-muted); }.stat--accent { color: var(--accent); }.stat--success { color: var(--success); }.stat--warn { color: var(--warn); }.stat-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); max-width: 560px; margin-inline: auto; margin-bottom: var(--space-8); } .tip-table { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }.tip-table__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;}.tip-table__header button { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }.tip-table__header button.tip-table__col { text-align: right; }.tip-table__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-light); font-size: var(--text-sm);}.tip-table__row:last-child { border-bottom: none; }.tip-table__name { flex: 1; font-weight: 500; }.tip-table__col { width: 48px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }.tip--high { color: var(--danger); }.tip--mid { color: var(--warn); }.tip--low { color: var(--text-muted); }.tip--none { color: var(--text-dim); }.tip--fast { color: var(--success); }.tip--slow { color: var(--danger); } .filter-chips { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap;}.chip { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 20px; padding: 6px 16px; font-size: var(--text-sm); font-family: inherit; cursor: pointer;}.chip:active { background: var(--surface-hover); }.chip--active { background: var(--accent-fill); color: #fff; border-color: var(--accent-fill); } .account-name { cursor: pointer; }.acct-name--customer { color: var(--success); }.acct-name--prospect { color: var(--accent); }.acct-name--previous { color: var(--danger); }.acct-name--all { color: var(--text); } .skeleton { background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm);}@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; }}.skeleton--text { height: 14px; width: 60%; margin-bottom: 16px; }.skeleton--title { height: 24px; width: 40%; margin-bottom: 8px; }.skeleton--stat { height: 44px; width: 100%; }.skeleton--row { height: 16px; width: 100%; margin-bottom: 8px; }.skeleton--row:nth-child(2) { width: 85%; }.skeleton--row:nth-child(3) { width: 70%; }.skeleton--h1 { height: 1rem; }.skeleton--h2 { height: 2rem; }.skeleton--h25 { height: 2.5rem; }.skeleton--h3 { height: 3rem; }.skeleton--h6 { height: 6rem; }.skeleton--w60 { width: 60%; }.skeleton--w90 { width: 90%; }.skeleton--w100 { width: 100%; }.skeleton-row { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-light); }.skeleton-row:nth-child(1) { animation-delay: 0ms; }.skeleton-row:nth-child(2) { animation-delay: 50ms; }.skeleton-row:nth-child(3) { animation-delay: 100ms; }.skeleton-row:nth-child(4) { animation-delay: 150ms; }.skeleton-row:nth-child(5) { animation-delay: 200ms; }.skeleton-row:nth-child(6) { animation-delay: 250ms; }.skeleton-row:nth-child(7) { animation-delay: 300ms; }.skeleton-row:nth-child(8) { animation-delay: 350ms; }.skeleton-row:nth-child(9) { animation-delay: 400ms; }.skeleton-row:nth-child(10) { animation-delay: 450ms; }.skeleton-list { padding: var(--space-4); } .modal-backdrop { position: fixed; inset: 0; background: var(--backdrop); z-index: 150;}.modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 151; width: calc(100% - 2 * var(--space-6)); max-width: 420px;}.modal__content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-md);}.modal__title { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-1);}.modal__actions { display: flex; gap: var(--space-2); } .more-menu { display: flex; flex-direction: column; gap: var(--space-4); }.more-menu__group { display: flex; flex-direction: column; gap: var(--space-1); }.more-menu__item { display: block; padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); text-decoration: none; font-size: var(--text-sm); cursor: pointer; font-family: inherit; text-align: left; width: 100%;}.more-menu__item:active { background: var(--surface-hover); }.more-menu__logout { color: var(--danger); } .status-badge { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 500; background: color-mix(in srgb, var(--badge-color, var(--accent)) 15%, transparent); color: var(--badge-color, var(--accent)); border: 1px solid color-mix(in srgb, var(--badge-color, var(--accent)) 30%, transparent);}.status-badge--type { --badge-color: var(--success); } .detail-header { margin-bottom: var(--space-4); }.detail-header__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }.back-button { display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: none; padding: var(--space-1) 0; color: var(--text-muted); font-family: inherit; font-size: var(--text-sm); cursor: pointer; }.back-button:active { color: var(--text); }.detail-header__actions { display: flex; gap: var(--space-2); }.detail-header__action-btn { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--text-xs); cursor: pointer; text-decoration: none; }.detail-header__action-btn:active { background: var(--surface-hover); }.detail-header__name { font-size: var(--text-xl); font-weight: 600; line-height: var(--leading-tight); margin-bottom: var(--space-2); }.detail-header__meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); flex-wrap: wrap; }.detail-header__link { color: var(--accent); text-decoration: none; }.detail-header__link:active { text-decoration: underline; } .account-details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--space-4);}.account-details__summary { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer;}.account-details__summary:active { color: var(--text); }.account-details__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0 var(--space-4) var(--space-4);}.account-details__item { padding: var(--space-1) 0; border-bottom: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 2px;}.account-details__label { font-size: var(--text-xs); color: var(--text-muted);}.account-details__value { font-size: var(--text-sm); overflow-wrap: break-word;} .sub-tab-bar { margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); }.sub-tab-scroll { display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }.sub-tab-scroll::-webkit-scrollbar { display: none; }.sub-tab { flex-shrink: 0; padding: var(--space-2) var(--space-4); background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-family: inherit; font-size: var(--text-sm); cursor: pointer; }.sub-tab:active { color: var(--text); }.sub-tab.active { color: var(--accent); border-bottom-color: var(--accent); }.sub-tab-bar--scroll { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch;}.sub-tab-bar--scroll::-webkit-scrollbar { height: 4px; }.sub-tab-bar--scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .contact-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-2); }.contact-card__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-subtle); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: 600; float: left; margin-right: var(--space-3); }.contact-card__info { overflow: hidden; }.contact-card__name { font-weight: 600; font-size: var(--text-sm); }.contact-card__email { color: var(--accent); font-size: var(--text-xs); text-decoration: none; display: block; }.contact-card__detail { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }.contact-card__toggle { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-muted); } .contact-add-row { display: flex; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--border); margin-top: var(--space-3); flex-wrap: wrap; }.contact-add-row__input { flex: 1; min-width: 120px; padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--text-sm); } .activity-feed { }.activity-feed__date-header { font-size: var(--text-xs); color: var(--text-muted); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); }.activity-feed__entry { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-light); font-size: var(--text-sm); }.activity-feed__entry-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }.activity-feed__entry-author { font-weight: 600; }.activity-feed__entry-time { font-size: var(--text-xs); color: var(--text-muted); }.activity-feed__entry-action { margin-left: auto; background: none; border: none; color: var(--text-muted); font-size: var(--text-xs); padding: var(--space-1); cursor: pointer;}.activity-feed__entry-action:active { color: var(--danger); }.activity-feed__entry-note { color: var(--text); } .task-row, .project-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-light); }.task-row__info, .project-row__info { flex: 1; }.task-row__name, .project-row__name { font-weight: 500; font-size: var(--text-sm); }.task-row__meta, .project-row__meta { font-size: var(--text-xs); color: var(--text-muted); }.task-row:nth-child(even) { background: var(--surface); } .task-table { width: 100%; border-collapse: collapse; }.task-table th, .task-table td { padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--border); font-size: var(--text-sm); text-align: left; font-variant-numeric: tabular-nums; }.task-table th { font-weight: 600; color: var(--text-muted); font-size: var(--text-xs); }.task-row--done td { color: var(--text-muted); text-decoration: line-through; }.task-row__btn { background: none; border: none; color: var(--text-muted); font-size: var(--text-xs); padding: var(--space-1); cursor: pointer;}.task-row__btn:active { color: var(--danger); }.task-list__add { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);} .project-row__progress { display: flex; align-items: center; gap: var(--space-2); min-width: 120px; }.project-row__progress-bar { flex: 1; height: 6px; background: var(--track); border-radius: 3px; overflow: hidden; }.project-row__progress-fill { height: 100%; border-radius: 3px; background: var(--accent-hover); }.project-row__progress-fill--0 { width: 0%; }.project-row__progress-fill--10 { width: 10%; }.project-row__progress-fill--20 { width: 20%; }.project-row__progress-fill--30 { width: 30%; }.project-row__progress-fill--40 { width: 40%; }.project-row__progress-fill--50 { width: 50%; }.project-row__progress-fill--60 { width: 60%; }.project-row__progress-fill--70 { width: 70%; }.project-row__progress-fill--80 { width: 80%; }.project-row__progress-fill--90 { width: 90%; }.project-row__progress-fill--100 { width: 100%; }.project-row__progress-label { font-size: var(--text-xs); color: var(--text-muted); min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; } .project-detail { display: flex; flex-direction: column; gap: var(--space-3); }.project-detail__header { margin-bottom: var(--space-2); }.project-detail__name { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-1); }.project-detail__meta { display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }.project-detail__progress { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }.project-detail__steps { display: flex; flex-direction: column; }.project-step { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-light); font-size: var(--text-sm);}.project-step--done .project-step__name { color: var(--text-dim); text-decoration: line-through; }.project-detail__add { display: flex; gap: var(--space-2); margin-top: var(--space-2);} .email-tab__section { margin-bottom: var(--space-4); }.email-tab__label { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-1); } .blog-posts__input, .blog-posts__textarea { width: 100%; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--text-sm); margin-bottom: var(--space-2); } .edit-form { display: flex; flex-direction: column; gap: var(--space-4); }.edit-form__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); }.edit-form__card-title { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-3); }.edit-form__checkbox-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); padding: var(--space-1) 0; }.edit-field { margin-bottom: var(--space-3); }.edit-field__label { font-size: var(--text-xs); color: var(--text-muted); display: block; margin-bottom: var(--space-1); }.edit-field__value { font-size: var(--text-sm); } .empty-state, .error-state { text-align: center; padding: var(--space-8) var(--space-4); color: var(--text-muted); }.empty-state__icon { font-size: var(--text-2xl); margin-bottom: var(--space-3); }.empty-state__title { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-2); }.empty-state__description { font-size: var(--text-sm); margin-bottom: var(--space-4); } .report-view__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-4); }.report-view__title { font-size: var(--text-lg); font-weight: 600; }.report-view__count { font-size: var(--text-xs); color: var(--text-muted); } .report-table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }.report-table th, .report-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); font-size: var(--text-sm); text-align: left; }.report-table th { font-weight: 600; color: var(--text-muted); cursor: pointer; }.report-table tbody tr:nth-child(even) { background: var(--surface); }.report-row__name { font-weight: 500; } .urls-tab table, .profitability table, .ames-reports table { width: 100%; border-collapse: collapse; }.urls-tab th, .profitability th, .ames-reports th,.urls-tab td, .profitability td, .ames-reports td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); font-size: var(--text-sm); text-align: left;} .login-page { display: flex; align-items: center; justify-content: center; min-height: calc(100dvh - var(--tab-height)); max-width: 360px; margin: 0 auto; }.login-form { width: 100%; padding: var(--space-6); background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); }.login-heading { font-size: var(--text-xl); font-weight: 600; line-height: var(--leading-tight); margin-bottom: var(--space-6); }.login-field { margin-bottom: var(--space-3); }.login-input { width: 100%; padding: var(--space-3) var(--space-4); font-size: var(--text-base); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; }.login-input:focus { border-color: var(--accent); }.login-input::placeholder { color: var(--text-muted); }.login-btn { width: 100%; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: 600; font-family: inherit; cursor: pointer; }.login-btn:active { background: var(--accent-hover); }.login-error { color: var(--danger); font-size: var(--text-sm); margin-top: var(--space-2); min-height: 1.4em; } .table-scroll { overflow-x: auto; } @media (max-width: 560px) { [id$="_accts"] th:nth-child(2), [id$="_accts"] td:nth-child(2) { display: none; } .icon-btn { min-width: 44px; min-height: 44px; } .chip { padding: 10px 16px; }}.a8b-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }.a8b-table th, .a8b-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); text-align: left; }.a8b-table th { font-weight: 600; color: var(--text-muted); font-size: var(--text-xs); cursor: pointer; user-select: none; }.a8b-table th:hover { color: var(--text); }.a8b-table th[aria-sort] { color: var(--text); }.a8b-table tbody tr:active { background: var(--surface-hover); }.a8b-table > label { display: inline-flex; align-items: center; gap: var(--space-1); margin-right: var(--space-3); margin-bottom: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }.a8b-table > label > a { margin-left: var(--space-1); color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); }.a8b-table > label > input { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; min-height: 32px; }.a8b-table > label > select { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; min-height: 32px; } .a8b-table nav.paging { border-top: 1px solid var(--border-light); padding-top: var(--space-3); margin-top: var(--space-4); }.a8b-table nav.paging ul { display: flex; align-items: center; justify-content: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }.a8b-table nav.paging li { display: flex; align-items: center; }.a8b-table nav.paging button { min-width: 44px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; font-size: var(--text-sm); font-family: var(--font); }.a8b-table nav.paging button:active { background: var(--accent-subtle); border-color: var(--accent); }.a8b-table nav.paging button[aria-current] { background: var(--accent-fill); color: #fff; border-color: var(--accent-fill); font-weight: 600; }.a8b-table nav.paging label { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-muted); }.a8b-table nav.paging input { width: 48px; min-height: 44px; padding: 6px; font-size: var(--text-sm); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; text-align: center; } @media (max-width: 560px) { .a8b-table > label > input, .a8b-table > label > select, .a8b-table nav.paging input { font-size: var(--text-base); } .a8b-table nav.paging ul { gap: var(--space-1); } .a8b-table nav.paging li:nth-child(1), .a8b-table nav.paging li:nth-child(2), .a8b-table nav.paging li:nth-child(6), .a8b-table nav.paging li:nth-child(7) { display: none; }} .toast-container { position: fixed; top: var(--space-4); right: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); z-index: 200; max-width: 320px;}.toast { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; box-shadow: var(--shadow-md); animation: slideInRight 300ms ease-out both; font-size: var(--text-sm); cursor: pointer;}.toast--success { border-left: 3px solid var(--success); }.toast--error { border-left: 3px solid var(--danger); }.toast--info { border-left: 3px solid var(--accent); }@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .tab-label { font-size: 10px; } .account-list { } .contacts-section { display: flex; flex-direction: column; gap: var(--space-2); }.contact-item { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3);}.contact-item__details { flex: 1; }.contact-item__title { font-weight: 600; font-size: var(--text-sm); }.contact-item__dept { font-size: var(--text-xs); color: var(--text-muted); }.contact-item__editable { font-size: var(--text-xs); color: var(--text-muted); cursor: pointer; }.contact-item__edit-field { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; }.contact-item__actions { display: flex; gap: var(--space-2); }.contact-card__phone { display: block; font-size: var(--text-xs); color: var(--text-muted); text-decoration: none; }.contact-add-row__submit { padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--text-sm); cursor: pointer; }.contact-add-row__submit:active { background: var(--surface-hover); }.toggle-label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-muted); } .activity-feed__date-group { margin-bottom: var(--space-3); }.activity-feed__entry-main { display: flex; gap: var(--space-2); }.activity-feed__entry-body { flex: 1; }.activity-feed__entry-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 600; flex-shrink: 0; background: var(--surface-hover); color: var(--text-muted);}.activity-feed__entry-icon--sticky { background: var(--accent-subtle); color: var(--accent); }.activity-feed__entry-icon--log { background: var(--surface-hover); color: var(--text-muted); }.activity-feed__entry-expand { color: var(--accent); font-size: var(--text-xs); cursor: pointer; margin-left: var(--space-1); }.activity-feed__entry-note--preview { color: var(--text-muted); }.activity-feed__entry-note--full { color: var(--text); }.activity-feed__sticky-form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }.activity-feed__textarea { padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--text-sm); min-height: 60px; }.activity-feed__submit { align-self: flex-start; padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--text-sm); cursor: pointer; }.activity-feed__submit:active { background: var(--surface-hover); } .email-tab { display: flex; flex-direction: column; gap: var(--space-3); }.email-tab__select, .email-tab__input, .email-tab__textarea { width: 100%; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--text-sm);}.email-tab__textarea { min-height: 120px; }.email-tab__contacts { display: flex; flex-wrap: wrap; gap: var(--space-2); }.email-tab__contact-label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }.email-tab__send { align-self: flex-start; padding: var(--space-2) var(--space-4); background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); font-family: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }.email-tab__send:active { background: var(--accent-hover); } .blog-posts { display: flex; flex-direction: column; gap: var(--space-3); }.blog-posts__form { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }.blog-posts__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); }.blog-posts__item-content { font-size: var(--text-sm); margin-bottom: var(--space-2); }.blog-posts__item-approvals { display: flex; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-2); }.blog-posts__mark-btn { padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--text-xs); cursor: pointer; }.blog-posts__mark-btn:active { background: var(--surface-hover); }.blog-posts__used-label { font-size: var(--text-xs); color: var(--success); }.blog-posts__hidden-msg { font-size: var(--text-xs); color: var(--text-muted); }.blog-posts__submit { align-self: flex-start; padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--text-sm); cursor: pointer; }.blog-posts__submit:active { background: var(--surface-hover); } .projects-tab { display: flex; flex-direction: column; gap: var(--space-2); }.project-add-form { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }.project-add-form__input { padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--text-sm); }.project-add-form__submit { align-self: flex-start; padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--text-sm); cursor: pointer; }.project-add-form__submit:active { background: var(--surface-hover); }.project-row__user, .project-row__due, .project-detail__user, .project-detail__due { font-size: var(--text-xs); color: var(--text-muted); }.project-table__row { cursor: pointer; }.project-step__name { flex: 1; }.project-list { } .tasks-tab { display: flex; flex-direction: column; gap: var(--space-2); }.task-row__checkbox { cursor: pointer; }.task-row__body { flex: 1; }.task-row__type { font-size: var(--text-xs); color: var(--text-muted); }.task-row__description { font-size: var(--text-sm); }.task-row__assigned, .task-row__due { font-size: var(--text-xs); color: var(--text-muted); }.task-row__completed { font-size: var(--text-xs); color: var(--success); } .report-list { }.report-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }.report-card { display: block; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); }.report-card:active { background: var(--surface-hover); }.report-card p { color: var(--text-muted); }.report-cell--late { color: var(--danger); }.report-cell--ok { color: var(--success); }.report-months__field { display: inline-flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }.report-months { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; min-height: 32px; width: 5rem; } .error-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }.error-state__icon { font-size: var(--text-2xl); color: var(--danger); }.error-state__message { font-size: var(--text-sm); color: var(--text); }.error-state__retry { padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--text-sm); cursor: pointer; }.error-state__retry:active { background: var(--surface-hover); }.empty-state__action { display: inline-block; padding: var(--space-2) var(--space-4); background: var(--accent-fill); color: #fff; border-radius: var(--radius-sm); text-decoration: none; font-size: var(--text-sm); margin-top: var(--space-2); } .search-bar { margin-bottom: var(--space-3); }.search-bar__input { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--text-base); }.search-bar__input::placeholder { color: var(--text-muted); }.search-bar__input:focus { border-color: var(--accent); } .fab { position: fixed; bottom: calc(var(--tab-height) + 16px); right: 16px; z-index: 150; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; border: none; box-shadow: var(--shadow-md); cursor: pointer; font-size: 24px; display: flex; align-items: center; justify-content: center; }.fab:active { background: var(--accent-hover); } .bottom-sheet-backdrop { position: fixed; inset: 0; background: var(--backdrop); z-index: 150; }.bottom-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 151; background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-md); }.bottom-sheet__handle { display: flex; justify-content: center; padding: var(--space-2); }.bottom-sheet__handle-bar { width: 40px; height: 4px; border-radius: 2px; background: var(--border); }.bottom-sheet__content { padding: var(--space-4); } .profitability { }.ames-reports { display: flex; flex-direction: column; gap: var(--space-3); }.spelling { display: flex; flex-direction: column; gap: var(--space-3); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }}