/* Arch Time Pro - experimental Pro Studio theme.
   Active only with app.html?theme=pro. */

html.theme-pro {
    --color-primary-50: 241 245 249;
    --color-primary-100: 226 232 240;
    --color-primary-200: 203 213 225;
    --color-primary-300: 148 163 184;
    --color-primary-400: 100 116 139;
    --color-primary-500: 51 65 85;
    --color-primary-600: 30 41 59;
    --color-primary-700: 15 23 42;
    --pro-bg: #f3f5f7;
    --pro-panel: #ffffff;
    --pro-border: #d8dee6;
    --pro-border-soft: #e5e9ef;
    --pro-ink: #111827;
    --pro-muted: #64748b;
    --pro-accent: #0f766e;
    --pro-accent-soft: #e6f3f1;
    --pro-warn: #b45309;
    --pro-warn-soft: #fff7ed;
    --pro-danger: #b91c1c;
    --pro-danger-soft: #fef2f2;
}

html.theme-pro body {
    background: var(--pro-bg);
    color: var(--pro-ink);
}

html.theme-pro.pwa-standalone,
html.theme-pro.pwa-standalone body {
    min-height: 100%;
    overscroll-behavior-y: none;
}

html.theme-pro.pwa-standalone body {
    background: #f3f5f7;
}

html.theme-pro.pwa-standalone #app-container > header {
    padding-top: max(0.75rem, env(safe-area-inset-top));
}

html.theme-pro.pwa-standalone nav.lg\:hidden {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

html.theme-pro.pwa-standalone #app-container > main {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}

html.theme-pro.pwa-standalone .pwa-install-hint {
    display: none !important;
}

html.theme-pro .bg-white\/90,
html.theme-pro header.bg-white\/90 {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
}

html.theme-pro .app-panel,
html.theme-pro section.bg-white.border,
html.theme-pro .bg-white.border.border-slate-200,
html.theme-pro .bg-slate-50.border.border-slate-200,
html.theme-pro .bg-gradient-to-br {
    border-color: var(--pro-border);
    border-radius: 10px;
    box-shadow: none;
}

html.theme-pro .app-panel,
html.theme-pro section.bg-white.border,
html.theme-pro .bg-white.border.border-slate-200 {
    background: var(--pro-panel);
}

html.theme-pro .bg-slate-50,
html.theme-pro .bg-slate-100 {
    background-color: #f7f8fa;
}

html.theme-pro .rounded-3xl,
html.theme-pro .rounded-2xl,
html.theme-pro .rounded-xl {
    border-radius: 10px;
}

html.theme-pro .rounded-lg,
html.theme-pro .rounded-md {
    border-radius: 7px;
}

html.theme-pro .shadow-sm,
html.theme-pro .shadow,
html.theme-pro .shadow-lg,
html.theme-pro .shadow-xl,
html.theme-pro .shadow-2xl {
    box-shadow: none !important;
}

html.theme-pro .secondary-action,
html.theme-pro .primary-action-compact,
html.theme-pro #btn-toggle-timer,
html.theme-pro #btn-auth,
html.theme-pro #btn-limbo-create,
html.theme-pro #btn-limbo-join,
html.theme-pro [data-plan-checkout] {
    border-radius: 8px;
    letter-spacing: 0.02em;
}

html.theme-pro #btn-toggle-timer,
html.theme-pro #btn-auth,
html.theme-pro .secondary-action.dark,
html.theme-pro .primary-action-compact,
html.theme-pro #btn-open-project-modal {
    background: #172033;
    border-color: #172033;
    color: #ffffff !important;
}

html.theme-pro #btn-toggle-timer:hover,
html.theme-pro #btn-auth:hover,
html.theme-pro .secondary-action.dark:hover,
html.theme-pro .primary-action-compact:hover,
html.theme-pro #btn-open-project-modal:hover {
    background: #0f172a;
    border-color: #0f172a;
}

html.theme-pro #btn-toggle-timer.is-running {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

html.theme-pro #btn-toggle-timer.is-running:hover {
    background: #991b1b !important;
    border-color: #991b1b !important;
}

