:root{ 
    --brand: #059669;
    --brand-600: #047857; 
    --brand-50: #ecfdf5;
    --ring: rgba(5,150,105,.35);
}
html,body{
    height:100%
}
body{
    font-family:'Inter',system-ui,-apple-system, 'Segoe UI' ,Roboto,sans-serif;
    -webkit-font-smoothing: antialiased; 
    background-color: #f8fafc;
    color:#0f172a;
}
.thin-scroll::-webkit-scrollbar{ width:8px;height:8px }
.thin-scroll::-webkit-scrollbar-thumb{background: #cbd5e1; border-radius:999px}
.thin-scroll::-webkit-scrollbar-thumb:hover{background: #94a3b8}
.thin-scroll::-webkit-scrollbar-track{background: transparent}

.focus-ring:focus-visible, 
input:focus-visible, 
select:focus-visible, 
textarea:focus-visible, 
button:focus-visible{
    outline: none; box-shadow:0 0 0 3px var(--ring);
    border-color:var(--brand);
}

.nav-item{
    display:flex;align-items: center; 
    gap:.75rem; padding:.5rem .75rem; 
    border-radius: .5rem; color: #334155; font-size: .875rem; cursor: pointer; 
    transition: background-color 120ms ease, color 120ms ease; 
}
.nav-item:hover{background-color: #f1f5f9; color: #0f172a}
.nav-item.active{
    background-color:var(--brand-50);
    color:var(--brand-600);
    font-weight:500;
}
.nav-item .nav-icon{
    width:18px;height:18px;flex-shrink:0
}
.nav-item .nav-badge {
    margin-left:auto; font-size:10px; font-weight:600; background: #fef3c7;
    color:#92400e;padding:1px 6px; border-radius:999px; 
}
.sidebar-rail{
    width:64px;flex-direction:column; background: white;
    border-right:1px solid #e2e8f0; 
    flex-shrink:0;padding: .75rem 0; align-items: center; 
}
.sidebar-panel{
    width:240px; flex-direction: column; background: white; 
    border-right: 1px solid #e2e8f0; flex-shrink:0;
}
.rail-logo{
    margin-bottom:.5rem; 
}
.rail-divider{
    width: 28px;height:1px;background: #e2e8f0;margin:.25rem auto .5rem;
}
.rail-items{
    display:flex; flex-direction:column; gap:4px; align-items:center;width:100%; 
}
.rail-bottom{
    margin-top:auto; display: flex; flex-direction: column; 
    gap: 4px; align-items: center; width: 100%; padding-top: .5rem; border-top: 1px solid #e2e8f0; 
}
.rail-btn {
    display: inline-flex; align-items: center; justify-content: center; 
    width: 44px; height: 44px; border-radius: 10px; color: #64748b; 
    position: relative; transition: background-color 120ms ease, color 120ms ease;
    color: #0f172a
}
.rail-btn.active{
    background-color:var(--brand-50); 
    color:var(--brand-600); 
}
.rail-btn.active::before{
    content:""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; background: var(--brand); border-radius: 0 3px 3px 0; 
}
.rail-btn:hover{
    background-color: #f1f5f9;
}
.rail-btn .rail-dot{
    position:absolute; top:8px; right: 8px;
    width: 6px; height: 6px; border-radius:999px; 
    background: var(--brand); display:none; 
}
.rail-btn.active .rail-dot{
    display:block
}

.panel-header{
    padding:1rem 1rem .5rem;display: flex; 
    align-items:center; justify-content: space-between; 
    gap: .5rem; 
}
.panel-title{
    font-size:11px; font-weight:600; letter-spacing:.06em; 
    color: #475569; text-transform: uppercase; 
} 
.panel-section{
    padding: .25rem .5rem .5rem; 
}
.panel-section + .panel-section { 
    border-top:1px solid #f1f5f9
}
.panel-section.is-collapsed .panel-section-items{
    display: none
}
.panel-section-header{
    display:flex;align-items:center; justify-content: space-between; 
    padding: .625rem .5rem .5rem; cursor:pointer; 
}
.panel-section-title{
    font-size: 11px; font-weight: 600; letter-spacing: .06em; color: #94a3b8; text-transform: uppercase; 
}
.panel-section-toggle{
    width:18px;height:18px; display: inline-flex; align-items: center; 
    justify-content: center; border-radius: 4px; color: #94a3b8; transition: background-color 120ms;
}
.panel-section-toggle:hover{
    background: #f1f5f9; color: #0f172a
}
.ws-card{
    display: flex; align-items: center; gap: .625rem; 
    padding: .625rem .75rem; 
    border: 1px solid #e2e8f0; 
    border-radius: .625rem;
    background: white;
    transition: border-color 120ms, background-color 120ms;
}
.ws-card:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.btn-primary{
    display: inline-flex; align-items: center; justify-content: center; gap:0.5rem;
    background-color:var(--brand);color: white; font-weight:500;
    padding:0.625rem 1rem; border-radius: .5rem;
    transition: background-color 120ms ease, transform 120ms ease;
}
.btn-primary:hover { background-color:var(--brand-600) } 
.btn-primary:active{transform:translateY(1px)}
.btn-primary[disabled] {opacity:.6; cursor: not-allowed}

.btn-ghost{
    display:inline-flex; align-items:center; gap:.5rem; 
    color: #334155; padding: .5rem .75rem; border-radius: .5rem; 
    transition: background-color 120ms ease; 
}
.btn-ghost:hover{
    background-color: #f1f5f9;
}

.btn-outline{
    display:inline-flex; align-items:center; gap:.5rem; 
    border:1px solid #e2e8f0; background-color: white;color:#0f172a;
    padding: .5rem .875rem; border-radius:.5rem;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.btn-outline:hover {
    background-color: #f8fafc; border-color:#cbd5e1;
}
.btn-danger{
    display: inline-flex;align-items:center; gap:.5rem; 
    background-color:#dc2626; color: white; font-weight:500; padding: .5rem .875rem; border-radius: .5rem; 
    transition: background-color 120ms ease; 
} 
.btn-danger:hover{background-color: #b91c1c}

.card{
    background-color: white; 
    border:1px solid #e2e8f0;border-radius: .75rem; padding: 1.25rem; transition: box-shadow 120ms ease, border-color 120ms ease; 
}
.card:hover{
    box-shadow:0 1px 3px rgba(15,23,42,.05),0 1px 2px rgba(15,23,42,.04) 
}
.input, .select, .textarea{
    width:100%; border: 1px solid #e2e8f0; 
    border-radius: .5rem; 
    padding: .625rem .875rem; 
    font-size: .875rem; 
    color: #0f172a; 
}
.input::placeholder, .textarea::placeholder{
    color: #94a3b8
}
.label{
    display: block; font-size: .8125rem; font-weight: 500; color: #334155; margin-bottom: .375rem
} 
.chip{
    display: inline-flex; align-items:center; gap: .375rem; font-size: .75rem; font-weight: 500; padding: .125rem .5rem; border-radius: 999px; background-color: #f1f5f9; color: #334155;
}
.chip-emerald{background-color: #ecfdf5; color: #047857}
.chip-green{background-color: #ecfdf5; color: #047857}
.chip-red{background-color: #fef2f2; color: #b91c1c}
.chip-amber{background-color: #fffbeb; color: #b45309}
.chip-blue{background-color: #eff6ff; color: #1d4ed8} 
.chip-violet{background-color: #f5f3ff; color: #6d28d9}
.chip-slate{background-color:#f1f5f9;color:#334155}
.chip-pink{background-color:#fdf2f8;color:#be185d}
.chip-indigo{background-color: #eef2ff; color: #4338ca}

.table{width:100%; font-size: .875rem; border-collapse: separate; border-spacing:0}
.table thead th{
    text-align:left; background: #f8fafc;color:#475569; font-size: .6875rem; font-weight:600; text-transform: uppercase; 
    letter-spacing: .04em; padding: .625rem .875rem; border-bottom: 1px solid #e2e8f0; 
}
.table tbody td {
    padding: .75rem .875rem; border-bottom:1px solid #f1f5f9; color: #334155;vertical-align:middle; 
} 
.table tbody tr:hover td{background: #fafafa} 

.progress{width: 100%; height: 6px; background: #e2e8f0; border-radius:999px; overflow:hidden}
.progress > span{display: block; height: 100%; background: var(--brand); border-radius: 999px } 
.progress.is-green > span{background: #10b981}
.progress.is-amber>span {background: #f59e0b}
.progress.is-red>span{background: #ef4444}

.score-ring{ 
    --val:0; --color: #059669;width:56px; height: 56px; border-radius: 50%; 
    background: conic-gradient(var(--color) calc(var(--val) * 1%), #e2e8f0 0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.score-ring::after{content:""; position: absolute; inset: 6px; background: white; border-radius:50%; }
.score-ring span{position:relative; z-index: 1; font-size: .875rem; font-weight: 700; color: #0f172a}

.trend-up{color:#047857}
.trend-down{color:#b91c1c}
.trend-flat{color: #64748b}

.ad-google{background:#4285F4; color: white}
.ad-meta{background: #0866ff; color: white}
.ad-facebook{background: #1877F2; color: white} 
.ad-linkedin{background: #0A66C2; color: white}
.ad-instagram{background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4); color: white} 
.ad-tiktok{background: #000; color: white}
.ad-youtube{background: #FF0000; color: white}
.ad-x {background: #000; color: white}
.ad-bing{background: #008373; color: white }
.ad-pinterest{background: #E60023; color: white} 
.ad-snapchat{background: #FFFC00; color: #0f172a}

.st-active{background: #ecfdf5; color: #047857; border:1px solid #a7f3d0}
.st-paused{background: #fffbeb; color: #b45309; border:1px solid #fde68a}
.st-draft{background: #f1f5f9;color:#475569; border:1px solid #e2e8f0}
.st-ended{background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe}
.st-rejected{background: #fef2f2; color:#b91c1c; border: 1px solid #fecaca}

.sev-critical{background: #fef2f2;color:#b91c1c; border: 1px solid #fecaca}
.sev-warning {background: #fffbeb; color: #b45309; border: 1px solid #fde68a} 
.sev-notice{background: #eff6ff; color: #1d4ed8; border:1px solid #bfdbfe}
.sev-ok{background: #ecfdf5;color: #047857;border:1px solid #a7f3d0}

.fav{
    width:24px; height: 24px; border-radius: 6px; display: inline-flex; 
    align-items: center; justify-content: center; font-weight: 700; 
    font-size: 11px; color: white; flex-shrink: 0;
}
.toast {
    position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); 
    background-color: #0f172a; color: white; padding: .625rem 1rem;
    border-radius: .5rem; font-size: .875rem; box-shadow: 0 10px 25px rgba(15,23,42,0.2); 
    opacity:0;pointer-events:none; transition:opacity 200ms ease; z-index:100; 
}
.toast.show{opacity:1}

.modal-backdrop{
    position:fixed; inset:0;background-color: rgba(15, 23,42,.5); 
    display:flex; align-items: center; justify-content: center; 
    z-index: 50; padding: 1rem; 
} 
.modal-backdrop.hidden{display:none} 
.modal{
    background: white; border-radius: .75rem; width: 100%; 
    max-width: 32rem; max-height:calc(100vh - 4rem);
    overflow-y:auto;box-shadow:0 20px 50px rgba(15,23,42,.25);
}
.modal-lg{max-width:48rem}
.modal-xl{max-width:64rem}

.tab-btn{
    padding: .5rem .875rem;font-size: .8125rem; font-weight:500;
    color:#64748b; border-bottom:2px solid transparent; 
    cursor: pointer; transition: color 120ms ease, border-color 120ms ease; 
}
.tab-btn:hover{ color: #0f172a}
.tab-btn.is-active{
    color:var(--brand-600); border-bottom-color:var(--brand);
}

.dnd-dragging{opacity: .4}
.dnd-over{
    background-color:var(--brand-50)!important; outline:2px dashed var(--brand);outline-offset: -2px
}
.wf-node {
    background: white; border: 1px solid #e2e8f0; 
    border-radius: .625rem;padding: .75rem .875rem;
    width: 240px;position:relative; font-size: .8125rem; 
}
.wf-node.is-trigger{
    border-color:var(--brand); background: var(--brand-50) 
}
.wf-node.is-action{
    border-color: #bfdbfe; background: #eff6ff
}
.wf-node.is-cond{
    border-color: #fde68a; background: #fffbeb
}
.wf-node.is-delay{
    border-color:#e9d5ff; background: #faf5ff
}

.wf-arrow{
    width:2px;height:24px; background: #cbd5e1;
    margin:0 auto; position:relative; 
}
.wf-arrow::after{
    content:""; position: absolute; bottom:-4px;
    left: 50%; transform: translateX(-50%);width:0;height:0;
    border-left:5px solid transparent; border-right:5px solid transparent; 
    border-top:6px solid #cbd5e1; 
}

.mail-preview{
    border:1px solid #e2e8f0; border-radius: .5rem;
    background: white; padding: 1rem; font-size: .875rem; 
    line-height: 1.55; color:#1e293b; 
}
.mail-preview h1,.mail-preview h2{
    color:#0f172a; font-weight:600
}
.mail-preview h1{
    font-size: 1.25rem; margin: 0 0 5rem
}
.mail-preview h2{
    font-size:1.0625rem;margin: .5rem 0 .25rem
}
.mail-preview p{
    margin:0 0 .5rem
}
.mail-preview a{
    color:var(--brand-600);text-decoration:underline
}

.stars{
    display:inline-flex; gap:1px; color:#fbbf24
}
.stars i{
    width:14px;height:14px
}

.divider{
    height:1px;background-color: #e2e8f0
}
.muted{color: #64748b
}

.kbd{
    font-family:ui-monospace, SFMono-Regular,Menlo, monospace; font-size: .6875rem;
    border:1px solid #e2e8f0; background:#f8fafc;
    border-radius: .25rem;padding: .0625rem .375rem; 
    color: #475569; 
}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar {scrollbar-width:none}

@keyframes fadeIn{
    from{
        opacity:0;transform:translateY(4px)
    }
    to{
        opacity:1; transform: translateY(0)
    }
}

.animate-fade-in{
    animation: fadeIn 180ms ease both
}
.funnel-step {
    position:relative; background: var(--brand-50); 
    color:var(--brand-600);padding: .75rem 1rem; border-radius: .5rem; 
    border:1px solid #a7f3d0; 
}

.pf-facebook{background: #1877F2; color: white}
.pf-instagram{ background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4); color: white}
.pf-linkedin{background: #0A66C2; color: white}
.pf-tiktok{background: #000; color: white}
.pf-youtube{background:#FF0000; color: white}
.pf-pinterest{background: #E60023; color: white}
.pf-threads{background:#000; color: white}
.pf-bluesky{background: #0085FF; color: white}
.pf-google {background: #4285F4; color: white}
.pf-mastodon{background: #6364FF; color: white}
.pf-x{background: #000; color: white}

.ev-facebook{background: #dbeafe; color: #1e40af; border-color: #bfdbfe;}
.ev-instagram{background: #fce7f3; color:#9d174d; border-color: #fbcfe8} 
.ev-linkedin{background: #dbeafe; color: #1e3a8a; border-color: #bfdbfe}
.ev-tiktok{background: #f1f5f9;color: #0f172a; border-color: #e2e8f0}
.ev-youtube{background: #fee2e2; color: #991b1b; border-color: #fecaca} 
.ev-pinterest{background: #dbeafe; color: #1e3a8a; border-color: #bfdbfe}
.ev-threads{background: #f1f5f9; color: #0f172a; border-color: #e2e8f0} 
.ev-bluesky{background: #dbeafe; color: #1e3a8a; border-color: #bfdbfe}

.chip-orange{background-color:#fff7ed;color:#c2410c}

.cal-grid{
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:1px;
    background-color: #e2e8f0;
    border:1px solid #e2e8f0;
    border-radius: .75rem; overflow: hidden; 
} 

.cal-cell{
    background-color: white;
    min-height:120px;padding: .5rem;
    display: flex; flex-direction: column; gap: .25rem; position: relative; 
}
.cal-cell.is-other-month{
    background-color: #f8fafc; color:#94a3b8;
}
.cal-cell.is-today .cal-day{
    background-color: var(--brand); color: white;
}
.cal-day{
    width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; border-radius: 999px; 
} 
.cal-event{
    font-size: .6875rem;padding: .125rem .375rem; border-radius: .375rem; cursor: grab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid transparent; 
}
.cal-event:active {cursor:grabbing}

.kb-column{
    background-color: #f8fafc; border: 1px solid #e2e8f0; 
    border-radius: .75rem;width: 280px; flex-shrink: 0; display: flex; flex-direction: column; 
    max-height: calc(100vh -200px);
}

.kb-column-body{
    padding: .5rem; display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; 
}
.kb-card{
    background-color:white; border: 1px solid #e2e8f0; border-radius: .5rem; padding: .75rem; 
    cursor: grab; transition: box-shadow 120ms ease, border-color 120ms ease; 
} 
.kb-card:hover {
    border-color: #cbd5e1; box-shadow:0 1px 2px rgba(15,23,42,.05)
}
.kb-card:active{
    cursor:grabbing
}

.md-content { font-size: .9375rem; line-height:1.6;color:rgb(51, 65, 85) }
.md-content > *:first-child{margin-top:0}
.md-content > *:last-child{margin-bottom:0}
.md-content h1{font-size:1.5rem;font-weight:700; color: rgb(15, 23, 42);margin:0 0 .75rem; line-height:1.3}
.md-content h2{font-size:1.125rem; font-weight: 600; color: rgb(15, 23, 42); margin: 1.25rem 0 .5rem; line-height: 1.4}
.md-content h3 {font-size:1rem; font-weight:600;color:rgb(15, 23, 42);margin:1rem 0 .5rem}
.md-content p{margin:0 0 .75rem}
.md-content ul, .md-content ol{margin:0 0 .75rem; padding-left:1.5rem}
.md-content ul {list-style-type:disc}
.md-content ol{list-style-type: decimal}
.md-content li{margin-bottom: .25rem}
.md-content code{background-color: rgb(241, 245, 249); color: rgb(30, 41, 59); padding: .125rem .375rem; border-radius: .25rem; font-family:ui-monospace, 'SFMono-Regular' , Menlo, monospace; font-size: .85em}
.md-content pre{background-color: rgb(15, 23, 42); color: rgb(241, 245, 249); padding: .75rem 1rem; border-radius: .5rem;margin:0 0 .75rem; overflow-x:auto; font-size: .8125rem; line-height:1.5}
.md-content pre code{background-color:transparent; color:inherit; padding:0; font-size: inherit}
.md-content a {color:var(--brand-600); text-decoration:underline}
.md-content a:hover{color:var(--brand)}
.md-content strong{font-weight:600;color: rgb(15, 23, 42)}
.md-content blockquote{border-left:3px solid var(--brand); background-color:var(--brand-50);padding: .5rem .75rem;margin:0 0 .75rem; color: rgb(71, 85, 105); border-radius:0 .375rem .375rem 0}
.md-content hr{border:0;border-top:1px solid rgb(226, 232, 240);margin:1rem 0}