.ftl-wrap{max-width:1100px;margin:0 auto;padding:1rem}
.ftl-toolbar{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:.75rem 1rem;margin-bottom:.75rem}
.ftl-inline{display:flex;align-items:center;gap:.5rem}
.ftl-primary{background:#111827;color:#fff;border:1px solid #111827}
.ftl-primary:hover{opacity:.9}
.ftl-columns{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem}
.ftl-tree,.ftl-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1rem}
.ftl-empty-big{color:#6b7280;padding:2rem;text-align:center}
.ftl-title-row{font-weight:800}
.ftl-subtitle{color:#6b7280;margin-top:.15rem;font-size:.9rem}
.ftl-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.ftl-a{padding:.45rem .75rem;border:1px solid #d1d5db;border-radius:8px;background:#f9fafb;cursor:pointer}
.ftl-a.subtle{background:#fff}
.ftl-a.danger{background:#fee2e2;border-color:#fecaca}
.ftl-a:hover{background:#f3f4f6}
/* Find control */
.ftl-find-wrap{display:flex;align-items:center;gap:.5rem}
#ftl-find{width:220px;padding:.5rem;border:1px solid #d1d5db;border-radius:8px}
/* Couple header */
.ftl-couple{display:flex;align-items:center;gap:.35rem;margin-bottom:.35rem}
.ftl-join{opacity:.7}
/* Tree */
.ftl-tree-ul, .ftl-tree-ul ul{list-style:none;padding-left:1.25rem;position:relative}
.ftl-tree-ul ul:before{content:'';position:absolute;top:0;left:0;border-left:1px solid #d1d5db;height:100%}
.ftl-tree-ul li{position:relative;margin:.5rem 0}
.ftl-tree-ul li:before{content:'';position:absolute;top:0.9rem;left:-1.25rem;width:1.25rem;border-top:1px solid #d1d5db}
.ftl-node{display:inline-block;padding:.35rem .6rem;border:1px solid #d1d5db;border-radius:9999px;cursor:pointer;background:#fff}
.ftl-node.spouse{background:#f8fafc}
.ftl-node:hover{background:#f3f4f6}
/* Edit form */
#ftl-editor label{display:block;margin:.4rem 0;font-weight:600}
#ftl-editor input,#ftl-editor select,#ftl-editor textarea{width:100%;padding:.5rem;border:1px solid #d1d5db;border-radius:8px}
.ftl-adv{margin-top:.5rem}
.ftl-adv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.ftl-form-actions{display:flex;gap:.5rem;margin-top:.6rem}
/* Login hint */
.ftl-login-hint a{text-decoration:underline}


/* === v1.9.1 Mobile enhancements === */
.ftl-tree{overflow-x:auto; -webkit-overflow-scrolling:touch}
.ftl-node{white-space:normal; word-break:break-word}

@media (max-width: 800px){
  .ftl-columns{grid-template-columns:1fr; gap:.75rem}
  .ftl-side{order:2}
  .ftl-tree{order:1; min-height:240px}
  .ftl-toolbar{flex-wrap:wrap; gap:.5rem}
  .ftl-toolbar .ftl-right{width:100%; display:flex; flex-wrap:wrap; gap:.5rem}
  #ftl-find{flex:1 1 180px; min-width:0; width:auto}
  .ftl-toolbar button{flex:0 0 auto}
  .ftl-actions{gap:.4rem}
  .ftl-a{padding:.4rem .6rem}
  .ftl-node{padding:.3rem .5rem; font-size:.9rem}
  .ftl-tree-ul, .ftl-tree-ul ul{padding-left:.75rem}
  .ftl-tree-ul li:before{left:-.75rem; width:.75rem}
  .ftl-couple{flex-wrap:wrap}
}

@media (max-width: 480px){
  .ftl-toolbar{padding:.6rem}
  .ftl-card{padding:.75rem}
  #ftl-find{flex:1 1 100%; width:100%}
  .ftl-toolbar .ftl-right button{flex:1 1 calc(50% - .5rem)}
  .ftl-primary{width:100%}
  .ftl-actions .ftl-a{flex:1 1 calc(50% - .4rem); text-align:center}
}