html.theme-pro .secondary-action {
    background: #fff;
    border-color: var(--pro-border);
    color: #334155;
}

html.theme-pro .secondary-action:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

html.theme-pro .nav-btn {
    border-radius: 8px;
    color: #64748b;
}

html.theme-pro .nav-btn.text-primary-600,
html.theme-pro .nav-btn.is-active {
    background: #eef2f6;
    border-color: #d6dde7;
    color: #0f172a;
}

@media (hover: hover) and (pointer: fine) {
    html.theme-pro .nav-btn:hover {
        background: #eef2f6;
        border-color: #d6dde7;
        color: #0f172a;
    }
}

html.theme-pro #timer-display {
    color: #101827;
    font-weight: 900;
    letter-spacing: 0;
}

html.theme-pro label,
html.theme-pro .text-\[11px\].font-bold,
html.theme-pro .text-\[10px\].font-bold,
html.theme-pro .uppercase.tracking-wider {
    letter-spacing: 0.08em;
}

html.theme-pro input,
html.theme-pro select,
html.theme-pro textarea {
    border-color: var(--pro-border);
    border-radius: 8px !important;
    box-shadow: none !important;
}

html.theme-pro input:focus,
html.theme-pro select:focus,
html.theme-pro textarea:focus {
    border-color: #64748b !important;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.12) !important;
}

html.theme-pro #project-select,
html.theme-pro #task-select {
    padding-right: 2.25rem !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #64748b 50%),
        linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position:
        calc(100% - 1.15rem) 50%,
        calc(100% - 0.88rem) 50%;
    background-size: 0.28rem 0.28rem, 0.28rem 0.28rem;
    background-repeat: no-repeat;
}

html.theme-pro #manual-project,
html.theme-pro #manual-task {
    padding-right: 2.25rem !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #64748b 50%),
        linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position:
        calc(100% - 1.15rem) 50%,
        calc(100% - 0.88rem) 50%;
    background-size: 0.28rem 0.28rem, 0.28rem 0.28rem;
    background-repeat: no-repeat;
}

html.theme-pro #projects-list > article,
html.theme-pro [data-project-id],
html.theme-pro [data-ui-action="show-project-detail"] {
    border-color: var(--pro-border);
    border-radius: 10px;
    box-shadow: none;
}

html.theme-pro #projects-list h3,
html.theme-pro #projects-list .font-black,
html.theme-pro h2,
html.theme-pro h3 {
    letter-spacing: 0;
}

html.theme-pro .bg-gradient-to-br.from-primary-50,
html.theme-pro .from-primary-50,
html.theme-pro .to-primary-100 {
    background: #ffffff !important;
}

html.theme-pro .from-emerald-50,
html.theme-pro .to-emerald-100 {
    background: linear-gradient(180deg, #ffffff 0%, #f6fbf9 100%) !important;
}

html.theme-pro .from-amber-50,
html.theme-pro .to-orange-100 {
    background: linear-gradient(180deg, #ffffff 0%, #fffaf3 100%) !important;
}

html.theme-pro #card-burn {
    background: linear-gradient(180deg, #ffffff 0%, #f8f5f0 100%) !important;
}

html.theme-pro #card-burn .bg-amber-500 {
    background-color: #8a5a2b !important;
}

html.theme-pro #card-burn .text-amber-700 {
    color: #73512c !important;
}

html.theme-pro #card-burn .text-amber-300 {
    color: #c5a17a !important;
    opacity: 0.42 !important;
}

html.theme-pro .bg-primary-50,
html.theme-pro .bg-indigo-50,
html.theme-pro .bg-emerald-50,
html.theme-pro .bg-amber-50,
html.theme-pro .bg-red-50 {
    background-color: #f7f8fa;
}

html.theme-pro .text-primary-600,
html.theme-pro .text-primary-700,
html.theme-pro .text-indigo-600 {
    color: #172033 !important;
}

html.theme-pro .text-emerald-600,
html.theme-pro .text-emerald-700 {
    color: var(--pro-accent) !important;
}

html.theme-pro .text-amber-600,
html.theme-pro .text-orange-600 {
    color: var(--pro-warn) !important;
}

