/**
 * SYNCCIO Core Application Stylesheet
 *
 * @package SynccioCore
 */

/* -------------------------------------------------------------------------
   1. Tool Containers & Calculator Forms
   ------------------------------------------------------------------------- */
.synccio-tool-wrapper {
    background: #ffffff;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 16px;
    padding: 36px 40px;
    margin: 32px 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.synccio-tool-wrapper:hover {
    box-shadow: 0 8px 24px rgba(106, 27, 203, 0.06);
    border-color: #cbd5e1;
}

.synccio-tool-header {
    margin-bottom: 28px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 20px;
}
.kicker-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    background: rgba(106, 27, 203, 0.08);
    color: var(--violet, #6a1bcb);
    border-radius: 20px;
    margin-bottom: 8px;
}
.synccio-tool-header h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--ink, #111827);
    margin: 4px 0 8px;
    letter-spacing: -0.02em;
}
.synccio-tool-desc {
    font-size: 15px;
    color: var(--muted, #64748b);
    line-height: 1.6;
    margin: 0;
}

/* Form Fields Grid */
.synccio-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}
.synccio-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.synccio-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}
.synccio-label .required {
    color: #ef4444;
}
.synccio-input {
    width: 100%;
    height: 44px;
    padding: 8px 14px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.synccio-input:focus {
    outline: none;
    border-color: var(--violet, #6a1bcb);
    box-shadow: 0 0 0 3px rgba(106, 27, 203, 0.15);
}
.synccio-form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
}
.synccio-calc-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 16px;
}
.synccio-calc-disclaimer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.6;
}

/* -------------------------------------------------------------------------
   2. Results Card & Visual KPIs
   ------------------------------------------------------------------------- */
.synccio-results-container {
    margin-top: 28px;
    animation: fadeIn 0.3s ease;
}
.synccio-results-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 28px;
}
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 14px;
}
.results-header h3 {
    margin: 4px 0 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0f172a;
}
.synccio-risk-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.risk-safe, .risk-good, .risk-excellent { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.risk-medium, .risk-moderate { background: #fef9c3; color: #a16207; border: 1px solid #fef08a; }
.risk-high { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }
.risk-critical { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }

.results-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.kpi-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.kpi-box-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #64748b;
}
.kpi-box-value {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}

.results-recommendation {
    display: flex;
    gap: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 14px 18px;
    color: #1e40af;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}
.results-recommendation .rec-icon {
    font-size: 20px;
}
.results-recommendation strong {
    display: block;
    margin-bottom: 2px;
}
.results-recommendation p {
    margin: 0;
}

.results-action-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}
.synccio-save-feedback {
    font-size: 13px;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   3. SVG Charts & Depletion Bars
   ------------------------------------------------------------------------- */
.synccio-chart-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 18px 20px;
    margin: 20px 0;
}
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: 13px;
}
.chart-legend {
    display: flex;
    gap: 12px;
    font-size: 12px;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.legend-item i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.synccio-svg-chart {
    width: 100%;
    height: 160px;
    overflow: visible;
}

.synccio-runway-chart {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin: 20px 0;
}
.runway-bars-wrap {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 120px;
    margin-top: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
}
.runway-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}
.runway-bar-col .bar-fill {
    width: 100%;
    background: linear-gradient(180deg, #6a1bcb, #2563eb);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
}
.runway-bar-col span {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 4px;
}

/* -------------------------------------------------------------------------
   4. Kanban Tasks Workspace
   ------------------------------------------------------------------------- */
.tasks-workspace-head {
    margin-bottom: 24px;
}
.quick-add-task-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 16px;
    border-radius: 10px;
}
.quick-add-task-form input[type="text"] {
    flex: 2;
    min-width: 240px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}
.quick-add-task-form select,
.quick-add-task-form input[type="date"] {
    height: 40px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}

