/* ===== BASE RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%;height:100%}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    line-height:1.5;background:var(--clr-bg-body);color:var(--clr-text);
    min-height:100vh;height:100%;display:flex;flex-direction:column
}

/* ===== LIGHT THEME (DEFAULT) ===== */
:root {
    color-scheme:light;
    --clr-accent:#0d6efd;--clr-accent-hover:#0b5ed7;
    --clr-border:#d0d5dd;--clr-bg-soft:#f8f9fb;--clr-bg-body:#fff;
    --clr-text:#212529;--clr-text-muted:rgba(0,0,0,.65);
    --clr-bg-elevated:transparent;--clr-input-bg:#fff;
    --radius:4px;--shadow:0 1px 3px rgba(0,0,0,.08);
    --tz-surface:#fff;--tz-hairline:#d0d5dd;--tz-panel:#fff;
    --tz-fg:#212529;--tz-muted:#6c757d;--tz-input:#fff;
    --tz-line:rgba(0,0,0,.08);--tz-hover:rgba(0,0,0,.05);
    --clr-bg-card:var(--clr-bg-body);
    background-color:#fff;
    accent-color:var(--clr-accent);
    --radius-lg:14px;--radius-xl:18px;
    --shadow-lg:0 10px 30px rgba(0,0,0,.08);
    --shadow-md:0 6px 16px rgba(0,0,0,.06);
    --surface-1:var(--clr-bg-body);--surface-2:var(--clr-bg-soft);
    --stroke-strong:rgba(0,0,0,.08);--muted:#7b8188;
    --tool-base-min:220px;--tool-base-cover:140px;--tool-scale:.75;
    --tools-cols:3;--tool-card-max:280px;--tools-gap:1rem;
    --tools-total-width: calc(var(--tools-cols) * var(--tool-card-max) + (var(--tools-cols) - 1) * var(--tools-gap));
    --tizz-select-arrow-img:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
}

/* ===== EXPLICIT LIGHT THEME ===== */
:root[data-theme="light"],html[data-theme="light"],body[data-theme="light"],[data-theme="light"],.light,:root.light,html.light{
    color-scheme:light!important;
    --clr-accent:#0d6efd!important;--clr-accent-hover:#0b5ed7!important;
    --clr-border:#d0d5dd!important;--clr-bg-soft:#f8f9fb!important;
    --clr-bg-body:#fff!important;--clr-text:#212529!important;
    --clr-text-muted:rgba(0,0,0,.65)!important;
    --clr-bg-elevated:transparent!important;--clr-input-bg:#fff!important;
    --tz-surface:#fff!important;--tz-hairline:#d0d5dd!important;
    --tz-panel:#fff!important;--tz-fg:#212529!important;
    --tz-muted:#6c757d!important;--tz-input:#fff!important;
    --tz-line:rgba(0,0,0,.08)!important;--tz-hover:rgba(0,0,0,.05)!important;
    background-color:#fff!important
}