html.theme-pro .text-red-600,
html.theme-pro .text-red-700 {
    color: var(--pro-danger) !important;
}

html.theme-pro .bg-primary-500,
html.theme-pro .bg-primary-600,
html.theme-pro .bg-indigo-600 {
    background-color: #172033 !important;
}

html.theme-pro .bg-emerald-500,
html.theme-pro .bg-emerald-600 {
    background-color: var(--pro-accent) !important;
}

html.theme-pro .bg-amber-500,
html.theme-pro .bg-orange-500 {
    background-color: var(--pro-warn) !important;
}

html.theme-pro .border-primary-100,
html.theme-pro .border-primary-200,
html.theme-pro .border-indigo-100,
html.theme-pro .border-indigo-200,
html.theme-pro .border-emerald-100,
html.theme-pro .border-emerald-200,
html.theme-pro .border-amber-100,
html.theme-pro .border-amber-200 {
    border-color: var(--pro-border) !important;
}

html.theme-pro table,
html.theme-pro .overflow-x-auto table {
    font-size: 0.8125rem;
}

html.theme-pro th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
}

html.theme-pro td {
    color: #1f2937;
}

html.theme-pro .modal {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
}

html.theme-pro .modal:not(.force-hide) > div {
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18) !important;
}

html.theme-pro #trial-badge,
html.theme-pro #plan-badge,
html.theme-pro span[class*="rounded-full"],
html.theme-pro span[class*="rounded-md"] {
    border-radius: 999px;
}

html.theme-pro canvas {
    filter: saturate(0.85);
}

html.theme-pro .auth-card {
    border-radius: 12px;
}

html.theme-pro #auth-container .bg-slate-900,
html.theme-pro #limbo-container {
    background: #111827;
}

html.theme-pro #auth-context-copy,
html.theme-pro #trial-info-container {
    background: #f8fafc;
    border-color: var(--pro-border);
    color: #334155;
}

html.theme-pro .pwa-install-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.8rem;
    border: 1px solid #d8dee6;
    border-radius: 10px;
    background: #ffffff;
    color: #172033;
}

html.theme-pro .pwa-install-hint-app {
    grid-column: 1 / -1;
    margin-bottom: -0.35rem;
}

html.theme-pro .pwa-install-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #172033;
    color: #ffffff;
    flex: 0 0 auto;
}

html.theme-pro .pwa-install-title {
    font-size: 0.75rem;
    line-height: 1.15;
    font-weight: 900;
    color: #111827;
}

html.theme-pro .pwa-install-copy {
    margin-top: 0.18rem;
    font-size: 0.68rem;
    line-height: 1.35;
    font-weight: 700;
    color: #64748b;
}

html.theme-pro .pwa-install-action {
    align-self: center;
    padding: 0.48rem 0.7rem;
    border-radius: 8px;
    background: #172033;
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
}

html.theme-pro .pwa-install-action:hover {
    background: #0f172a;
}

html.theme-pro .pwa-install-close {
    margin-left: auto;
    width: 1.65rem;
    height: 1.65rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: #f8fafc;
    flex: 0 0 auto;
}

html.theme-pro .pwa-install-close:hover {
    color: #111827;
    background: #eef2f6;
}

@media (min-width: 1024px) {
    html.theme-pro #app-container > main {
        background: var(--pro-bg);
    }

    html.theme-pro .app-panel {
        padding: 1.25rem;
    }
}

/* Pro is now the default app skin; classic remains available with ?theme=classic. */
html.theme-pro #auth-container .bg-slate-900 {
    background: linear-gradient(180deg, #111827 0%, #172033 100%);
}

html.theme-pro #auth-container .opacity-10 {
    opacity: 0 !important;
}

html.theme-pro #landing-title {
    font-size: clamp(2.6rem, 4vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
}

html.theme-pro #landing-title + p {
    max-width: 30rem;
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.7;
}

html.theme-pro #auth-container .space-y-6 > .flex {
    gap: 0.875rem;
    color: #d1d5db;
}

html.theme-pro #auth-container .space-y-6 > .flex > div:first-child {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

html.theme-pro .auth-panel {
    background: #f8fafc;
}