.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    align-items: start;
}
@media (max-width: 900px) {
    .kanban-board {
        grid-template-columns: 1fr;
    }
}
.kanban-col {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    min-height: 280px;
}
.col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}
.col-count {
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 12px;
}
.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
.dot-todo { background: #94a3b8; }
.dot-progress { background: #2563eb; }
.dot-review { background: #f59e0b; }
.dot-done { background: #10b981; }

.task-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    position: relative;
    transition: transform 0.15s ease;
}
.task-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.04);
}
.task-urgent {
    border-left: 4px solid #ef4444;
}
.task-card-top {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 6px;
}
.task-priority-badge {
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}
.badge-urgent { background: #fee2e2; color: #b91c1c; }
.badge-high   { background: #ffedd5; color: #c2410c; }
.badge-medium { background: #fef9c3; color: #a16207; }
.badge-low    { background: #f1f5f9; color: #475569; }

.task-due.is-overdue {
    color: #dc2626;
    font-weight: 700;
}
.task-title {
    margin: 4px 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
}
.task-card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.status-select {
    font-size: 11px;
    height: 26px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    background: #fff;
}
.task-del-btn, .del-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 6px;
}
.task-del-btn:hover, .del-btn:hover {
    color: #ef4444;
}

/* -------------------------------------------------------------------------
   5. OKR Manager Workspace
   ------------------------------------------------------------------------- */
.okr-workspace-head form {
    display: flex;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 24px;
}
.okr-workspace-head input[type="text"] {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}
.okr-workspace-head .input-period {
    width: 90px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}

.okr-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.okr-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.okr-period-badge {
    font-size: 11px;
    font-weight: 700;
    background: #ede9fe;
    color: #6a1bcb;
    padding: 2px 8px;
    border-radius: 12px;
}
.okr-title {
    margin: 6px 0 0;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
}
.okr-health-block {
    display: flex;
    align-items: center;
    gap: 10px;
}
.okr-status-badge {
    font-size: 12px;
    font-weight: 600;
}
.okr-pct {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}

.okr-prog-bar {
    width: 100%;
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;
}
.okr-prog-bar .fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}
.fill.on_track { background: #10b981; }
.fill.at_risk  { background: #f59e0b; }
.fill.off_track{ background: #ef4444; }

.okr-krs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid #f1f5f9;
    padding-top: 14px;
}
.kr-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.kr-title {
    color: #334155;
    font-weight: 500;
}
.kr-val-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #64748b;
}
.mini-prog {
    width: 70px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}
.mini-fill {
    height: 100%;
    background: #2563eb;
    border-radius: 3px;
}

/* -------------------------------------------------------------------------
   6. Business Model Canvas (9 Blocks Grid)
   ------------------------------------------------------------------------- */
.canvas-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 14px 20px;
    border-radius: 10px;
}
.canvas-title-input {
    font-size: 18px;
    font-weight: 700;
    border: 1px solid transparent;
    background: transparent;
    padding: 4px 8px;
    border-radius: 6px;
    color: #0f172a;
}
.canvas-title-input:focus {
    border-color: #cbd5e1;
    background: #fff;
}
.canvas-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
#canvas-save-status {
    font-size: 13px;
    font-weight: 600;
}

.canvas-grid-9 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, minmax(220px, auto));
    gap: 14px;
}
@media (max-width: 992px) {
    .canvas-grid-9 {
        grid-template-columns: 1fr;
    }
}
.canvas-block {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
}
.block-key_partnerships    { grid-column: 1 / 2; grid-row: 1 / 3; }
.block-key_activities      { grid-column: 2 / 3; grid-row: 1 / 2; }
.block-key_resources       { grid-column: 2 / 3; grid-row: 2 / 3; }
.block-value_propositions  { grid-column: 3 / 4; grid-row: 1 / 3; }
.block-customer_relationships { grid-column: 4 / 5; grid-row: 1 / 2; }
.block-channels            { grid-column: 4 / 5; grid-row: 2 / 3; }
.block-customer_segments   { grid-column: 5 / 6; grid-row: 1 / 3; }
.block-cost_structure      { grid-column: 1 / 3; }
.block-revenue_streams     { grid-column: 3 / 6; }

.block-head {
    margin-bottom: 8px;
}
.block-head strong {
    display: block;
    font-size: 13px;
    color: #0f172a;
}
.block-head small {
    display: block;
    font-size: 11px;
    color: #64748b;
    line-height: 1.3;
}
.canvas-textarea {
    width: 100%;
    flex: 1;
    min-height: 100px;
    border: 1px solid #f1f5f9;
    border-radius: 6px;
    padding: 8px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
}
.canvas-textarea:focus {
    border-color: #cbd5e1;
    outline: none;
}

/* -------------------------------------------------------------------------
   7. Pitch Deck Accordion
   ------------------------------------------------------------------------- */
.pitch-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.pitch-slide-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}
.pitch-slide-card summary {
    padding: 14px 18px;
    background: #f8fafc;
    font-size: 15px;
    cursor: pointer;
    font-weight: 600;
}
.slide-inputs-grid {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.field-wrap label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px;
}
.field-wrap input, .field-wrap textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 14px;
}

