/* Family Tree Maker v3 — Paid tool, no ads */

@font-face { font-family: 'TiroMarathi'; src: url('/assets/fonts/TiroDevanagariMarathi-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

.ft-page { display: flex; flex-direction: column; height: calc(100vh - 64px); overflow: hidden; }
.ft-page[data-lang="mr"] .ft-input, .ft-page[data-lang="mr"] .ft-btn, .ft-page[data-lang="mr"] .ft-panel__heading, .ft-page[data-lang="mr"] .ft-label, .ft-page[data-lang="mr"] .ft-selected-info, .ft-page[data-lang="mr"] .ft-title-input, .ft-page[data-lang="mr"] .ft-empty__title, .ft-page[data-lang="mr"] .ft-empty__text, .ft-page[data-lang="mr"] .ft-panel__help ul { font-family: 'TiroMarathi', 'Noto Sans Devanagari', sans-serif; }

.ft-lang-row { display: flex; gap: 3px; }
.ft-lang-btn { flex: 1; padding: 6px; border: 2px solid var(--gray-200); border-radius: var(--radius-md); background: var(--bg-primary); font-size: 12px; font-weight: 600; cursor: pointer; text-align: center; transition: all 0.15s; }
.ft-lang-btn.active { border-color: var(--primary-500); background: var(--primary-50); color: var(--primary-700); }

.ft-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--gray-100); flex-shrink: 0; gap: 8px; flex-wrap: wrap; }
.ft-toolbar__left, .ft-toolbar__right { display: flex; align-items: center; gap: 5px; }
.ft-toolbar__center { flex: 1; display: flex; justify-content: center; }
.ft-toolbar__title { font-size: 14px; font-weight: 700; margin: 0; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.ft-toolbar__title svg { flex-shrink: 0; }
.ft-title-input { border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 6px 12px; font-size: 14px; font-weight: 600; text-align: center; width: 220px; background: var(--bg-primary); }
.ft-title-input:focus { outline: none; border-color: var(--primary-400); }
.ft-divider { width: 1px; height: 24px; background: var(--gray-200); margin: 0 2px; }

.ft-btn { padding: 6px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--bg-primary); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s; color: var(--text-primary); display: inline-flex; align-items: center; gap: 5px; }
.ft-btn svg { flex-shrink: 0; }
.ft-btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
.ft-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ft-btn--icon { padding: 6px 8px; }
.ft-btn--primary { background: var(--primary-600); color: #fff; border-color: var(--primary-600); }
.ft-btn--primary:hover { background: var(--primary-700); }
.ft-btn--danger { background: #ef4444; color: #fff; border-color: #ef4444; }
.ft-btn--danger:hover { background: #dc2626; }
.ft-btn--full { width: 100%; justify-content: center; }
.ft-btn--sm { padding: 5px 10px; font-size: 11px; }
.ft-btn--success { background: #22c55e; color: #fff; border-color: #22c55e; }

.ft-workspace { display: flex; flex: 1; overflow: hidden; }

.ft-panel { width: 260px; flex-shrink: 0; background: var(--bg-primary); border-right: 1px solid var(--gray-100); overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.ft-panel__section { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 12px; border: 1px solid var(--gray-100); }
.ft-panel__heading { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-tertiary); letter-spacing: 0.5px; margin-bottom: 8px; }
.ft-panel__help ul { margin: 0; padding-left: 14px; font-size: 11px; color: var(--text-secondary); line-height: 1.7; }
.ft-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); }

.ft-input { width: 100%; padding: 7px 10px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-md); font-size: 13px; background: var(--bg-primary); box-sizing: border-box; margin-bottom: 6px; }
.ft-input:focus { outline: none; border-color: var(--primary-400); }

.ft-gender-row { display: flex; gap: 4px; margin-bottom: 6px; }
.ft-gender-btn { flex: 1; padding: 5px; border: 2px solid var(--gray-200); border-radius: var(--radius-md); background: var(--bg-primary); font-size: 12px; font-weight: 600; cursor: pointer; text-align: center; transition: all 0.15s; }
.ft-gender-btn--male.active { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; }
.ft-gender-btn--female.active { border-color: #ec4899; background: #fdf2f8; color: #be185d; }

.ft-highlight-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ft-color-pick { width: 28px; height: 28px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); cursor: pointer; padding: 0; background: none; }

.ft-add-btns { display: flex; flex-direction: column; gap: 5px; }
.ft-edit-btns { display: flex; gap: 5px; }
.ft-edit-btns .ft-btn { flex: 1; }
.ft-selected-info { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; padding: 5px 8px; background: var(--bg-tertiary); border-radius: var(--radius-sm); }

.ft-pricing { padding: 8px 12px; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); border-radius: var(--radius-md); font-size: 11px; color: #b45309; font-weight: 500; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }
.ft-pricing svg { flex-shrink: 0; }

.ft-canvas-wrap { flex: 1; position: relative; overflow: hidden; background: #f8fafc; background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px); background-size: 20px 20px; cursor: grab; }
.ft-canvas-wrap:active { cursor: grabbing; }
.ft-canvas-wrap canvas { position: absolute; top: 0; left: 0; }

.ft-empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.ft-empty.hidden { display: none; }
.ft-empty__icon { margin-bottom: 10px; color: var(--text-tertiary); }
.ft-empty__title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.ft-empty__text { font-size: 13px; color: var(--text-secondary); }

.ft-zoom-info { position: absolute; bottom: 10px; right: 10px; background: var(--bg-primary); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 3px 8px; font-size: 11px; font-weight: 600; color: var(--text-secondary); pointer-events: none; }

/* Confirm dialog */
.ft-confirm-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ft-confirm-box { background: var(--bg-primary); border-radius: var(--radius-xl); padding: 28px 24px; max-width: 380px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); text-align: center; }
.ft-confirm-icon { color: #f59e0b; margin-bottom: 12px; }
.ft-confirm-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.ft-confirm-msg { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
.ft-confirm-note { font-size: 11px; color: var(--text-tertiary); margin-bottom: 20px; padding: 8px; background: var(--bg-tertiary); border-radius: var(--radius-md); }
.ft-confirm-btns { display: flex; gap: 10px; }
.ft-confirm-btns .ft-btn { flex: 1; padding: 10px; justify-content: center; font-size: 13px; }

@media (max-width: 768px) {
    .ft-workspace { flex-direction: column; }
    .ft-panel { width: 100%; max-height: 220px; border-right: none; border-bottom: 1px solid var(--gray-100); flex-direction: row; flex-wrap: wrap; overflow-x: auto; }
    .ft-panel__section { min-width: 200px; flex: 1; }
    .ft-toolbar__center { display: none; }
}