html.theme-pro .auth-card {
    border: 1px solid #d8dee6 !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08) !important;
}

html.theme-pro #tab-login,
html.theme-pro #tab-signup {
    border-radius: 7px;
}

/* Pro Studio refinement pass */
html.theme-pro #btn-open-project-modal,
html.theme-pro #btn-open-project-modal *,
html.theme-pro button#btn-open-project-modal.secondary-action.dark,
html.theme-pro button#btn-open-project-modal.secondary-action.dark * {
    color: #ffffff !important;
    opacity: 1 !important;
}

html.theme-pro #projects-list {
    gap: 0.875rem;
}

html.theme-pro #projects-list [data-ui-action="show-project-detail"] {
    padding: 1rem 1.125rem;
    background: #ffffff;
    border-color: #d7dde6;
    transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

html.theme-pro #projects-list [data-ui-action="show-project-detail"]:hover {
    border-color: #aeb8c7;
    background: #fcfcfd;
    transform: translateY(-1px);
}

html.theme-pro #projects-list [data-ui-action="show-project-detail"] > .absolute:first-child {
    height: 3px;
    border-radius: 10px 10px 0 0;
}

html.theme-pro #projects-list h3 {
    font-size: 1rem;
    font-weight: 850;
    color: #101827;
}

html.theme-pro #projects-list h3 + p {
    color: #64748b;
    letter-spacing: 0.11em;
}

html.theme-pro #projects-list h3 {
    min-width: 0;
    padding-right: 0;
}

html.theme-pro #projects-list .grid.grid-cols-3 {
    gap: 0;
    border: 1px solid #e6eaf0;
    border-radius: 8px;
    overflow: hidden;
    background: #fbfcfd;
}

html.theme-pro #projects-list .grid.grid-cols-3 > div {
    padding: 0.625rem 0.75rem;
    border-right: 1px solid #e6eaf0;
}

html.theme-pro #projects-list .grid.grid-cols-3 > div:last-child {
    border-right: 0;
}

html.theme-pro #projects-list .grid.grid-cols-3 p:first-child {
    font-size: 0.625rem;
    color: #6b7280;
    white-space: nowrap;
}

html.theme-pro #projects-list .grid.grid-cols-3 p:last-child {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: #111827;
}

html.theme-pro #projects-list .pt-2.border-t {
    padding-top: 0.875rem;
    border-color: #e8ecf2;
}

html.theme-pro #projects-list .h-2\.5 {
    height: 0.5rem;
    background: #e8edf3;
}

html.theme-pro #projects-list span.inline-flex {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
}

html.theme-pro #projects-list .project-life-dot {
    position: relative;
    display: inline-flex;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #0f766e;
    box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.28);
    animation: projectBreath 2.8s ease-in-out infinite;
    margin: 0;
    transform-origin: center;
    z-index: 1;
}

html.theme-pro #projects-list [data-project-tone="danger"] .project-life-dot {
    background: #b91c1c;
    box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.28);
    animation-name: projectBreathDanger;
}

html.theme-pro #projects-list [data-project-tone="warning"] .project-life-dot {
    background: #b45309;
    box-shadow: 0 0 0 0 rgba(180, 83, 9, 0.24);
    animation-name: projectBreathWarning;
}

@keyframes projectBreath {
    0%, 100% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.2); }
    50% { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(15, 118, 110, 0); }
}

@keyframes projectBreathDanger {
    0%, 100% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.2); }
    50% { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(185, 28, 28, 0); }
}

@keyframes projectBreathWarning {
    0%, 100% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(180, 83, 9, 0.18); }
    50% { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(180, 83, 9, 0); }
}

html.theme-pro #projects-list .admin-only button {
    color: #64748b;
    background: #ffffff;
    border: 1px solid #e6eaf0;
}

html.theme-pro #projects-list .admin-only button:hover {
    color: #172033;
    background: #f8fafc;
}

html.theme-pro #card-margin,
html.theme-pro #card-profit,
html.theme-pro #card-burn,
html.theme-pro [id^="card-"] {
    min-height: auto;
}

html.theme-pro [data-tab="analyze"] .grid > div,
html.theme-pro [data-tab="analyze"] .bg-gradient-to-br {
    padding: 1rem;
}

