/* ═══════════════════════════════════════════════════════════════════════
   «Вероятность сделки» — стили виджета и страницы настроек
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    background: transparent;
    font-size: 13px;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════
   WIDGET — DARK THEME (default)
   ═══════════════════════════════════════════════════════════════════════ */
.dp-widget {
    background: #171a4a;
    border: 0.5px solid rgba(120, 110, 255, 0.25);
    border-radius: 12px;
    overflow: hidden;
    color: #fff;
    margin: 8px 0;
}

.dp-widget-header {
    background: #0f1035;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 0.5px solid rgba(120, 110, 255, 0.25);
}
.dp-widget-header svg { flex-shrink: 0; }
.dp-widget-title {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Probability block */
.dp-prob {
    padding: 16px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-bottom: 0.5px solid rgba(120, 110, 255, 0.2);
}
.dp-prob-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.dp-prob-value {
    font-size: 36px;
    font-weight: 700;
    color: #7c6af7;
    letter-spacing: -1px;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 2px;
}
.dp-prob-value .dp-prob-pct {
    font-size: 18px;
    color: rgba(124, 106, 247, 0.7);
    font-weight: 600;
    margin-left: 2px;
}
.dp-prob-value--win {
    color: #4ee6b0;
    background: linear-gradient(90deg, #4ee6b0, #6fffb8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dp-prob-bar {
    width: 100%;
    height: 6px;
    background: rgba(120, 110, 255, 0.12);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}
.dp-prob-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #5046e5, #7c6af7);
    border-radius: 3px;
    transition: width 0.3s;
}
.dp-prob-bar-fill--win {
    background: linear-gradient(90deg, #1d9e75, #4ee6b0);
}

.dp-win-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(78, 230, 176, 0.12);
    border: 0.5px solid rgba(78, 230, 176, 0.35);
    border-radius: 8px;
    color: #4ee6b0;
    font-size: 12px;
    font-weight: 500;
    margin-top: 6px;
    width: 100%;
    justify-content: center;
}

/* Checklist block */
.dp-checklist { padding: 0; }

.dp-cl-toggle {
    width: 100%;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.dp-cl-toggle:hover { background: rgba(120, 110, 255, 0.06); }
.dp-cl-toggle-chevron {
    transition: transform 0.2s;
    color: rgba(255, 255, 255, 0.4);
}
.dp-cl-toggle.is-open .dp-cl-toggle-chevron { transform: rotate(90deg); }
.dp-cl-count {
    margin-left: auto;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(120, 110, 255, 0.12);
    padding: 2px 7px;
    border-radius: 10px;
}

.dp-cl-body {
    padding: 0 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 0.5px solid rgba(120, 110, 255, 0.15);
}
.dp-cl-body.is-hidden { display: none; }

.dp-cl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
    user-select: none;
}
.dp-cl-item + .dp-cl-item { border-top: 0.5px solid rgba(120, 110, 255, 0.1); }
.dp-cl-item.is-loading { opacity: 0.6; pointer-events: none; }

.dp-cb {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid rgba(120, 110, 255, 0.4);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f1035;
    transition: all 0.15s;
}
.dp-cl-item.is-checked .dp-cb {
    background: #5046e5;
    border-color: #5046e5;
}
.dp-cb svg { opacity: 0; transition: opacity 0.15s; }
.dp-cl-item.is-checked .dp-cb svg { opacity: 1; }

.dp-cl-text {
    flex: 1;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.35;
}
.dp-cl-item.is-checked .dp-cl-text {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.25);
}
.dp-cl-pct {
    font-size: 10px;
    color: #7c6af7;
    font-weight: 600;
    flex-shrink: 0;
    background: rgba(124, 106, 247, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
}
.dp-cl-item.is-checked .dp-cl-pct {
    color: #4ee6b0;
    background: rgba(78, 230, 176, 0.12);
}

/* Risk checklist item */
.dp-cl-item.is-risk .dp-cl-pct {
    color: #f87777;
    background: rgba(226, 75, 74, 0.12);
}
.dp-cl-item.is-risk.is-checked .dp-cl-pct {
    color: #f87777;
    background: rgba(226, 75, 74, 0.18);
}
.dp-cl-item.is-risk.is-checked .dp-cb {
    background: #e24b4a;
    border-color: #e24b4a;
}
.dp-cl-item.is-risk.is-checked .dp-cl-text {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}
.dp-cl-risk-badge {
    font-size: 8.5px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(226, 75, 74, 0.18);
    color: #f87777;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
    border: 0.5px solid rgba(226, 75, 74, 0.3);
}

.dp-empty {
    padding: 16px 14px;
    text-align: center;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   WIDGET — LIGHT THEME
   ═══════════════════════════════════════════════════════════════════════ */
.dp-widget.dp-light {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #1f2937;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.dp-light .dp-widget-header {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.dp-light .dp-widget-header svg path,
.dp-light .dp-widget-header svg circle { stroke: #6b7280; }
.dp-light .dp-widget-title { color: #6b7280; }

.dp-light .dp-prob { border-bottom: 1px solid #f3f4f6; }
.dp-light .dp-prob-label { color: #9ca3af; }
.dp-light .dp-prob-value { color: #6366f1; }
.dp-light .dp-prob-value .dp-prob-pct { color: rgba(99, 102, 241, 0.7); }
.dp-light .dp-prob-value--win {
    color: #059669;
    background: linear-gradient(90deg, #059669, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dp-light .dp-prob-bar { background: #f3f4f6; }
.dp-light .dp-prob-bar-fill { background: linear-gradient(90deg, #6366f1, #818cf8); }
.dp-light .dp-prob-bar-fill--win { background: linear-gradient(90deg, #059669, #34d399); }

.dp-light .dp-win-banner {
    background: #ecfdf5;
    border: 1px solid #d1fae5;
    color: #059669;
}

.dp-light .dp-cl-toggle { color: #374151; }
.dp-light .dp-cl-toggle:hover { background: #f9fafb; }
.dp-light .dp-cl-toggle-chevron { color: #9ca3af; }
.dp-light .dp-cl-count { background: #f3f4f6; color: #6b7280; }
.dp-light .dp-cl-body { border-top: 1px solid #f3f4f6; }
.dp-light .dp-cl-item + .dp-cl-item { border-top: 1px solid #f9fafb; }
.dp-light .dp-cb { background: #fff; border-color: #d1d5db; }
.dp-light .dp-cl-item.is-checked .dp-cb { background: #6366f1; border-color: #6366f1; }
.dp-light .dp-cl-text { color: #1f2937; }
.dp-light .dp-cl-item.is-checked .dp-cl-text { color: #9ca3af; text-decoration-color: #d1d5db; }
.dp-light .dp-cl-pct { color: #6366f1; background: #eef2ff; }
.dp-light .dp-cl-item.is-checked .dp-cl-pct { color: #059669; background: #ecfdf5; }

.dp-light .dp-cl-item.is-risk .dp-cl-pct { color: #dc2626; background: #fef2f2; }
.dp-light .dp-cl-item.is-risk.is-checked .dp-cl-pct { color: #dc2626; background: #fee2e2; }
.dp-light .dp-cl-item.is-risk.is-checked .dp-cb { background: #dc2626; border-color: #dc2626; }
.dp-light .dp-cl-item.is-risk.is-checked .dp-cl-text { color: #9ca3af; text-decoration: none; }
.dp-light .dp-cl-risk-badge { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

.dp-light .dp-empty { color: #9ca3af; }


/* ═══════════════════════════════════════════════════════════════════════
   INDEX PAGE — DARK THEME
   ═══════════════════════════════════════════════════════════════════════ */
.app-shell {
    background: #171a4a;
    border: 0.5px solid rgba(120, 110, 255, 0.25);
    border-radius: 0;
    min-height: 100vh;
    color: #fff;
}

.app-header {
    background: #0f1035;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 0.5px solid rgba(120, 110, 255, 0.25);
    position: sticky;
    top: 0;
    z-index: 5;
}
.app-logo {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #5046e5, #7c6af7);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.app-logo svg { display: block; }
.app-name {
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.2px;
}
.app-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 1px;
}
.app-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
}
.app-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ee6b0;
    box-shadow: 0 0 0 2px rgba(78, 230, 176, 0.18);
}

.app-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 640px;
    margin: 0 auto;
}
.app-content[hidden] { display: none; }

/* Tabs */
.app-tabs {
    background: #0f1035;
    display: flex;
    gap: 4px;
    padding: 8px 14px;
    border-bottom: 0.5px solid rgba(120, 110, 255, 0.22);
    position: sticky;
    top: 0;
    z-index: 4;
}
.app-tab {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    padding: 7px 14px;
    cursor: pointer;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.18s;
    user-select: none;
}
.app-tab:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(120, 110, 255, 0.1);
}
.app-tab.is-active {
    color: #fff;
    background: #5046e5;
}
.app-tab svg { flex-shrink: 0; }

/* Save row inside pane (conditions) */
.tab-save-row {
    padding-top: 4px;
    display: flex;
    gap: 10px;
}
.tab-save-row .save-btn { width: 100%; }

/* Theme hint */
.theme-hint {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.5;
    padding: 0 4px;
}

/* Sum counter */
.sum-counter {
    background: #0f1035;
    border: 0.5px solid rgba(120, 110, 255, 0.2);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.sum-counter.is-over {
    border-color: rgba(248, 119, 119, 0.5);
    background: rgba(226, 75, 74, 0.08);
}
.sum-counter-left { flex: 1; min-width: 0; }
.sum-counter-label {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.sum-counter-value {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.sum-counter-value .sum-counter-total {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}
.sum-counter.is-over .sum-counter-value { color: #f87777; }
.sum-counter-bar {
    margin-top: 8px;
    height: 5px;
    background: rgba(120, 110, 255, 0.12);
    border-radius: 3px;
    overflow: hidden;
}
.sum-counter-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #5046e5, #7c6af7);
    border-radius: 3px;
    transition: width 0.3s;
}
.sum-counter.is-over .sum-counter-bar-fill {
    background: linear-gradient(90deg, #e24b4a, #f87777);
}
.sum-counter-warn {
    margin-top: 6px;
    font-size: 11px;
    color: #f87777;
    display: flex;
    align-items: center;
    gap: 5px;
}
.sum-counter-risk {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 0.5px dashed rgba(120, 110, 255, 0.15);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
}
.sum-counter-risk-value { color: #f87777; font-weight: 600; }
.sum-counter-risk-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: rgba(226, 75, 74, 0.15);
    color: #f87777;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Add-menu */
.add-menu { position: relative; }
.add-btn {
    width: 100%;
    background: #5046e5;
    border: none;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background 0.18s;
}
.add-btn:hover { background: #4038c7; }
.add-menu-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #0f1035;
    border: 0.5px solid rgba(120, 110, 255, 0.3);
    border-radius: 10px;
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    display: none;
}
.add-menu.is-open .add-menu-list { display: block; }

/* Bottom variant — меню раскрывается вверх */
.add-menu--bottom .add-menu-list {
    top: auto;
    bottom: calc(100% + 4px);
}
.add-btn--outline {
    background: transparent;
    color: #7c6af7;
    border: 1.5px dashed rgba(120, 110, 255, 0.45);
}
.add-btn--outline:hover {
    background: rgba(120, 110, 255, 0.08);
    border-color: rgba(120, 110, 255, 0.7);
    color: #9b88ff;
}
.is-light .add-btn--outline {
    background: transparent;
    color: #6366f1;
    border: 1.5px dashed #c7d2fe;
}
.is-light .add-btn--outline:hover {
    background: #eef2ff;
    border-color: #818cf8;
    color: #4f46e5;
}
.add-menu-item {
    padding: 11px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    transition: background 0.15s;
    border-bottom: 0.5px solid rgba(120, 110, 255, 0.1);
}
.add-menu-item:last-child { border-bottom: none; }
.add-menu-item:hover { background: rgba(120, 110, 255, 0.12); }
.add-menu-item-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.add-menu-item-icon--state { background: rgba(120, 110, 255, 0.18); color: #7c6af7; }
.add-menu-item-icon--checklist { background: rgba(78, 230, 176, 0.18); color: #4ee6b0; }
.add-menu-item-icon--win { background: rgba(255, 193, 77, 0.2); color: #ffc14d; }
.add-menu-item-text { flex: 1; }
.add-menu-item-title { font-weight: 500; font-size: 12.5px; }
.add-menu-item-desc { font-size: 10.5px; color: rgba(255, 255, 255, 0.4); margin-top: 1px; }

/* Conditions list */
.conditions { display: flex; flex-direction: column; gap: 10px; }

.cond {
    background: #0f1035;
    border: 0.5px solid rgba(120, 110, 255, 0.2);
    border-radius: 12px;
    overflow: hidden;
}
.cond-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px 10px;
    border-bottom: 0.5px solid rgba(120, 110, 255, 0.12);
}
.cond-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.cond-type--state { background: rgba(120, 110, 255, 0.18); color: #7c6af7; }
.cond-type--checklist { background: rgba(78, 230, 176, 0.15); color: #4ee6b0; }
.cond-type--win { background: rgba(255, 193, 77, 0.15); color: #ffc14d; }

/* Risk condition styling */
.cond.is-risk {
    border-color: rgba(226, 75, 74, 0.35);
    background: linear-gradient(180deg, rgba(226, 75, 74, 0.04), transparent 40%), #0f1035;
}
.cond.is-risk .cond-head { border-bottom-color: rgba(226, 75, 74, 0.2); }
.cond.is-risk .cond-type--state,
.cond.is-risk .cond-type--checklist {
    background: rgba(226, 75, 74, 0.15);
    color: #f87777;
}

.cond-drag {
    color: rgba(255, 255, 255, 0.25);
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}
.cond-drag:hover { color: rgba(255, 255, 255, 0.5); }

.cond-title {
    flex: 1;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cond-delete {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: all 0.15s;
    font-family: inherit;
    display: flex;
    align-items: center;
}
.cond-delete:hover {
    color: #f87777;
    background: rgba(226, 75, 74, 0.1);
}

.cond-body {
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Form controls */
.field-label {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.dp-select {
    background: #171a4a;
    border: 0.5px solid rgba(120, 110, 255, 0.3);
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 12.5px;
    color: #fff;
    outline: none;
    font-family: inherit;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c6af7' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    padding-right: 32px;
    cursor: pointer;
}
.dp-select:focus { border-color: rgba(120, 110, 255, 0.7); }

.dp-input {
    background: #171a4a;
    border: 0.5px solid rgba(120, 110, 255, 0.3);
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 12.5px;
    color: #fff;
    outline: none;
    font-family: inherit;
    width: 100%;
    transition: border-color 0.18s;
}
.dp-input:focus { border-color: rgba(120, 110, 255, 0.7); }
.dp-input::placeholder { color: rgba(255, 255, 255, 0.3); }

/* Chips for multi-select values */
.chips-box {
    background: #171a4a;
    border: 0.5px solid rgba(120, 110, 255, 0.3);
    border-radius: 8px;
    padding: 6px 7px;
    min-height: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.chips-box:focus-within { border-color: rgba(120, 110, 255, 0.7); }
.chips-box .dp-select {
    background-color: transparent;
    border: none;
    flex: 1;
    min-width: 140px;
    padding: 3px 24px 3px 4px;
    background-position: right 6px center;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(120, 110, 255, 0.18);
    border: 0.5px solid rgba(120, 110, 255, 0.25);
    color: #c4b8ff;
    font-size: 11.5px;
    padding: 3px 6px 3px 9px;
    border-radius: 6px;
}
.chip-x {
    border: none;
    background: transparent;
    color: rgba(196, 184, 255, 0.6);
    cursor: pointer;
    padding: 1px 3px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
}
.chip-x:hover { color: #f87777; background: rgba(226, 75, 74, 0.15); }

/* Percent row */
.pct-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pct-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 4px;
    background: rgba(120, 110, 255, 0.18);
    border-radius: 2px;
    outline: none;
}
.pct-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #7c6af7;
    border: 2px solid #171a4a;
    box-shadow: 0 0 0 1px rgba(120, 110, 255, 0.5);
    cursor: pointer;
}
.pct-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #7c6af7;
    border: 2px solid #171a4a;
    cursor: pointer;
}
.pct-slider.is-risk { background: rgba(226, 75, 74, 0.18); }
.pct-slider.is-risk::-webkit-slider-thumb {
    background: #e24b4a;
    box-shadow: 0 0 0 1px rgba(248, 119, 119, 0.4);
}
.pct-slider.is-risk::-moz-range-thumb { background: #e24b4a; }

.pct-number {
    width: 74px;
    display: flex;
    align-items: center;
    background: #171a4a;
    border: 0.5px solid rgba(120, 110, 255, 0.3);
    border-radius: 8px;
    padding: 6px 8px 6px 10px;
    gap: 2px;
}
.pct-number input {
    background: transparent;
    border: none;
    color: #fff;
    outline: none;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    width: 100%;
    text-align: right;
    padding: 0;
    -moz-appearance: textfield;
}
.pct-number input::-webkit-outer-spin-button,
.pct-number input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pct-number-sign {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}
.pct-number-prefix {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    margin-right: 2px;
}
.pct-number.is-risk {
    border-color: rgba(226, 75, 74, 0.35);
    background: rgba(226, 75, 74, 0.06);
}
.pct-number.is-risk input { color: #f87777; }
.pct-number.is-risk .pct-number-sign { color: rgba(248, 119, 119, 0.8); }
.pct-number.is-risk .pct-number-prefix { color: #f87777; }

.pct-win-badge {
    background: rgba(255, 193, 77, 0.18);
    border: 0.5px solid rgba(255, 193, 77, 0.3);
    color: #ffc14d;
    font-size: 11px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 8px;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Risk toggle row */
.risk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(120, 110, 255, 0.05);
    border: 0.5px solid rgba(120, 110, 255, 0.15);
    border-radius: 8px;
    padding: 9px 12px;
    transition: all 0.2s;
}
.cond.is-risk .risk-row {
    background: rgba(226, 75, 74, 0.08);
    border-color: rgba(226, 75, 74, 0.28);
}
.risk-row-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(120, 110, 255, 0.12);
    color: rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}
.cond.is-risk .risk-row-icon {
    background: rgba(226, 75, 74, 0.18);
    color: #f87777;
}
.risk-row-label { flex: 1; min-width: 0; }
.risk-row-title {
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}
.cond.is-risk .risk-row-title { color: #f87777; }
.risk-row-desc {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 1px;
}

/* Toggle switch */
.toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(120, 110, 255, 0.2);
    border: 0.5px solid rgba(120, 110, 255, 0.3);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.22s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.22s;
}
.toggle input:checked + .toggle-slider {
    background: #e24b4a;
    border-color: #e24b4a;
}
.toggle input:checked + .toggle-slider::before { transform: translateX(16px); }

/* Empty state */
.cond-empty {
    border: 1px dashed rgba(120, 110, 255, 0.25);
    border-radius: 12px;
    padding: 22px 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    line-height: 1.5;
}
.cond-empty-icon {
    display: block;
    margin: 0 auto 6px;
    color: rgba(120, 110, 255, 0.5);
}

/* Settings group */
.settings-group {
    background: #0f1035;
    border: 0.5px solid rgba(120, 110, 255, 0.2);
    border-radius: 12px;
    overflow: hidden;
}
.settings-group-title {
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 14px 8px;
    border-bottom: 0.5px solid rgba(120, 110, 255, 0.12);
}

/* Theme cards */
.theme-cards {
    display: flex;
    gap: 10px;
    padding: 12px 14px 4px;
}
.theme-card {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s, transform 0.15s;
    position: relative;
}
.theme-card:hover { transform: translateY(-1px); }
.theme-card.is-selected { border-color: #7c6af7; }
.theme-card-preview {
    height: 64px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.theme-card-preview--dark { background: #171a4a; }
.theme-card-preview--light { background: #f9fafb; border: 1px solid #e5e7eb; }
.tcp-pct { font-size: 18px; font-weight: 700; text-align: center; }
.tcp-pct--dark { color: #7c6af7; }
.tcp-pct--light { color: #6366f1; }
.tcp-bar { height: 4px; border-radius: 2px; margin: 0 10px; }
.tcp-bar--dark { background: linear-gradient(90deg, #5046e5, #7c6af7); }
.tcp-bar--light { background: linear-gradient(90deg, #6366f1, #818cf8); }
.theme-card-label {
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    border-top: 0.5px solid rgba(120, 110, 255, 0.15);
}
.theme-card--dark .theme-card-label { background: #0f1035; color: rgba(255, 255, 255, 0.55); }
.theme-card--light .theme-card-label { background: #fff; color: #6b7280; border-top-color: #e5e7eb; }
.theme-card.is-selected .theme-card-label { color: #9b88ff; }
.theme-card--light.is-selected .theme-card-label { color: #4f46e5; }

.theme-check {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    background: #7c6af7;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
}
.theme-card.is-selected .theme-check { display: flex; }
.theme-check::after {
    content: '';
    width: 8px;
    height: 5px;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

/* Save button */
.save-row { padding: 4px 14px 12px; }
.save-btn {
    width: 100%;
    background: #5046e5;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
.save-btn:hover { background: #4038c7; }
.save-btn:disabled { opacity: 0.6; cursor: wait; }
.save-btn.is-saved { background: #1d9e75; }

.app-footer {
    padding: 10px 16px 14px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.22);
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════════
   INDEX PAGE — LIGHT THEME
   ═══════════════════════════════════════════════════════════════════════ */
.app-shell.is-light {
    background: #f6fafb;
    border: none;
    color: #1f2937;
}
.is-light .app-header { background: #fff; border-bottom: 1px solid #e5e7eb; }
.is-light .app-tabs { background: #fff; border-bottom: 1px solid #e5e7eb; }
.is-light .app-tab { color: #9ca3af; }
.is-light .app-tab:hover { color: #6b7280; background: #f3f4f6; }
.is-light .app-tab.is-active { color: #fff; background: #6366f1; }
.is-light .theme-hint { color: #9ca3af; }
.is-light .app-name { color: #1f2937; }
.is-light .app-sub { color: #9ca3af; }
.is-light .app-logo { background: linear-gradient(135deg, #6366f1, #818cf8); }
.is-light .app-status { color: #9ca3af; }

.is-light .sum-counter { background: #fff; border: 1px solid #e5e7eb; }
.is-light .sum-counter.is-over { background: #fef2f2; border-color: #fecaca; }
.is-light .sum-counter-label { color: #9ca3af; }
.is-light .sum-counter-value { color: #1f2937; }
.is-light .sum-counter-value .sum-counter-total { color: #9ca3af; }
.is-light .sum-counter.is-over .sum-counter-value { color: #dc2626; }
.is-light .sum-counter-bar { background: #f3f4f6; }
.is-light .sum-counter-bar-fill { background: linear-gradient(90deg, #6366f1, #818cf8); }
.is-light .sum-counter.is-over .sum-counter-bar-fill {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}
.is-light .sum-counter-warn { color: #dc2626; }
.is-light .sum-counter-risk { border-top-color: #f3f4f6; color: #6b7280; }
.is-light .sum-counter-risk-value { color: #dc2626; }
.is-light .sum-counter-risk-icon { background: #fef2f2; color: #dc2626; }

.is-light .add-btn { background: #6366f1; }
.is-light .add-btn:hover { background: #4f46e5; }
.is-light .add-menu-list {
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}
.is-light .add-menu-item { color: #374151; border-bottom-color: #f3f4f6; }
.is-light .add-menu-item:hover { background: #f9fafb; }
.is-light .add-menu-item-icon--state { background: #eef2ff; color: #6366f1; }
.is-light .add-menu-item-icon--checklist { background: #ecfdf5; color: #059669; }
.is-light .add-menu-item-icon--win { background: #fffbeb; color: #d97706; }
.is-light .add-menu-item-desc { color: #9ca3af; }

.is-light .cond { background: #fff; border: 1px solid #e5e7eb; }
.is-light .cond-head { border-bottom: 1px solid #f3f4f6; }
.is-light .cond-type--state { background: #eef2ff; color: #6366f1; }
.is-light .cond-type--checklist { background: #ecfdf5; color: #059669; }
.is-light .cond-type--win { background: #fffbeb; color: #d97706; }
.is-light .cond.is-risk {
    border-color: #fecaca;
    background: linear-gradient(180deg, #fef2f2 0%, #fff 40%);
}
.is-light .cond.is-risk .cond-head { border-bottom-color: #fee2e2; }
.is-light .cond.is-risk .cond-type--state,
.is-light .cond.is-risk .cond-type--checklist {
    background: #fef2f2;
    color: #dc2626;
}
.is-light .cond-drag { color: #d1d5db; }
.is-light .cond-drag:hover { color: #6b7280; }
.is-light .cond-title { color: #6b7280; }
.is-light .cond-delete { color: #9ca3af; }
.is-light .cond-delete:hover { color: #dc2626; background: #fef2f2; }

.is-light .field-label { color: #9ca3af; }
.is-light .dp-select,
.is-light .dp-input,
.is-light .chips-box,
.is-light .pct-number {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #1f2937;
}
.is-light .dp-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.is-light .dp-input::placeholder { color: #9ca3af; }
.is-light .chip { background: #eef2ff; border-color: #c7d2fe; color: #4f46e5; }
.is-light .chip-x { color: rgba(99, 102, 241, 0.6); }
.is-light .chip-x:hover { color: #dc2626; background: #fef2f2; }
.is-light .pct-number input { color: #1f2937; }
.is-light .pct-number-sign { color: #6b7280; }
.is-light .pct-number-prefix { color: #9ca3af; }

.is-light .pct-slider { background: #e0e7ff; }
.is-light .pct-slider::-webkit-slider-thumb {
    background: #6366f1;
    border-color: #fff;
    box-shadow: 0 0 0 1px #d1d5db;
}
.is-light .pct-slider::-moz-range-thumb { background: #6366f1; border-color: #fff; }
.is-light .pct-slider.is-risk { background: #fee2e2; }
.is-light .pct-slider.is-risk::-webkit-slider-thumb { background: #dc2626; }
.is-light .pct-slider.is-risk::-moz-range-thumb { background: #dc2626; }

.is-light .pct-number.is-risk { border-color: #fecaca; background: #fef2f2; }
.is-light .pct-number.is-risk input { color: #dc2626; }
.is-light .pct-number.is-risk .pct-number-sign { color: rgba(220, 38, 38, 0.8); }
.is-light .pct-number.is-risk .pct-number-prefix { color: #dc2626; }

.is-light .pct-win-badge { background: #fffbeb; border-color: #fde68a; color: #d97706; }

.is-light .risk-row { background: #f9fafb; border-color: #e5e7eb; }
.is-light .cond.is-risk .risk-row { background: #fef2f2; border-color: #fecaca; }
.is-light .risk-row-icon { background: #eef2ff; color: #9ca3af; }
.is-light .cond.is-risk .risk-row-icon { background: #fee2e2; color: #dc2626; }
.is-light .risk-row-title { color: #1f2937; }
.is-light .cond.is-risk .risk-row-title { color: #dc2626; }
.is-light .risk-row-desc { color: #9ca3af; }

.is-light .toggle-slider { background: #e5e7eb; border-color: #d1d5db; }
.is-light .toggle input:checked + .toggle-slider { background: #dc2626; border-color: #dc2626; }

.is-light .cond-empty { border-color: #d1d5db; color: #9ca3af; }

.is-light .settings-group { background: #fff; border: 1px solid #e5e7eb; }
.is-light .settings-group-title { color: #9ca3af; border-bottom-color: #f3f4f6; }
.is-light .theme-card.is-selected { border-color: #6366f1; }
.is-light .theme-check { background: #6366f1; }

.is-light .save-btn { background: #6366f1; }
.is-light .save-btn:hover { background: #4f46e5; }

.is-light .app-footer { color: #d1d5db; }