/* Light theme tool-card overrides */
[data-theme="light"] .tool-card{
    background:#fff!important;border-color:#d0d5dd!important;color:#212529!important
}
[data-theme="light"] .tool-card .content{background:transparent!important;color:#212529!important}
[data-theme="light"] .tool-card .t{color:#212529!important}
[data-theme="light"] .tool-card .d{color:rgba(0,0,0,.65)!important}
[data-theme="light"] .tool-card .cover{background:#f8f9fb!important}
[data-theme="light"] .tool-card .btn{
    background:rgba(0,0,0,.05)!important;border-color:#d0d5dd!important;color:#212529!important
}

/* ===== DARK THEME ===== */
:root[data-theme="dark"],html[data-theme="dark"],body[data-theme="dark"],[data-theme="dark"],.dark,:root.dark,html.dark{
    color-scheme:dark;
    --clr-border:#3c3f4a;--clr-bg-soft:#1e1f22;--clr-bg-body:#121214;
    --clr-text:#d1d5db;--clr-text-muted:rgba(255,255,255,.7);
    --clr-bg-elevated:rgba(255,255,255,.03);--clr-input-bg:#2a2a2a;
    --clr-accent:#4894ff;--clr-accent-hover:#377be0;
    --tz-surface:#1b1d21;--tz-hairline:rgba(255,255,255,.12);
    --tz-panel:#161a22;--tz-fg:rgba(255,255,255,.92);
    --tz-muted:#a7adb7;--tz-input:#2a2a2a;
    --tz-line:rgba(255,255,255,.08);--tz-hover:rgba(255,255,255,.07);
    --tz-header-bg-dark:rgba(15,17,21,.9);--tz-surface-dark:#0f1115;
    --tz-panel-dark:#161a22;--tz-line-dark:rgba(255,255,255,.14);
    --tz-ink-dark:rgba(255,255,255,.9);--tz-hover-dark:rgba(255,255,255,.07);
    --clr-bg-card:var(--clr-bg-body);--clr-bg-muted:var(--clr-bg-body);
    --sidebar-top:var(--tz-hairline);
    --shadow-lg:0 10px 30px rgba(0,0,0,.55);
    --shadow-md:0 6px 16px rgba(0,0,0,.45);
    --surface-1:#1b1d21;--surface-2:#14161a;
    --stroke-strong:rgba(255,255,255,.08);--muted:#a7adb7;
    --tizz-select-arrow-img:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-color:#121214!important
}

/* ===== SYSTEM PREFERENCE FALLBACK ===== */
@media (prefers-color-scheme:dark){
    :root:not(.light):not(.dark):not([data-theme]),html:not(.light):not(.dark):not([data-theme]),body:not([data-theme]){
        color-scheme:dark;
        --clr-border:#3c3f4a;--clr-bg-soft:#1e1f22;--clr-bg-body:#121214;
        --clr-text:#d1d5db;--clr-accent:#4894ff;--clr-accent-hover:#377be0;
        --clr-input-bg:#2a2a2a;
        --tz-surface:#1b1d21;--tz-hairline:rgba(255,255,255,.12);
        --tz-panel:#161a22;--tz-fg:rgba(255,255,255,.92);
        --tz-muted:#a7adb7;--tz-input:#2a2a2a;
        --tz-line:rgba(255,255,255,.08);--tz-hover:rgba(255,255,255,.07);
        --tizz-select-arrow-img:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
        background-color:#121214!important
    }
}

/* ===== LAYOUT ===== */
.page-main{flex:1 0 auto;background:transparent!important}
.tz-main{background:transparent!important}
.page-wrap{max-width:1400px;margin-inline:auto}

/* ===== TYPOGRAPHY ===== */
.page-title{font-size:1.5rem;font-weight:600;margin:1rem 2rem .5rem}
.brand{
    font-family:"Sora",system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
    font-weight:800;letter-spacing:.2px;text-decoration:none;
    color:var(--clr-text);font-size:1.15rem;line-height:1;
    padding:.35rem .55rem;border-radius:.5rem
}
.brand:hover{background:var(--clr-bg-soft)}

/* ===== FORMS ===== */
form label{display:block;font-weight:600;margin:.75rem 0 .25rem;color:var(--muted)}
input[type=radio],input[type=checkbox]{margin-right:.35rem}
input[type=radio]+label,input[type=checkbox]+label{
    display:inline-block;font-weight:400;margin:0 .75rem .25rem .25rem
}
input[type=date],input[type=week],input[type=email],input[type=text],input[type=password],select{
    width:100%;padding:.55rem .75rem;border:1px solid var(--clr-border);
    border-radius:10px;background:var(--clr-bg-body);color:var(--clr-text);
    caret-color:var(--clr-text)
}
input:focus,select:focus{
    outline:2px solid color-mix(in srgb,var(--clr-accent) 45%,transparent);
    outline-offset:1px
}

/* Autofill styling */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,
select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus,select:-webkit-autofill:active{
    -webkit-text-fill-color:var(--tz-fg)!important;
    -webkit-box-shadow:0 0 0 1000px var(--tz-input) inset!important;
    box-shadow:0 0 0 1000px var(--tz-input) inset!important;
    background-color:var(--tz-input)!important;background-image:none!important;
    color:var(--tz-fg)!important;border-color:var(--tz-hairline)!important;
    transition:background-color 9999s ease-out 0s!important;
    caret-color:var(--tz-fg)!important
}
input::-webkit-credentials-auto-fill-button,input::-webkit-list-button{
    visibility:hidden!important;display:none!important
}
@-webkit-keyframes autofill{to{color:var(--tz-fg)!important;background:var(--tz-input)!important}}
input:-webkit-autofill{-webkit-animation-name:autofill!important;-webkit-animation-fill-mode:both!important}

/* Select styling */
select,.sync-form select,form select{background-image:none!important}
select:not([multiple]),.sync-form select:not([multiple]),form select:not([multiple]){
    appearance:none!important;
    -webkit-appearance:none!important;
    padding-right:2.25rem!important;
    background-image:var(--tizz-select-arrow-img)!important;
    background-repeat:no-repeat!important;
    background-position:right .75rem center!important;
    background-size:16px 16px!important;color-scheme:light dark
}
select[multiple]{padding-right:.75rem}
select:disabled{opacity:.7;cursor:not-allowed}
select option,select optgroup{color:var(--clr-text);background:var(--clr-bg-body)}
select::-ms-expand{display:none}

/* ===== BUTTONS ===== */
.btn{
    display:inline-block;cursor:pointer;border:1px solid var(--clr-accent);
    background:var(--clr-accent);color:#fff;padding:.6rem 1rem;
    border-radius:10px;font-size:.875rem;font-weight:600;
    transition:background .15s,box-shadow .15s;text-decoration:none;
    box-shadow:0 1px 0 rgba(255,255,255,.15) inset
}
.btn:hover{background:var(--clr-accent-hover);box-shadow:0 2px 10px rgba(0,0,0,.12)}
.btn-sm{padding:.25rem .65rem;font-size:.75rem}
.btn[disabled]{opacity:.6;cursor:not-allowed;pointer-events:none}
.btn-outline-secondary{
    background:var(--surface-2);border:1px solid var(--stroke-strong);color:var(--clr-text)
}
.btn-outline-secondary:hover{background:color-mix(in srgb,var(--clr-bg-soft) 70%,transparent)}

/* ===== SYNC LAYOUT ===== */
.sync-flex{display:flex;gap:2rem;padding:1.5rem 2rem;align-items:flex-start}
.sync-form{
    flex:0 0 350px;background:var(--surface-1);
    border:1px solid var(--stroke-strong);border-radius:var(--radius-xl);
    padding:1.25rem 1rem;box-shadow:var(--shadow-lg);
    position:static;height:auto;max-height:none;overflow:visible;
    scrollbar-gutter:stable both-edges
}
.sync-form.is-blocked{position:sticky;top:6rem;isolation:isolate}
.sync-form.is-blocked::after{
    content:"";position:absolute;inset:0;border-radius:var(--radius);
    background:rgba(0,0,0,.06);z-index:5;pointer-events:all
}
:root.dark .sync-form.is-blocked::after{background:rgba(255,255,255,.08)}
.sync-form.is-blocked>*{opacity:1;filter:none}
.sync-form #runBtn{display:block;width:100%;padding:.55rem .75rem;font-size:1rem;margin:.75rem 0 0}
.sync-results{flex:1 1 auto;min-width:0}

/* ===== TABLES ===== */
.sync-table{width:100%;border-collapse:collapse;font-size:.875rem}
.sync-table thead{background:var(--clr-bg-soft);position:sticky;top:0;z-index:1}
.sync-table th,.sync-table td{
    padding:.6rem .75rem;border-bottom:1px solid var(--clr-border);
    text-align:left;white-space:nowrap
}
.sync-table tbody tr:nth-child(even){background:rgba(0,0,0,.03)}
:root.dark .sync-table tbody tr:nth-child(even){background:rgba(255,255,255,.03)}
.sync-table td:last-child{max-width:240px;overflow:hidden;text-overflow:ellipsis}
.sync-table td:nth-child(5){font-weight:600}
.sync-table td:nth-child(5)[data-status="success"]{color:forestgreen}
.sync-table td:nth-child(5)[data-status="failed"]{color:crimson}
.sync-table .num{text-align:right;font-variant-numeric:tabular-nums}

/* Results pane */
.results-pane{
    position:relative;min-height:220px;overflow:auto;
    scrollbar-gutter:stable both-edges
}
.results-pane table{
    width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem;
    border:1px solid var(--clr-border);border-radius:10px;overflow:hidden
}
.results-pane thead th{
    position:sticky;top:0;z-index:1;background:var(--clr-bg-soft);
    text-align:left;font-weight:600
}
.results-pane th,.results-pane td{
    padding:.6rem .75rem;border-bottom:1px solid var(--clr-border);white-space:nowrap
}
.results-pane tbody tr:nth-child(even){background:rgba(0,0,0,.03)}
:root.dark .results-pane tbody tr:nth-child(even){background:rgba(255,255,255,.03)}
.results-pane td:nth-child(4){text-align:right;font-variant-numeric:tabular-nums}
.results-pane td:nth-child(5){font-weight:600}
.results-pane td:nth-child(6){white-space:normal;word-break:break-word}
.results-pane .sync-table thead th:nth-child(4),
.results-pane .sync-table tbody td:nth-child(4),
.results-pane .sync-table tfoot th:nth-child(1),
.results-pane .sync-table tfoot th:nth-child(2),
.results-pane .sync-table tfoot th:nth-child(3){
    text-align:center;font-variant-numeric:tabular-nums
}

/* Sync accounts display guard */
.results-pane .sync-accounts-display{
    background:var(--clr-bg-elevated,var(--clr-bg-soft));
    border:1px solid var(--clr-border);border-radius:12px
}
.results-pane .sync-accounts-display .sync-account-box{
    background:var(--clr-bg-body);border:1px solid var(--clr-border);border-radius:8px
}

/* Results wait spinner */
.results-wait{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:transparent!important;pointer-events:all;z-index:9999
}
.results-wait[hidden]{display:flex!important;visibility:hidden!important;opacity:0!important}
.results-wait .spinner{
    width:28px;height:28px;border-radius:50%;border:3px solid var(--clr-border);
    border-top-color:var(--clr-accent);animation:spin .8s linear infinite;margin:0
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Zoho simulation table */
.zoho-sim{margin-top: 0}
.zoho-sim-table{width:100%;border-collapse:collapse;font-size:.875rem}
.zoho-sim-table thead th{
    position:sticky;top:0;z-index:1;background:var(--clr-bg-soft);
    border-bottom:1px solid var(--clr-border);padding:.45rem .5rem;text-align:center
}
.zoho-sim-table th:first-child,.zoho-sim-table td:first-child{text-align:left}
.zoho-sim-table td,.zoho-sim-table th{
    border-bottom:1px solid var(--clr-border);padding:.5rem .6rem;white-space:nowrap
}
.zoho-sim-table td:last-child{white-space:normal;word-break:break-word}
.zoho-sim-table .num,.zoho-sim-table td.num,.zoho-sim-table th.num{
    text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap
}
.zoho-sim-table .strong{font-weight:600}
.zoho-sim-table .accent{color:#d9534f}
.zoho-sim-table .proj-row{background:rgba(0,0,0,.02)}
:root.dark .zoho-sim-table .proj-row{background:rgba(255,255,255,.04)}
.zoho-sim-table .task-row .task-dot{
    display:inline-block;width:.55rem;height:.55rem;
    border:1px solid var(--clr-border);border-radius:50%;
    margin-right:.5rem;vertical-align:middle
}
.zoho-sim-table .twisty{
    width:18px;height:18px;border:none;background:transparent;
    cursor:pointer;margin-right:.25rem
}
.zoho-sim-table .twisty::before{
    content:"";display:block;width:0;height:0;
    border-left:6px solid currentColor;
    border-top:4px solid transparent;border-bottom:4px solid transparent;margin:auto
}
.zoho-sim-table .proj-row.collapsed .twisty::before{transform:rotate(-90deg)}
.zoho-sim-table .col-date{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.zoho-sim-table .col-date .dow{font-size:.7rem;opacity:.8}

/* Editable table */
.editable-table .editable-cell{cursor:pointer;position:relative;max-width:100%}
.editable-table .editable-cell:hover{background:transparent!important;outline:none!important}
.editable-table .editable-cell:focus{outline:none!important}
.editable-table td.is-editing{position:relative;text-align:center!important; width:100px!important}
.editable-table td.is-editing::after{
    content:"";position:absolute;inset:2px;z-index:0;
    background:color-mix(in srgb,var(--clr-accent) 18%,transparent);
    border:1px solid color-mix(in srgb,var(--clr-accent) 55%,transparent);
    border-radius:6px;pointer-events:none
}
.editable-table td.is-editing .cell-editor{
    position:relative;z-index:1;display:inline-block;width:auto!important;
    min-width:1.5ch;padding:0 .2rem;border:none!important;
    background:transparent!important;color:inherit!important;
    font:inherit!important;text-align:center;outline:none!important;
    box-shadow:none!important;appearance:none!important
}
.editable-table .total-cell{pointer-events:none}

/* ===== CALENDAR ===== */
.cal{width:100%;user-select:none}
.cal-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.cal-title{flex:1 1 auto;text-align:center;font-weight:600;text-transform:capitalize;min-width:0}
.cal-nav{white-space:nowrap}
.cal-grid{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.875rem}
.cal-grid th,.cal-grid td{
    padding:.3rem;text-align:center;border-bottom:1px solid var(--clr-border);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    width: 100px;
}
.cal-grid thead th{
    background:var(--clr-bg-soft);position:sticky;top:0;z-index:1;padding:.25rem .2rem
}
.cal-grid td.muted{color:#889096;opacity:.7}
.cal-grid td .d{
    width:1.9rem;height:1.9rem;line-height:1.9rem;margin:0 auto;border-radius:999px
}
.cal-grid td.day{cursor:pointer}
.cal-grid td.day:hover .d{outline:2px solid var(--clr-accent);outline-offset:2px}
.cal-grid td.in-range{background:rgba(13,110,253,.08)}
:root.dark .cal-grid td.in-range{background:rgba(72,148,255,.12)}
.cal-grid td.start .d,.cal-grid td.end .d{background:var(--clr-accent);color:#fff}
.cal-grid .wk{width:2.6rem}
.wkbtn{
    border:1px solid var(--clr-border);background:transparent;
    border-radius:999px;padding:.15rem .5rem;cursor:pointer;
    overflow:hidden;text-overflow:ellipsis
}
.wkbtn:hover{background:var(--clr-bg-soft)}

/* Flatpickr styling */
.flatpickr-calendar.inline{
    width:100%;margin-top:.5rem;background:var(--clr-bg-body);
    border:1px solid var(--clr-border);border-radius:var(--radius);box-shadow:var(--shadow)
}
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange{
    background:var(--clr-accent);border-color:var(--clr-accent)
}
.flatpickr-months .flatpickr-month{
    height:48px!important;padding:6px 0!important;
    background:var(--clr-bg-body);
    border-bottom:1px solid var(--clr-border);
    color:var(--clr-text)
}
.flatpickr-current-month{
    position:absolute!important;left:0!important;right:0!important;
    width:auto!important;display:block!important;line-height:1.2!important;
    gap:.5rem;padding:.35rem 0
}
.flatpickr-current-month .cur-month{
    flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-weight:600;color:var(--clr-text);display:inline-block!important
}
.flatpickr-current-month .numInputWrapper{flex:0 0 auto;width:6ch}
.flatpickr-current-month input.cur-year{background:transparent;color:var(--clr-text)}
.flatpickr-current-month .flatpickr-monthDropdown-months{
    appearance:none!important;background:transparent!important;
    background-image:none!important;border:0!important;padding:0!important;
    margin:0!important;width:auto!important;font:inherit!important;
    font-weight:600!important;color:var(--clr-text)!important
}
.flatpickr-monthDropdown-months{background:var(--clr-bg-body);color:var(--clr-text)}

/* Dark mode flatpickr */
:root.dark .flatpickr-calendar{
    background:var(--clr-bg-body)!important;border:1px solid var(--clr-border)!important;
    box-shadow:var(--shadow)!important;color:var(--clr-text)!important
}
:root.dark .flatpickr-months .flatpickr-month{
    background:transparent!important;color:var(--clr-text)!important;
    border-bottom:1px solid var(--clr-border)!important
}
:root.dark .flatpickr-current-month .cur-month,
:root.dark .flatpickr-current-month input.cur-year,
:root.dark .numInput.cur-year{color:var(--clr-text)!important}
:root.dark .flatpickr-weekdays{
    background:transparent!important;border-bottom:1px solid var(--clr-border)!important
}
:root.dark .flatpickr-weekday{color:#aeb4bd!important;font-weight:600!important}
:root.dark .flatpickr-days{background:transparent!important}
:root.dark .flatpickr-day{color:var(--clr-text)!important;border-color:transparent!important}
:root.dark .flatpickr-day:hover{background:rgba(72,148,255,.12)!important}
:root.dark .flatpickr-day.prevMonthDay,
:root.dark .flatpickr-day.nextMonthDay,
:root.dark .flatpickr-day.disabled{color:#707782!important}
:root.dark .flatpickr-day.inRange{
    background:rgba(72,148,255,.18)!important;box-shadow:none!important;
    color:var(--clr-text)!important
}
:root.dark .flatpickr-day.startRange,
:root.dark .flatpickr-day.endRange,
:root.dark .flatpickr-day.selected{
    background:var(--clr-accent)!important;color:#fff!important;
    border-color:var(--clr-accent)!important
}
:root.dark .flatpickr-day.today{
    border-color:var(--clr-accent)!important;color:var(--clr-text)!important
}
:root.dark .flatpickr-months .flatpickr-prev-month svg,
:root.dark .flatpickr-months .flatpickr-next-month svg{
    fill:var(--clr-text)!important;opacity:.9!important
}

@media (prefers-color-scheme:dark){
    :root:not(.light):not(.dark) .flatpickr-calendar{
        background:var(--clr-bg-body)!important;border:1px solid var(--clr-border)!important;
        box-shadow:var(--shadow)!important;color:var(--clr-text)!important
    }
    :root:not(.light):not(.dark) .flatpickr-months .flatpickr-month{
        background:transparent!important;color:var(--clr-text)!important;
        border-bottom:1px solid var(--clr-border)!important
    }
    :root:not(.light):not(.dark) .flatpickr-current-month .cur-month,
    :root:not(.light):not(.dark) .flatpickr-current-month input.cur-year,
    :root:not(.light):not(.dark) .numInput.cur-year{color:var(--clr-text)!important}
    :root:not(.light):not(.dark) .flatpickr-weekdays{
        background:transparent!important;border-bottom:1px solid var(--clr-border)!important
    }
    :root:not(.light):not(.dark) .flatpickr-weekday{color:#aeb4bd!important;font-weight:600!important}
    :root:not(.light):not(.dark) .flatpickr-day{
        color:var(--clr-text)!important;border-color:transparent!important
    }
    :root:not(.light):not(.dark) .flatpickr-day:hover{background:rgba(72,148,255,.12)!important}
    :root:not(.light):not(.dark) .flatpickr-day.prevMonthDay,
    :root:not(.light):not(.dark) .flatpickr-day.nextMonthDay,
    :root:not(.light):not(.dark) .flatpickr-day.disabled{color:#707782!important}
    :root:not(.light):not(.dark) .flatpickr-day.inRange{
        background:rgba(72,148,255,.18)!important;box-shadow:none!important;
        color:var(--clr-text)!important
    }
    :root:not(.light):not(.dark) .flatpickr-day.startRange,
    :root:not(.light):not(.dark) .flatpickr-day.endRange,
    :root:not(.light):not(.dark) .flatpickr-day.selected{
        background:var(--clr-accent)!important;color:#fff!important;
        border-color:var(--clr-accent)!important
    }
    :root:not(.light):not(.dark) .flatpickr-day.today{
        border-color:var(--clr-accent)!important;color:var(--clr-text)!important
    }
    :root:not(.light):not(.dark) .flatpickr-months .flatpickr-prev-month svg,
    :root:not(.light):not(.dark) .flatpickr-months .flatpickr-next-month svg{
        fill:var(--clr-text)!important;opacity:.9!important
    }
}

/* ===== ALERTS & MISC ===== */
.alert{
    padding:.6rem .8rem;border:1px solid var(--clr-border);
    border-radius:var(--radius);margin:.5rem 0;
    background:var(--clr-bg-soft);color:var(--clr-text)
}

/* ===== HEADER ===== */
.site-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:.5rem 1rem;border-bottom:1px solid var(--clr-border);
    background:var(--clr-bg-soft);position:sticky;top:0;z-index:1000
}
.site-left{display:flex;align-items:center;gap:.75rem;min-width:0}
.v-sep{
    flex:0 0 1px;width:1px;height:1.1rem;background:var(--clr-border);
    opacity:.9;align-self:center
}
.tool{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}

/* User menu */
.user-menu{position:relative;z-index:1001}
.user-button,.account-top-right{
    display:flex;align-items:center;gap:.4rem;border:1px solid var(--clr-border);
    background:var(--clr-bg-body);color:var(--clr-text);padding:.3rem .6rem;
    border-radius:999px;cursor:pointer
}
.user-button:hover,.account-top-right:hover{background:var(--clr-bg-soft)}
.user-button .chev,.account-top-right .chev{width:14px;height:14px;fill:currentColor;opacity:.7}
.user-dropdown{
    position:absolute;right:0;margin-top:.4rem;min-width:220px;z-index:1002;
    background:var(--clr-bg-body);color:var(--clr-text);
    border:1px solid var(--clr-border);border-radius:10px;
    box-shadow:var(--shadow);padding:.35rem;display:none
}
.user-dropdown.open{display:block}
.user-org{padding:.5rem .6rem}
.user-org-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;opacity:.75}
.user-org-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-sep{height:1px;background:var(--clr-border);margin:.35rem 0}
.user-item{
    display:block;padding:.45rem .6rem;border-radius:8px;
    text-decoration:none;color:inherit
}
.user-item:hover{background:var(--clr-bg-soft)}

/* ===== CARDS & PANELS ===== */
.panel,.card,.form-card{
    background:var(--surface-1);border:1px solid var(--stroke-strong);
    border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:1.25rem
}
.panel .title,.card .title{font-size:1.1rem;font-weight:600;margin:0 0 .75rem}

/* ===== TOOLS GRID ===== */
.tools-hero{display:grid;gap:.6rem;margin:0 0 1rem;padding:1rem}
.tools-hero .title{font-size:1.5rem;font-weight:700}
.tools-hero .lede{max-width:65ch;opacity:.9}
.tools-hero-top{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.tools-controls{margin-top:.25rem}
.tools-controls input,.tools-search input[type=search]{
    width:100%;max-width:420px;padding:.5rem .75rem;
    border:1px solid var(--stroke-strong);border-radius:10px;
    background:var(--clr-bg-body);color:var(--clr-text)
}
.tools-search{display:flex;gap:.5rem;align-items:center}
.tools-search input[type=search]{min-width:260px}
.tools-count{opacity:.7}
.tools-empty{
    display:none;padding:1.25rem;border:1px dashed var(--clr-border);
    border-radius:12px;text-align:center
}
.tools-empty[aria-hidden=false]{display:block}

/* Chips */
.chip-group{
    display:flex;gap:.5rem;overflow:auto;padding:.5rem .25rem .25rem;margin-top:.5rem
}
.chip-group::-webkit-scrollbar{height:8px}
.chip,.segment .chip{
    border:1px solid var(--stroke-strong);background:var(--surface-2);
    border-radius:999px;padding:.35rem .65rem;font-size:.85rem;white-space:nowrap
}
.chip.is-active,.segment .chip.is-active{
    background:color-mix(in srgb,var(--clr-accent) 16%,var(--surface-2));
    border-color:color-mix(in srgb,var(--clr-accent) 40%,var(--stroke-strong))
}
.chip .chip-count{opacity:.75;margin-left:.35rem}

/* Badges */
.badge{
    font-size:.72rem;padding:.15rem .45rem;border-radius:999px;
    border:1px solid color-mix(in srgb,var(--clr-accent) 25%,transparent)
}
.badge.subtle{background:var(--surface-2)}
.badge.price{font-weight:600}
.badge.price.is-free{
    background:color-mix(in srgb,#22c55e 20%,var(--surface-2));
    border-color:color-mix(in srgb,#22c55e 45%,transparent)
}
.badge.price.is-freemium{
    background:color-mix(in srgb,#f59e0b 20%,var(--surface-2));
    border-color:color-mix(in srgb,#f59e0b 45%,transparent)
}
.badge.price.is-paid{
    background:color-mix(in srgb,#ef4444 18%,var(--surface-2));
    border-color:color-mix(in srgb,#ef4444 45%,transparent)
}
.badges{display:flex;flex-wrap:wrap;gap:.35rem;margin:.35rem 0 0}

/* Tool cards */
.tool-card{
    position:relative;display:flex;flex-direction:column;gap:.75rem;padding:1rem;
    border:1px solid var(--stroke-strong);border-radius:12px;
    background:var(--surface-1);color:var(--clr-text)!important;
    box-shadow:var(--shadow-md);overflow:hidden;
    transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
    content-visibility:auto;contain-intrinsic-size:300px 220px
}
.tool-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.1)}
.tool-card:focus-within{outline:2px solid var(--clr-accent);outline-offset:2px}
.tool-card.disabled{opacity:.45}
.tool-card .cover{
    display:block;aspect-ratio:1/1;
    height:calc(var(--tool-base-cover)*var(--tool-scale));
    border-radius:10px;background:var(--surface-2);overflow:hidden
}
.tool-card .cover img{width:100%;height:100%;object-fit:cover;display:block}
.tool-card .noimg{
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:1.1rem;color:var(--muted)
}
.tool-card .logo-wrap{
    display:block;width:56px;height:56px;border-radius:12px;overflow:hidden;
    background:var(--surface-2);border:1px solid var(--stroke-strong)
}
.tool-card .logo{width:100%;height:100%;object-fit:cover}
.tool-card .content{background:inherit;color:inherit;padding:calc(.8rem*var(--tool-scale)) calc(.9rem*var(--tool-scale))}
.tool-card .t,.tool-card .title-row .t{
    font-size:calc(1rem*var(--tool-scale));line-height:1.2;margin:0 0 .4rem
}
.tool-card .d{
    font-size:calc(.9rem*var(--tool-scale));line-height:1.25;margin-top:.25rem;opacity:.9;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.tool-card .meta{display:flex;gap:.5rem;align-items:center}
.tool-card .btn.btn-sm{
    padding:calc(.4rem*var(--tool-scale)) calc(.7rem*var(--tool-scale));
    font-size:calc(.85rem*var(--tool-scale));border-radius:8px
}
.tool-title{font-size:1rem;margin:0}
.tool-title a{color:var(--clr-text);text-decoration:none}
.tool-title a:hover{text-decoration:underline}
.tool-desc{
    margin:.35rem 0 0;color:var(--muted);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
.tool-footer{margin-top:auto;display:flex;justify-content:flex-end}

.cards-grid{
    display:grid;gap:1rem;padding:5px;
    grid-template-columns:repeat(auto-fill,minmax(calc(var(--tool-base-min,220px)*1.3),1fr))
}
.cards-grid.three-per-row{
    grid-auto-flow:row!important;grid-template-rows:none!important;
    grid-auto-columns:unset!important;
    grid-template-columns:repeat(3,minmax(220px,280px));
    gap:1rem;justify-content:center
}
.cards-grid.three-per-row .tool-card{max-width:280px;width:100%}
.cards-grid.three-per-row .tool-card .cover{
    aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:var(--clr-bg-soft)
}

:where(.tool-card a):focus-visible{outline:2px solid var(--clr-accent);outline-offset:2px}

/* ===== PAGINATION ===== */
.pager{display:flex;gap:.4rem;justify-content:center;align-items:center;padding:1rem 0}
.pager .pg{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:2.2rem;height:2.2rem;padding:.25rem .6rem;
    border:1px solid var(--stroke-strong);border-radius:8px;
    background:var(--surface-2);text-decoration:none;color:var(--clr-text)
}
.pager .pg.num.is-current{
    background:color-mix(in srgb,var(--clr-accent) 16%,var(--surface-2));
    border-color:color-mix(in srgb,var(--clr-accent) 40%,var(--stroke-strong));
    font-weight:600
}
.pager .pg.is-disabled{opacity:.5;pointer-events:none}

/* ===== TOOLS SECTIONS ===== */
.tools-subheading{font-size:1.1rem;font-weight:600;margin:1.25rem 0 .75rem;opacity:.8}
.tools-hero.sub .title{font-size:1.1rem;font-weight:600;opacity:.8;margin:.5rem 0 .5rem}
.tools-band{
    background:var(--clr-bg-soft);border-top:1px solid var(--clr-border);
    border-bottom:1px solid var(--clr-border);margin-top:2rem
}
.tools-band .band-inner{max-width:1200px;margin:0 auto;padding:1rem 1.25rem 1.5rem}
.tools-divider{position:relative;height:96px;margin:1.5rem 0}
.tools-divider::before{
    content:"";position:absolute;inset:0;left:50%;transform:translateX(-50%);
    width:100vw;opacity:.35;
    background:linear-gradient(90deg,color-mix(in srgb,var(--clr-accent) 18%,var(--clr-bg-body)),var(--clr-bg-body) 65%)
}
:root.dark .tools-divider::before{
    background:linear-gradient(90deg,color-mix(in srgb,var(--clr-accent) 28%,var(--clr-bg-body)),var(--clr-bg-body) 65%);
    opacity:.25
}
.tools-section{width:100%}
.tools-available{background:linear-gradient(90deg,rgba(72,148,255,.08),transparent)}
.tools-upcoming{background:linear-gradient(90deg,rgba(255,225,255,.08),transparent)}
:root.dark .tools-available{background:linear-gradient(90deg,rgba(72,148,255,.12),transparent)}
:root.dark .tools-upcoming{background:linear-gradient(90deg,rgba(0,0,0,.12),transparent)}
.tools-align{max-width:var(--tools-total-width);margin:0 auto}
.tools-hero.align,.tools-hero.sub.align{margin-left:0;margin-right:0}
.tools-hero.align .title,.tools-hero.align .lede{text-align:left}

/* ===== FOOTER ===== */
.micro-footer{margin-top:auto;flex-shrink:0}
.micro-footer-wrap{
    max-width:1200px;margin:0 auto;padding:.5rem 1rem;
    text-align:center;font-size:.875rem;color:var(--clr-text)
}
.micro-footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.micro-footer .sep{margin:0 .5rem;opacity:.6}
.micro-footer .copy{opacity:.85}

/* ===== AUTH PAGES ===== */
.auth-block{width:400px;max-width:90%}
.auth-center,.register-center{
    display:flex;align-items:center;justify-content:center;
    min-height:100vh;background:transparent
}
.register-form{
    --register-form-w:820px;
    width:min(var(--register-form-w),95vw);background:var(--surface-1);
    border:1px solid var(--stroke-strong);border-radius:var(--radius-xl);
    padding:2.25rem 2rem;box-shadow:var(--shadow-lg)
}
.register-form label{font-size:1.05rem}
.register-form input,.register-form select{
    font-size:1.05rem;padding:.65rem .9rem;width:100%;border-radius:10px
}
.register-form .btn{font-size:1.05rem;padding:.75rem 1.1rem;width:100%;margin-top:.75rem}

.settings-form-lg{width:760px;max-width:95vw}
.settings-form-lg .btn:not(.btn-sm),.settings-form-lg .btn-outline-secondary:not(.btn-sm){
    box-sizing:border-box;height:48px;font-size:1rem;line-height:1.2;
    padding:0 1rem;display:inline-flex;align-items:center;justify-content:center;
    border-width:2px
}
.settings-form-lg .actions-eq>.btn,.settings-form-lg .actions-eq>.btn-outline-secondary{flex:1 1 0}
.select-xl{
    width:100%!important;min-height:48px;padding:.8rem .2rem!important;
    font-size:1.05rem;border-radius:14px;line-height:1.2;background-color:inherit
}
.select-xl+.invalid-feedback,form label+.select-xl{margin-top:.25rem}
input[name="timesheet_sync[account_email]"],input[name="sync_defaults[task_misc]"],input[name*="[task_name]"]{
    width:100%;max-width:610px;min-height:48px;padding:.8rem .95rem;
    font-size:1.05rem;border-radius:14px
}

body.settings-page,body.auth-gradient{
    background:linear-gradient(90deg,color-mix(in srgb,var(--clr-accent) 18%,var(--clr-bg-body)),var(--clr-bg-body) 65%)
}
:root.dark body.settings-page,:root.dark body.auth-gradient{
    background:linear-gradient(90deg,color-mix(in srgb,var(--clr-accent) 28%,var(--clr-bg-body)),var(--clr-bg-body) 65%)
}
body.settings-page .auth-center{background:transparent}

/* ===== HOME PAGE ===== */
.home :where(h1,h2,h3,h4){color:var(--clr-text)}
.home .link{color:var(--clr-accent);text-decoration:none}
.home .link:hover{text-decoration:underline}
.home-hero{
    position:relative;isolation:isolate;min-height:800px;
    background:linear-gradient(135deg,color-mix(in oklab,var(--clr-accent) 28%,transparent),transparent 55%),var(--clr-bg-soft)
}
:root.dark .home-hero{
    background:linear-gradient(135deg,color-mix(in oklab,var(--clr-accent) 36%,transparent),transparent 55%),var(--clr-bg-soft)
}
.home-hero-inner{
    display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;
    align-items:center;padding:3rem 1rem
}
.home-hero-copy{width:660px}
.home-hero-title{
    font-size:clamp(4.8rem,3.5vw,2.6rem);line-height:1.10;
    margin:0 0 .6rem;font-weight:800;letter-spacing:.01em
}
.home-hero-title span{font-size:clamp(3.8rem,3.5vw,2.6rem);opacity:.9}
.home-hero-lede{font-size:clamp(1rem,1.6vw,1.125rem);max-width:58ch;opacity:.9}
.home-hero-cta{display:flex;gap:.6rem;margin:2rem 0 1rem;flex-wrap:wrap}
.home-hero-points{
    display:flex;gap:1rem;flex-wrap:wrap;color:var(--muted);
    font-size:.92rem;margin:.5rem 0 0;padding:0;list-style:none
}
.home-hero-visual{display:grid;place-items:center}
.home-hero-card{
    width:min(520px,90%);border:1px solid var(--stroke-strong);
    background:var(--surface-1);border-radius:18px;
    box-shadow:var(--shadow-lg);padding:1rem
}
.home-hero-img-wrap{
    width:760px;height:478px;overflow:hidden;
    border-radius:18px;box-shadow:var(--shadow-lg)
}
.home-hero-image{
    width:100%;height:100%;object-fit:cover;object-position:center;display:block
}
.home-kpi{display:flex;align-items:baseline;gap:.5rem;margin:.3rem 0}
.home-kpi-metric{font-weight:800;font-size:1.4rem}
.home-kpi-label{opacity:.75}
.home-mini-chart{
    margin-top:.6rem;height:120px;border:1px dashed var(--stroke-strong);
    border-radius:12px;display:grid;place-items:center;opacity:.9
}
.home-hero-glow{
    position:absolute;inset:auto -20% -25% -20%;height:320px;
    filter:blur(60px);opacity:.25;pointer-events:none;
    background:radial-gradient(60% 60% at 50% 0%,color-mix(in srgb,var(--clr-accent) 35%,transparent),transparent 70%)
}
:root.dark .home-hero-glow{opacity:.35}
.home-trust{
    border-top:1px solid var(--clr-border);border-bottom:1px solid var(--clr-border);
    background:var(--clr-bg-body)
}
.trust-kicker{text-align:center;opacity:.8;margin:.9rem 0 .35rem}
.trust-logos{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;padding:0 0 1rem}
.logo-pill{
    border:1px solid var(--clr-border);background:var(--surface-2);
    border-radius:999px;padding:.35rem .7rem;font-weight:600;opacity:.9
}
.home-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.5rem auto}
.home-card{border:1px solid var(--stroke-strong)}
.home-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin:1.5rem auto}
.home-steps .step{
    border:1px solid var(--stroke-strong);background:var(--surface-1);
    border-radius:14px;box-shadow:var(--shadow-md);padding:.9rem
}
.home-steps .step .n{
    width:28px;height:28px;border-radius:999px;display:inline-flex;
    align-items:center;justify-content:center;border:1px solid var(--clr-border);
    background:var(--surface-2);font-weight:700;margin-bottom:.4rem
}
.home-steps .step h5{margin:.1rem 0 .25rem;font-size:1rem}
.home-steps .step p{margin:0;opacity:.9}

/* ===== MISC COMPONENTS ===== */
.field-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem}
.segment{display:flex;gap:.4rem}
.avatars{display:flex;gap:.35rem;align-items:center}
.avatars .avatar{
    width:30px;height:30px;border-radius:999px;overflow:hidden;
    border:2px solid var(--surface-1);box-shadow:var(--shadow-md)
}
.avatars .more{
    display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:999px;background:var(--surface-2);
    border:1px solid var(--stroke-strong);font-size:.8rem;color:var(--muted)
}
.upload-box{
    background:var(--surface-2);border:1px dashed var(--stroke-strong);
    border-radius:12px;padding:.75rem
}
.file-row{
    display:flex;align-items:center;gap:.5rem;justify-content:space-between;
    padding:.4rem .5rem;border-radius:8px
}
.file-row:hover{background:color-mix(in srgb,var(--clr-accent) 10%,transparent)}
.progress{height:6px;width:100%;border-radius:999px;background:rgba(127,127,127,.25);overflow:hidden}
.progress>i{display:block;height:100%;width:40%;background:var(--clr-accent);border-radius:999px}
.tools-cta{margin:0 2rem 2rem;display:grid;gap:1rem;grid-template-columns:1fr 1fr;align-items:center}
.tools-cta .title{margin:0 0 .25rem}
.tools-cta .newsletter{display:flex;gap:.5rem}
.tools-cta .newsletter input[type=email]{
    flex:1;border-radius:10px;padding:.55rem .75rem;
    border:1px solid var(--stroke-strong);background:var(--surface-2);color:var(--clr-text)
}

/* ===== RESPONSIVE ===== */
@media (max-width:1200px){
    .home-grid{grid-template-columns:repeat(2,1fr)}
    .home-steps{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
    :root{--tools-cols:2}
    .home-hero-inner{grid-template-columns:1fr;padding:2.25rem 1rem}
    .cards-grid.three-per-row{grid-template-columns:repeat(2,minmax(220px,280px))}
}
@media (max-width:900px){
    .sync-flex{flex-direction:column}
    .sync-form{width:100%}
    .tools-cta{grid-template-columns:1fr}
}
@media (max-width:720px){
    .cards-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
    .field-row{grid-template-columns:1fr}
}
@media (max-width:640px){
    #flash-wrap{right:10px!important;left:10px!important;max-width:none!important}
}
@media (max-width:620px){
    .home-grid,.home-steps{grid-template-columns:1fr}
}
@media (max-width:520px){
    :root{--tools-cols:1}
    .cards-grid.three-per-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
    .tool-card{transition:none}
    .tool-card:hover{transform:none}
}
.table-scroll-wrapper {
    overflow-x: auto;
    margin-bottom: 1rem;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
}

.table-scroll-wrapper .zoho-sim-table {
    min-width: 100%;
}

/* header_compat.css — skins the OLD header markup to match new header look */
/* Uses the same tokens from app.css: --clr-bg-body, --clr-bg-soft, --clr-text, --clr-border, --clr-accent */

.site-header{
    position: sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem;
    padding:.6rem 1rem;
    background: color-mix(in oklab, var(--clr-bg-body) 92%, transparent);
    border-bottom:1px solid color-mix(in srgb, var(--clr-border) 30%, transparent);
    backdrop-filter:saturate(1.1) blur(6px);
}
@media (min-width: 1024px){ .site-header{ padding:.75rem 1.25rem; } }

/* Dark theme - Unified selectors */
:root[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-header,
body[data-theme="dark"] .site-header,
[data-theme="dark"] .site-header,
.dark .site-header,
:root.dark .site-header,
html.dark .site-header{
    background: color-mix(in oklab, var(--clr-bg-body) 70%, transparent);
}

.site-left, .site-right{ display:flex; align-items:center; gap:.6rem; }
.site-left{ min-width:0; }
.brand{
    font-family:"Sora", system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
    font-weight:800; letter-spacing:.2px; text-decoration:none;
    color:var(--clr-text); font-size:1.15rem; line-height:1;
    padding:.35rem .55rem; border-radius:.5rem;
}
.brand:hover{ background:var(--clr-bg-soft); }

/* User menu */
.user-menu{ position:relative; }
.account-top-right{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.45rem .6rem; border-radius:.6rem;
    border:1px solid var(--clr-border);
    background:var(--clr-bg-body); color:var(--clr-text);
    cursor:pointer;
}
.account-top-right .chev{ width:18px; height:18px; opacity:.7; }

.user-dropdown{
    position:absolute; right:0; top:calc(100% + 8px);
    min-width:240px; border:1px solid var(--clr-border); border-radius:.6rem;
    background:var(--clr-bg-body); color:var(--clr-text);
    box-shadow:0 8px 24px rgba(0,0,0,.12); padding:.5rem; display:none;
}
.user-dropdown.open{ display:block; }
.user-org{ padding:.5rem .5rem .25rem; }
.user-org-label{ font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; opacity:.7; }
.user-org-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.user-sep{ height:1px; background:var(--clr-border); margin:.35rem 0; }

.user-item{
    display:flex; align-items:center; gap:.5rem;
    padding:.45rem .5rem; border-radius:.45rem;
    color:inherit; text-decoration:none;
}
.user-item:hover{ background:var(--clr-bg-soft); }

.text-ellipsis-withoutWidth{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.max-width{ max-width:18ch; }

/* Light theme explicit - Unified selectors */
:root[data-theme="light"] .site-header,
html[data-theme="light"] .site-header,
body[data-theme="light"] .site-header,
[data-theme="light"] .site-header,
.light .site-header,
:root.light .site-header,
html.light .site-header{
    background: color-mix(in oklab, var(--clr-bg-body) 92%, transparent);
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]):not(.light):not(.dark) .site-header,
    html:not([data-theme]):not(.light):not(.dark) .site-header,
    body:not([data-theme]):not(.light):not(.dark) .site-header {
        background: color-mix(in oklab, var(--clr-bg-body) 0%, transparent);
    }
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]):not(.light):not(.dark) .site-header,
    html:not([data-theme]):not(.light):not(.dark) .site-header,
    body:not([data-theme]):not(.light):not(.dark) .site-header {
        background: color-mix(in oklab, var(--clr-bg-body) 92%, transparent);
    }
}


/* ===== FORM UTILITIES ===== */
.tz-help {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    margin-top: 0.375rem;
}

.form-block {
    margin-bottom: 0;
}

/* ===== CALENDAR SELECTOR ===== */
.calendar-selector {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0.75rem;
}

.calendar-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--clr-bg-body);
    position: relative;
}

.calendar-item:hover {
    border-color: color-mix(in srgb, var(--clr-accent) 60%, var(--clr-border));
    background: var(--clr-bg-soft);
}

.calendar-item.is-selected {
    border-color: color-mix(in srgb, var(--clr-accent) 70%, var(--clr-border));
    background: color-mix(in srgb, var(--clr-accent) 6%, var(--clr-bg-body));
    font-weight: 600;
}

.calendar-item input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.calendar-label {
    flex: 1;
    font-size: 0.875rem;
}

.calendar-checkmark {
    margin-left: auto;
    color: var(--clr-accent);
    opacity: 0;
    transition: opacity 0.15s ease;

    background: color-mix(in srgb, #22B57C 12%, var(--clr-bg-body));
}

/* Selected calendars summary */
.selected-calendars-summary {
    margin-top: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: var(--clr-bg-soft);
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--clr-text-muted);
}

.selected-calendars-summary strong {
    color: var(--clr-text);
    font-weight: 600;
}

:root.dark .selected-calendars-summary {
    background: rgba(255,255,255,.03);
}


/* Make header container widths align with page container if you use tz-container globally */
.tz-main > .tz-container, .tz-footer .tz-container { max-width:100%; margin:0 auto; padding:20px 1rem; }

/* ===== SYNC PAGE CONSOLIDATED STYLES ===== */

/* Simulation actions */
.sim-actions {
    margin: 0.75rem 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Template save button */
.btn-template {
    background: #22B57C;
    border: 1px solid #22B57C;
    color: #fff;
}

.btn-template:hover:not([disabled]) {
    filter: brightness(0.95);
}

.btn-template[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

:root.dark .btn-template {
    background: #1FA971;
    border-color: #1FA971;
}

/* Tooltip wrapper for disabled buttons */
.btn-wrapper {
    position: relative;
    display: inline-block;
    cursor: not-allowed;
}

.btn-wrapper:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--clr-bg-body);
    color: var(--clr-text);
    border: 1px solid var(--clr-border);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 400;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 1000;
    margin-bottom: 0.5rem;
    pointer-events: none;
}

:root.dark .btn-wrapper:hover::after {
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

/***** FROM TO BOXES *****/

/* ===== SYNC ACCOUNTS DISPLAY (FROM/TO BOXES) ===== */

.sync-accounts-display {
    background: var(--clr-bg-elevated, var(--clr-bg-soft));
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.sync-flow-indicator {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.sync-account-box {
    flex: 1;
    background: var(--clr-bg-body);
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
}

.sync-from {
    border-left: 3px solid var(--clr-accent, #0d6efd);
}

.sync-to {
    border-right: 3px solid #22B57C;
}

.sync-account-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--clr-text-muted, rgba(0,0,0,.65));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.sync-account-provider {
    font-weight: 600;
    color: var(--clr-text);
    margin-bottom: 0.25rem;
}

.sync-account-email {
    font-size: 0.875rem;
    color: var(--clr-text-muted, rgba(0,0,0,.65));
}

.sync-flow-arrow {
    flex: 0 0 auto;
    color: var(--clr-text-muted, rgba(0,0,0,.65));
    display: flex;
    align-items: center;
    justify-content: center;
}

.sync-accounts-note {
    font-size: 0.875rem;
    color: var(--clr-text-muted, rgba(0,0,0,.65));
    text-align: center;
    margin: 0;
}

.sync-accounts-note a {
    color: var(--clr-accent);
    text-decoration: underline;
}

/* Dark theme overrides */
:root.dark .sync-account-label,
:root.dark .sync-account-email,
:root.dark .sync-accounts-note,
html.dark .sync-account-label,
html.dark .sync-account-email,
html.dark .sync-accounts-note {
    color: var(--clr-text-muted, rgba(255,255,255,.7));
}

:root.dark .sync-flow-arrow,
html.dark .sync-flow-arrow {
    color: var(--clr-text-muted, rgba(255,255,255,.7));
}

/* Mobile responsive */
@media (max-width: 640px) {
    .sync-flow-indicator {
        flex-direction: column;
        gap: 0.5rem;
    }

    .sync-flow-arrow {
        transform: rotate(90deg);
    }
}

.sync-table tbody tr.billable-row {
    background: color-mix(in oklab, #22B57C, transparent 82%);
}