html.theme-pro [data-tab="analyze"] .bg-gradient-to-br {
    overflow: hidden;
}

html.theme-pro [data-tab="analyze"] .bg-gradient-to-br > .absolute.inset-0 {
    display: none;
}

html.theme-pro [data-tab="analyze"] .bg-gradient-to-br::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #94a3b8;
}

html.theme-pro [data-tab="analyze"] .bg-gradient-to-br.from-primary-50::after {
    background: #172033;
}

html.theme-pro [data-tab="analyze"] .bg-gradient-to-br.from-emerald-50::after {
    background: var(--pro-accent);
}

html.theme-pro [data-tab="analyze"] .bg-gradient-to-br.from-amber-50::after {
    background: var(--pro-warn);
}

html.theme-pro [data-tab="analyze"] h3 {
    color: #475569 !important;
    font-size: 0.6875rem;
}

html.theme-pro [data-tab="analyze"] .text-2xl,
html.theme-pro [data-tab="analyze"] .text-3xl {
    font-size: 1.375rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

html.theme-pro #modal-analytics-detail .grid > .bg-white {
    border-radius: 10px !important;
    box-shadow: none !important;
}

html.theme-pro #modal-analytics-detail canvas {
    filter: saturate(0.8);
}

html.theme-pro #entries-list tr,
html.theme-pro tbody tr {
    border-color: #eef1f5;
}

html.theme-pro #entries-list td,
html.theme-pro tbody td {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

html.theme-pro thead th {
    border-bottom: 1px solid #dbe2ea;
}

html.theme-pro #entries-table-desktop tr.bg-slate-100\/80 {
    background: #eef2f6;
}

html.theme-pro #entries-table-desktop tr.bg-slate-50 {
    background: #f8fafc;
}

html.theme-pro #entries-table-desktop th {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

html.theme-pro #entries-table-desktop td span.rounded-full,
html.theme-pro #entries-table-desktop td div.rounded-full,
html.theme-pro #entries-table-desktop td div.rounded-lg {
    border-radius: 7px;
}

html.theme-pro #entries-table-desktop td:nth-child(2) {
    font-weight: 800;
}

html.theme-pro #entries-list-mobile > div {
    border-radius: 10px;
    box-shadow: none;
}

html.theme-pro .timesheet-day-row {
    background: #eef2f6 !important;
}

html.theme-pro .timesheet-day-row td {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
}

html.theme-pro .timesheet-day-dot {
    background: #172033 !important;
}

html.theme-pro .timesheet-head-row th {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
}

html.theme-pro .timesheet-entry-row td {
    padding-top: 0.52rem !important;
    padding-bottom: 0.52rem !important;
}

html.theme-pro .timesheet-user,
html.theme-pro .timesheet-task,
html.theme-pro .timesheet-duration {
    border-radius: 6px !important;
    box-shadow: none !important;
}

html.theme-pro .timesheet-user {
    background: #f8fafc;
    color: #475569;
    font-size: 0.58rem;
    padding: 0.18rem 0.45rem;
}

html.theme-pro .timesheet-project {
    font-size: 0.82rem;
    font-weight: 850;
}

html.theme-pro .timesheet-task {
    background: #f8fafc;
    border-color: #dfe5ed;
    color: #334155 !important;
    font-size: 0.68rem;
    padding: 0.2rem 0.5rem;
}

html.theme-pro .timesheet-notes {
    margin-top: 0.25rem;
    font-size: 0.65rem;
    line-height: 1.2;
}

html.theme-pro .timesheet-duration {
    background: #f8fafc;
    border-color: #dfe5ed;
    color: #111827 !important;
    min-width: 3.2rem;
    padding: 0.2rem 0.5rem;
}

html.theme-pro .timesheet-time-cell .text-\[10px\] {
    margin-top: 0.2rem;
    font-style: italic;
}

html.theme-pro .timesheet-cost span {
    color: #64748b;
    font-size: 0.78rem;
}

html.theme-pro .timesheet-mobile-card {
    margin: 0.5rem 0.75rem;
    padding: 0.8rem;
}

