@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: #CCFBF1; color: #0F766E; }
body { font-family: 'DM Sans', 'Avenir Next', system-ui, sans-serif; color: #1E293B; background: #FAFCFB; -webkit-font-smoothing: antialiased; }

.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(250,252,251,0.85); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(226,232,240,0.6); padding: 14px 0; }
.nav-inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.wordmark { font-size: 19px; font-weight: 700; color: #1E293B; letter-spacing: -0.3px; }
.wordmark span { font-weight: 400; color: #0D9488; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { text-decoration: none; color: #64748B; font-size: 14px; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover { color: #0D9488; }
.nav-links a.active { color: #0D9488; font-weight: 600; }
.nav-cta { background: #0D9488 !important; color: #fff !important; padding: 9px 22px !important; border-radius: 10px; font-weight: 600 !important; box-shadow: 0 2px 8px rgba(13,148,136,0.2); transition: all 0.25s ease !important; }
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,148,136,0.3) !important; }
.nav-mobile-toggle { display: none; background: none; border: none; color: #475569; cursor: pointer; }

.hidden { display: none !important; }

.auth-gate { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.auth-card { text-align: center; max-width: 380px; background: white; border-radius: 20px; padding: 48px 36px; border: 1px solid #E2E8F0; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.auth-card svg { margin-bottom: 24px; }
.auth-card h2 { font-size: 22px; font-weight: 700; color: #0e2a3b; margin-bottom: 12px; }
.auth-card p { font-size: 14px; color: #64748B; margin-bottom: 24px; line-height: 1.6; }

.tf-page { padding-top: 60px; min-height: 100vh; }

.tf-header { padding: 56px 24px 40px; text-align: center; }
.tf-header-inner { max-width: 680px; margin: 0 auto; }
.tf-header .section-label { font-size: 13px; font-weight: 700; color: #0D9488; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; }
.tf-header h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 36px; font-weight: 600; color: #1E293B; margin-bottom: 16px; line-height: 1.2; }
.tf-header h1 em { color: #0D9488; font-style: normal; }
.tf-header p { font-size: 17px; color: #64748B; max-width: 560px; margin: 0 auto; line-height: 1.6; }

.tf-templates { padding: 0 24px 40px; }
.tf-templates-inner { max-width: 900px; margin: 0 auto; }
.tf-templates-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.tf-templates-header h2 { font-size: 22px; font-weight: 700; color: #0e2a3b; }
.tf-search-box { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #fff; border: 1.5px solid #E2E8F0; border-radius: 10px; min-width: 240px; }
.tf-search { border: none; outline: none; font-size: 13px; color: #1E293B; font-family: inherit; width: 100%; background: transparent; }
.tf-search::placeholder { color: #94A3B8; }

.tf-categories { display: flex; flex-direction: column; gap: 8px; }

.tf-cat { border: 1.5px solid #E2E8F0; border-radius: 12px; overflow: hidden; background: white; }
.tf-cat-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; user-select: none; transition: background 0.15s; }
.tf-cat-header:hover { background: #F8FAFC; }
.tf-cat-header .icon { font-size: 16px; }
.tf-cat-header .label { flex: 1; font-weight: 700; font-size: 14px; color: #0e2a3b; }
.tf-cat-header .count { font-size: 11px; color: #64748B; background: #F1F5F9; padding: 3px 9px; border-radius: 10px; font-weight: 600; }
.tf-cat-header .arrow { font-size: 11px; color: #94A3B8; transition: transform 0.2s; }
.tf-cat.open .tf-cat-header .arrow { transform: rotate(180deg); }

.tf-cat-list { display: none; border-top: 1px solid #E2E8F0; }
.tf-cat.open .tf-cat-list { display: block; }

.tf-tpl-item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; cursor: pointer; transition: background 0.15s; border-bottom: 1px solid rgba(226,232,240,0.4); }
.tf-tpl-item:last-child { border-bottom: none; }
.tf-tpl-item:hover { background: #F0FDFA; }
.tf-tpl-item .tpl-name { flex: 1; font-size: 13.5px; font-weight: 500; color: #1E293B; line-height: 1.4; }
.tf-tpl-item .zone-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.zone-dot.green { background: #0D9488; }
.zone-dot.amber { background: #F59E0B; }
.zone-dot.red { background: #EF4444; }
.tf-tpl-item .tpl-zone { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.tpl-zone.green { background: #F0FDFA; color: #0D9488; }
.tpl-zone.amber { background: #FFFBEB; color: #D97706; }
.tpl-zone.red { background: #FEF2F2; color: #DC2626; }
.tf-tpl-item .tpl-download { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #0D9488; opacity: 0; transition: opacity 0.15s; white-space: nowrap; }
.tf-tpl-item:hover .tpl-download { opacity: 1; }

.zone-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.zone-badge.green { background: #F0FDFA; color: #0D9488; border: 1px solid #99F6E4; }
.zone-badge.amber { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }
.zone-badge.red { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }

.tf-preview-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 24px; }
.tf-preview-panel { background: white; border-radius: 16px; width: 100%; max-width: 900px; height: 85vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.tf-preview-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid #E2E8F0; gap: 16px; flex-wrap: wrap; }
.tf-preview-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tf-preview-info h2 { font-size: 17px; font-weight: 700; color: #0e2a3b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-preview-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tf-preview-body { flex: 1; overflow: auto; background: #fff; }
.tf-preview-frame { width: 100%; height: 100%; border: none; background: #fff; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; font-family: inherit; text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: #0e2a3b; color: #fff; }
.btn-primary:hover:not(:disabled) { background: #0a1f2e; }
.btn-green { background: #0D9488; color: #fff; }
.btn-green:hover:not(:disabled) { background: #0B7C72; }
.btn-outline { background: transparent; color: #64748B; border: 1.5px solid #E2E8F0; }
.btn-outline:hover { background: #F8FAFC; color: #0e2a3b; border-color: #CBD5E1; }
.footer-text { text-align: center; font-size: 11px; color: #94A3B8; line-height: 1.4; max-width: 600px; margin: 8px auto 0; padding: 0 24px 48px; }

@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-mobile-toggle { display: block; }
  .tf-header h1 { font-size: 28px; }
  .tf-search-box { min-width: 0; flex: 1; }
  .tf-templates-header { flex-direction: column; align-items: stretch; }
  .tf-preview-panel { height: 95vh; border-radius: 12px; }
  .tf-preview-toolbar { flex-direction: column; align-items: flex-start; }
}