/* -------------------------------------------------------------------------
   8. Product Roadmap Board
   ------------------------------------------------------------------------- */
.roadmap-toolbar form {
    display: flex;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 24px;
}
.roadmap-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 900px) {
    .roadmap-board {
        grid-template-columns: 1fr;
    }
}
.roadmap-col {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    min-height: 280px;
}
.roadmap-col .col-head {
    border-top: 3px solid #64748b;
    padding-top: 8px;
}
.roadmap-item-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}
.item-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.priority-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}
.pill-must_have { background: #fee2e2; color: #b91c1c; }
.pill-should_have { background: #fef9c3; color: #a16207; }
.pill-nice_to_have { background: #e0f2fe; color: #0369a1; }

.item-progress {
    width: 100%;
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
    margin: 8px 0 4px;
}
.item-progress .fill {
    height: 100%;
    background: #2563eb;
    border-radius: 3px;
}

/* -------------------------------------------------------------------------
   9. Dashboard Web Application Shell
   ------------------------------------------------------------------------- */
.synccio-dashboard-app {
    display: flex;
    min-height: 100vh;
    background: #f8fafc;
}
.synccio-dash-sidebar {
    width: 260px;
    background: #0f172a;
    color: #f8fafc;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.dash-sidebar-brand .dash-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    margin-bottom: 24px;
}
.dash-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    margin-bottom: 24px;
}
.dash-user-info strong {
    display: block;
    font-size: 14px;
    color: #fff;
}
.user-plan-badge {
    font-size: 11px;
    background: #6a1bcb;
    color: #fff;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}
.dash-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.dash-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: #94a3b8;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.dash-nav-item:hover, .dash-nav-item.is-active {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.dash-nav-icon {
    font-size: 16px;
}
.dash-sidebar-footer {
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.dash-logout-link {
    color: #94a3b8;
    font-size: 13px;
    text-decoration: none;
}

.synccio-dash-content {
    flex: 1;
    padding: 32px 48px;
    overflow-y: auto;
}
@media (max-width: 800px) {
    .synccio-dashboard-app { flex-direction: column; }
    .synccio-dash-sidebar { width: 100%; }
    .synccio-dash-content { padding: 24px 18px; }
}
.dash-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    font-size: 13px;
    color: #64748b;
}
.dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 36px;
}
.dash-kpi-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.dash-kpi-card .kpi-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #64748b;
}
.dash-kpi-card .kpi-value {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    margin: 8px 0;
}