html.theme-pro #modal-edit-project > div,
html.theme-pro #modal-detail > div,
html.theme-pro #report-modal > div,
html.theme-pro #modal-analytics-detail > div {
    border: 1px solid #d8dee6;
    background: #ffffff;
}

html.theme-pro #modal-detail .grid,
html.theme-pro #modal-edit-project .grid {
    gap: 0.875rem;
}

html.theme-pro #modal-detail > div {
    padding: 1rem 1.25rem 1.25rem;
}

html.theme-pro #detail-content {
    margin-top: 0;
}

html.theme-pro #btn-close-detail {
    top: 0;
    width: 2rem;
    height: 2rem;
    padding: 0.375rem;
}

html.theme-pro .project-detail-header {
    margin-bottom: 0.75rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

html.theme-pro .project-detail-header h2 {
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}

html.theme-pro .project-detail-header .admin-only button {
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
}

html.theme-pro .project-detail-metrics {
    margin-bottom: 0.75rem;
}

html.theme-pro .project-metric-card {
    min-height: 3.25rem;
    padding: 0.5rem 0.625rem;
}

html.theme-pro .project-metric-card p:first-child {
    font-size: 0.54rem;
    line-height: 1;
}

html.theme-pro .project-metric-card p:last-child {
    font-size: 0.9rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

html.theme-pro .project-rhythm-panel {
    margin-bottom: 0.75rem;
}

html.theme-pro .project-rhythm-row {
    min-height: 0;
}

@media (min-width: 1024px) {
    html.theme-pro .project-rhythm-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 130px 300px !important;
        column-gap: 1.75rem !important;
    }

    html.theme-pro .project-task-status-grid {
        width: 300px;
        justify-self: end !important;
    }
}

html.theme-pro .project-rhythm-row p {
    line-height: 1.15;
}

html.theme-pro .project-task-progress {
    justify-self: start;
}

html.theme-pro .project-rhythm-row button {
    padding-top: 0.18rem;
    padding-bottom: 0.18rem;
}

html.theme-pro .project-task-status-grid button {
    min-width: 0;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    text-align: center;
    overflow: hidden;
    text-overflow: clip;
}

html.theme-pro .project-task-status-grid {
    justify-self: end !important;
}

html.theme-pro .project-side-panel {
    min-height: 0;
}

html.theme-pro .project-side-panel p {
    line-height: 1.15;
}

html.theme-pro #modal-detail .bg-slate-50,
html.theme-pro #modal-detail .bg-white,
html.theme-pro #modal-edit-project .bg-slate-50,
html.theme-pro #modal-edit-project .bg-white {
    border-color: #dfe5ed;
}

html.theme-pro #modal-edit-project h2,
html.theme-pro #modal-detail h2,
html.theme-pro #report-modal h2,
html.theme-pro #modal-analytics-detail h2 {
    color: #111827;
    font-size: 1.25rem;
}

html.theme-pro #btn-close-detail,
html.theme-pro #btn-close-edit-project,
html.theme-pro #btn-close-report,
html.theme-pro #btn-close-analytics-detail {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

html.theme-pro #btn-close-detail:hover,
html.theme-pro #btn-close-edit-project:hover,
html.theme-pro #btn-close-report:hover,
html.theme-pro #btn-close-analytics-detail:hover {
    background: #f8fafc;
    color: #111827;
}

/* Modal refinement pass */
html.theme-pro .modal {
    background: rgba(15, 23, 42, 0.56);
}

html.theme-pro .modal:not(.force-hide) > div,
html.theme-pro #custom-dialog-card,
html.theme-pro #paywall-container > div,
html.theme-pro #update-password-container > div.relative {
    border-color: #d8dee6 !important;
    border-radius: 10px !important;
    box-shadow: 0 22px 70px rgba(15, 23, 42, 0.2) !important;
}

html.theme-pro .modal > div {
    color: #172033;
}

html.theme-pro .modal h2,
html.theme-pro #custom-dialog-title,
html.theme-pro #update-password-container h2 {
    color: #101827 !important;
    font-size: 1.05rem !important;
    line-height: 1.15;
    letter-spacing: 0;
}

html.theme-pro .modal h2 i,
html.theme-pro #update-password-container h2 i {
    color: #475569 !important;
}

html.theme-pro .modal h2 + p {
    margin-bottom: 1rem !important;
    color: #64748b !important;
    line-height: 1.35;
}

html.theme-pro .modal label {
    color: #64748b !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.09em;
}

html.theme-pro .modal input,
html.theme-pro .modal select,
html.theme-pro .modal textarea,
html.theme-pro #custom-dialog-input,
html.theme-pro #new-password {
    border-color: #d8dee6 !important;
    border-radius: 8px !important;
    min-height: 2.45rem;
    padding-top: 0.62rem !important;
    padding-bottom: 0.62rem !important;
    box-shadow: none !important;
}

html.theme-pro .modal input:focus,
html.theme-pro .modal select:focus,
html.theme-pro .modal textarea:focus,
html.theme-pro #custom-dialog-input:focus,
html.theme-pro #new-password:focus {
    border-color: #64748b !important;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.12) !important;
}

html.theme-pro .modal button,
html.theme-pro #custom-dialog button,
html.theme-pro #update-password-container button {
    border-radius: 8px !important;
}

html.theme-pro .modal [id^="btn-close"],
html.theme-pro #btn-skip-onboarding {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0.4rem !important;
    top: 0.9rem !important;
    right: 0.9rem !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    box-shadow: none !important;
}

html.theme-pro .modal [id^="btn-close"]:hover,
html.theme-pro #btn-skip-onboarding:hover {
    color: #111827 !important;
    background: #f8fafc !important;
}

html.theme-pro #modal-edit-team > div,
html.theme-pro #modal-team-invite > div,
html.theme-pro #modal-task-builder > div,
html.theme-pro #modal-catalog > div,
html.theme-pro #modal-templates > div,
html.theme-pro #modal-manual > div,
html.theme-pro #modal-edit-entry > div,
html.theme-pro #modal-edit-expense > div,
html.theme-pro #modal-report > div,
html.theme-pro #modal-team-report > div,
html.theme-pro #modal-forgot-password > div {
    padding: 1.35rem !important;
}

html.theme-pro #modal-edit-project > div,
html.theme-pro #modal-analytics-detail > div {
    padding: 1.35rem !important;
}

html.theme-pro #modal-edit-project .bg-slate-50,
html.theme-pro #modal-edit-project .bg-white,
html.theme-pro #modal-owner-onboarding .bg-slate-50,
html.theme-pro #modal-owner-onboarding .bg-white,
html.theme-pro #modal-task-builder .bg-slate-50,
html.theme-pro #modal-task-builder .bg-white,
html.theme-pro #modal-account .bg-slate-50,
html.theme-pro #modal-account .bg-white {
    border-radius: 9px !important;
    box-shadow: none !important;
}

html.theme-pro #modal-edit-project .bg-slate-50,
html.theme-pro #modal-owner-onboarding .bg-slate-50,
html.theme-pro #modal-task-builder .bg-slate-50 {
    background: #f8fafc !important;
}

html.theme-pro #modal-account > div {
    max-width: 24rem;
}

html.theme-pro #modal-account .text-center {
    text-align: left;
    padding: 0.9rem !important;
}

html.theme-pro #account-role {
    border-radius: 999px !important;
}

html.theme-pro #modal-owner-onboarding > div {
    padding: 1.25rem !important;
}

html.theme-pro #modal-owner-onboarding .w-12.h-12,
html.theme-pro #update-password-container .w-16.h-16,
html.theme-pro #custom-dialog-icon {
    width: 2.4rem !important;
    height: 2.4rem !important;
    border-radius: 8px !important;
    margin-bottom: 0.9rem !important;
}

html.theme-pro #modal-owner-onboarding .space-y-5 {
    gap: 0.8rem;
}

html.theme-pro #modal-edit-project #btn-save-project-edit {
    position: sticky;
    bottom: -0.25rem;
    z-index: 5;
    margin-top: 1rem !important;
    border: 1px solid #111827;
}

html.theme-pro #modal-edit-project [class*="space-y-4"] {
    gap: 0.75rem;
}