.dash-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 16px;
}
.dash-tool-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dash-tool-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    border-color: #cbd5e1;
}
.dash-tool-card.locked {
    opacity: 0.85;
    background: #fafafa;
}
.tool-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.tool-type-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 12px;
}
.tool-type-badge.calc { background: #ede9fe; color: #6a1bcb; }
.tool-type-badge.ws   { background: #e0f2fe; color: #0284c7; }
.card-launch-btn {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--violet, #6a1bcb);
}

/* -------------------------------------------------------------------------
   10. Gate & Locked Boxes
   ------------------------------------------------------------------------- */
.synccio-gate-box, .synccio-locked-box {
    text-align: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 48px 32px;
    max-width: 640px;
    margin: 36px auto;
}
.gate-icon, .locked-icon {
    font-size: 40px;
    margin-bottom: 16px;
}
.locked-badge {
    font-size: 11px;
    font-weight: 700;
    background: #fee2e2;
    color: #b91c1c;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
    display: inline-block;
}
.synccio-gate-box h2, .synccio-locked-box h2 {
    font-size: 24px;
    font-weight: 800;
    margin: 8px 0 12px;
    color: #0f172a;
}
.synccio-gate-box p, .synccio-locked-box p {
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
}
.gate-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}


/* ==========================================================================
   SYNCCIO Core App Dark Mode Overrides
   ========================================================================== */
[data-theme="dark"] .synccio-tool-wrapper,
[data-theme="dark"] .synccio-gate-box,
[data-theme="dark"] .synccio-locked-box,
[data-theme="dark"] .synccio-price-card,
[data-theme="dark"] .directory-card {
    background: #0f172a !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .synccio-tool-header h2,
[data-theme="dark"] .synccio-gate-box h2,
[data-theme="dark"] .synccio-locked-box h2,
[data-theme="dark"] .plan-title,
[data-theme="dark"] .tool-card-title,
[data-theme="dark"] .directory-card h3 {
    color: #f8fafc !important;
}

[data-theme="dark"] .synccio-tool-desc,
[data-theme="dark"] .synccio-gate-box p,
[data-theme="dark"] .synccio-locked-box p,
[data-theme="dark"] .plan-desc,
[data-theme="dark"] .plan-features-list li,
[data-theme="dark"] .directory-card p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .synccio-input,
[data-theme="dark"] .synccio-select,
[data-theme="dark"] .synccio-textarea {
    background: #060913 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .synccio-calc-results,
[data-theme="dark"] .synccio-metric-card,
[data-theme="dark"] .kanban-card,
[data-theme="dark"] .okr-objective-card,
[data-theme="dark"] .canvas-cell,
[data-theme="dark"] .pitch-slide-card {
    background: #162032 !important;
    border-color: #243247 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .kanban-col,
[data-theme="dark"] .kanban-column {
    background: #090d16 !important;
    border-color: #1e293b !important;
}

[data-theme="dark"] .filter-tab {
    background: #0f172a !important;
    border-color: #1e293b !important;
    color: #94a3b8 !important;
}
[data-theme="dark"] .filter-tab.is-active {
    background: #7c3aed !important;
    color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .synccio-tool-wrapper,
    :root:not([data-theme="light"]) .synccio-gate-box,
    :root:not([data-theme="light"]) .synccio-locked-box,
    :root:not([data-theme="light"]) .synccio-price-card,
    :root:not([data-theme="light"]) .directory-card {
        background: #0f172a !important;
        border-color: #1e293b !important;
        color: #f8fafc !important;
    }

    :root:not([data-theme="light"]) .synccio-tool-header h2,
    :root:not([data-theme="light"]) .synccio-gate-box h2,
    :root:not([data-theme="light"]) .synccio-locked-box h2,
    :root:not([data-theme="light"]) .plan-title,
    :root:not([data-theme="light"]) .directory-card h3 {
        color: #f8fafc !important;
    }

    :root:not([data-theme="light"]) .synccio-tool-desc,
    :root:not([data-theme="light"]) .synccio-gate-box p,
    :root:not([data-theme="light"]) .synccio-locked-box p,
    :root:not([data-theme="light"]) .plan-desc,
    :root:not([data-theme="light"]) .plan-features-list li,
    :root:not([data-theme="light"]) .directory-card p {
        color: #94a3b8 !important;
    }

    :root:not([data-theme="light"]) .synccio-input,
    :root:not([data-theme="light"]) .synccio-select,
    :root:not([data-theme="light"]) .synccio-textarea {
        background: #060913 !important;
        border-color: #334155 !important;
        color: #f8fafc !important;
    }

    :root:not([data-theme="light"]) .synccio-calc-results,
    :root:not([data-theme="light"]) .synccio-metric-card,
    :root:not([data-theme="light"]) .kanban-card,
    :root:not([data-theme="light"]) .okr-objective-card,
    :root:not([data-theme="light"]) .canvas-cell,
    :root:not([data-theme="light"]) .pitch-slide-card {
        background: #162032 !important;
        border-color: #243247 !important;
        color: #f8fafc !important;
    }

    :root:not([data-theme="light"]) .kanban-col,
    :root:not([data-theme="light"]) .kanban-column {
        background: #090d16 !important;
        border-color: #1e293b !important;
    }
}

/* SYNCCIO Core 1.2: native color-scheme controls and clearer keyboard focus. */
:root{--synccio-control-bg:#fff;--synccio-control-ink:#111827;--synccio-control-line:#d9deea}
:root[data-theme="dark"]{--synccio-control-bg:#111827;--synccio-control-ink:#f3f5fa;--synccio-control-line:#374151;color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--synccio-control-bg:#111827;--synccio-control-ink:#f3f5fa;--synccio-control-line:#374151;color-scheme:dark}}
:where(.synccio-tool-wrapper,.synccio-gate-box,.synccio-locked-box,.directory-card,.synccio-price-card,.synccio-calc-results,.synccio-metric-card,.kanban-card,.okr-objective-card,.canvas-cell,.pitch-slide-card,.kanban-col,.kanban-column){border-color:var(--synccio-control-line)}
:where(.synccio-input,.synccio-select,.synccio-textarea){background:var(--synccio-control-bg);color:var(--synccio-control-ink);border-color:var(--synccio-control-line)}
:where(.synccio-input,.synccio-select,.synccio-textarea,.synccio-tool button,.synccio-tool a):focus-visible{outline:3px solid color-mix(in srgb,#7c3aed 55%,transparent);outline-offset:2px}