html.theme-pro #modal-edit-project .grid.grid-cols-1.lg\:grid-cols-\[0\.9fr_1\.1fr\] {
    gap: 0.9rem !important;
}

html.theme-pro #modal-team-invite #team-invite-code-preview {
    color: #172033;
}

html.theme-pro .team-modal-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #dfe5ed;
    border-radius: 9px;
    background: #f8fafc;
}

html.theme-pro .team-modal-avatar {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #172033;
    color: #ffffff;
    flex: 0 0 auto;
}

html.theme-pro .team-modal-summary-name {
    font-size: 0.9rem;
    line-height: 1.15;
    font-weight: 850;
    color: #101827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.theme-pro .team-modal-summary-meta {
    margin-top: 0.18rem;
    font-size: 0.66rem;
    line-height: 1.2;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.theme-pro .team-modal-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid #dfe5ed;
    border-radius: 9px;
    background: #ffffff;
    color: #64748b;
    font-size: 0.68rem;
    line-height: 1.35;
    font-weight: 700;
}

html.theme-pro .team-modal-note i {
    color: #475569;
    margin-top: 0.05rem;
    flex: 0 0 auto;
}

html.theme-pro #modal-edit-team #btn-delete-team {
    width: 2.55rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-color: #fecaca !important;
    background: #fff7f7 !important;
}

html.theme-pro #modal-edit-team #btn-save-team-edit,
html.theme-pro #modal-team-invite #btn-send-team-invite {
    background: #172033 !important;
}

html.theme-pro #modal-team-invite #btn-copy-team-invite {
    background: #ffffff !important;
    color: #334155 !important;
}

html.theme-pro #modal-edit-team #edit-team-role {
    padding-right: 2.1rem !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #64748b 50%),
        linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position:
        calc(100% - 1.05rem) 50%,
        calc(100% - 0.78rem) 50%;
    background-size: 0.28rem 0.28rem, 0.28rem 0.28rem;
    background-repeat: no-repeat;
}

html.theme-pro #custom-dialog-card {
    padding: 1.35rem !important;
}

html.theme-pro #custom-dialog-msg {
    color: #64748b !important;
    line-height: 1.45;
}

@media (max-width: 767px) {
    html.theme-pro .app-panel,
    html.theme-pro section.bg-white.border {
        padding: 1rem;
        border-radius: 10px;
    }

    html.theme-pro #projects-list {
        gap: 0.75rem;
    }

    html.theme-pro #projects-list [data-ui-action="show-project-detail"] {
        padding: 0.95rem;
    }

    html.theme-pro #projects-list h3 {
        font-size: 0.95rem;
        padding-right: 0;
    }

    html.theme-pro #projects-list .grid.grid-cols-3 > div {
        padding: 0.55rem 0.5rem;
    }

    html.theme-pro #projects-list .grid.grid-cols-3 p:first-child {
        font-size: 0.55rem;
        letter-spacing: 0.04em;
    }

    html.theme-pro #projects-list .grid.grid-cols-3 p:last-child {
        font-size: 0.75rem;
    }

    html.theme-pro #timer-display {
        font-size: 3rem;
    }

    html.theme-pro .modal {
        align-items: flex-start;
        padding: 0.75rem;
        overflow-y: auto;
    }

    html.theme-pro .modal:not(.force-hide) > div {
        max-height: calc(100vh - 1.5rem);
        overflow-y: auto;
    }

    html.theme-pro #modal-detail > div {
        padding: 0.85rem;
    }

    html.theme-pro .project-detail-header {
        padding: 0.75rem;
        padding-right: 0.75rem;
    }

    html.theme-pro .project-detail-header > .flex {
        align-items: center !important;
        text-align: center;
    }

    html.theme-pro .project-detail-header .admin-only {
        margin-left: auto;
        margin-right: auto;
    }

    html.theme-pro .project-detail-header h2 {
        font-size: 1.05rem;
    }

    html.theme-pro .project-metric-card {
        min-height: 3.2rem;
        padding: 0.55rem;
    }

    html.theme-pro .project-metric-card p:last-child {
        font-size: 0.84rem;
    }
}