:root{--ground:#F7F8F4;--paper:#FFFFFF;--ink:#1F2A24;--ink2:#45524A;--muted:#5B6B61;--line:#DDE1D8;--line2:#C9CFC3;--soft:#EEF0EA;--green:#2F6B4F;--green-d:#234F3B;--branch:#C4B59B;--leaf:#A9C2AF;--warn:#8A3B2E}
*{box-sizing:border-box}
[hidden]{display:none!important}
details.more summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--green);list-style:none}
details.more summary::-webkit-details-marker{display:none}
html,body{margin:0;background:var(--ground);color:var(--ink);font-family:'Work Sans',system-ui,sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--green)}a:hover{color:var(--green-d)}
.serif{font-family:'Literata',Georgia,serif}
.name{font-family:'Literata',Georgia,serif;font-style:italic;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.script{font-family:'Dancing Script',cursive}
.app{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.page{padding:24px 24px 32px;display:flex;flex-direction:column;gap:20px;flex:1}
h1{margin:0;font-family:'Literata',Georgia,serif;font-size:28px;font-weight:600;line-height:1.2}
h2{margin:0;font-family:'Literata',Georgia,serif;font-size:19px;font-weight:600}
p{margin:0;line-height:1.5}
.lead{font-size:16px;color:var(--ink2)}
.small{font-size:13px;color:var(--muted);line-height:1.45}
.btn{min-height:54px;border-radius:14px;border:none;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font:600 17px 'Work Sans',system-ui,sans-serif;text-decoration:none;cursor:pointer;padding:0 18px;width:100%}
.btn:hover{background:var(--green-d);color:#fff}
.btn.ghost{background:var(--paper);color:var(--green);border:1.5px solid var(--green)}
.btn.ghost:hover{background:var(--soft)}
.btn.small{min-height:44px;font-size:15px;width:auto}
.linkbtn{background:none;border:none;padding:10px 0;font:600 15px 'Work Sans',system-ui,sans-serif;color:var(--green);cursor:pointer;text-align:left;min-height:44px}
label.f{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{min-height:52px;padding:0 14px;border-radius:12px;border:1.5px solid var(--line2);background:var(--paper);font:400 17px 'Work Sans',system-ui,sans-serif;color:var(--ink);width:100%}
textarea{padding:12px 14px;min-height:88px}
input:focus,select:focus,textarea:focus{outline:3px solid #A9C2AF;border-color:var(--green)}
.check{display:flex;align-items:center;gap:12px;min-height:44px;font-size:15px;line-height:1.4}
.check input{width:22px;height:22px;accent-color:var(--green);flex-shrink:0}
.code{font:600 30px 'Literata',Georgia,serif;letter-spacing:.5em;text-align:center;padding-left:.5em}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.note{display:flex;gap:10px;padding:14px;border-radius:12px;background:var(--soft);font-size:14px;line-height:1.45;color:var(--ink2)}
.error{background:#F6E7E3;color:var(--warn);padding:12px 14px;border-radius:12px;font-size:15px}
.ok{background:#E3EFE7;color:var(--green-d);padding:12px 14px;border-radius:12px;font-size:15px}
.back{width:44px;height:44px;margin-left:-12px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.spacer{flex:1}
header.top{padding:24px 20px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.iconbtn{width:44px;height:44px;border-radius:22px;border:1px solid #D3D8CE;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.tree{position:relative;flex:1;overflow:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background-color:var(--soft);background-image:radial-gradient(#D3D8CE 1px,transparent 1px);background-size:18px 18px;min-height:420px;-webkit-overflow-scrolling:touch;cursor:grab}
.tree.dragging{cursor:grabbing}
.tree-inner{position:relative}
.tcard{position:absolute;width:176px;height:66px;padding:9px 12px;border-radius:12px;border:1px solid #D3D8CE;background:#fff;display:flex;flex-direction:column;justify-content:center;gap:2px;text-decoration:none;color:var(--ink);box-shadow:0 1px 2px rgba(31,42,36,.08)}
.tcard .name{font-size:16px;line-height:1.25}
.tcard .meta{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard.anc{border:1.5px dashed #9AA89E;background:var(--ground);box-shadow:none}
.tcard.prof{border:1.5px dashed var(--green);background:var(--ground);box-shadow:none}
.tcard.me{border:2px solid var(--green);box-shadow:0 4px 12px rgba(47,107,79,.18)}
.hint{position:sticky;left:0;top:10px;display:flex;justify-content:center;align-items:flex-start;z-index:2;pointer-events:none;height:0;width:100%}
.hint span{background:var(--ink);color:#fff;font-size:12px;padding:6px 12px;border-radius:14px;white-space:nowrap}
nav.bottom{position:sticky;bottom:0;height:68px;padding:6px 12px 14px;display:flex;justify-content:space-around;border-top:1px solid var(--line);background:#fff}
nav.bottom a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:500;color:var(--muted);text-decoration:none;min-width:64px}
nav.bottom a.on{color:var(--green);font-weight:600}
.tabs{display:flex;gap:6px;padding:4px;border-radius:12px;background:var(--soft)}
.tabs a{flex:1;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none}
.tabs a.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(31,42,36,.12)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:16px;background:var(--soft);font-size:13px;font-weight:500}
.chip.dash{background:transparent;border:1.5px dashed #9AA89E;color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.thumb{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#D9CBB8;display:block}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .tag{position:absolute;left:6px;bottom:6px;padding:2px 6px;border-radius:6px;background:rgba(31,42,36,.8);color:#fff;font-size:11px}
.year{font-family:'Literata',Georgia,serif;font-size:18px;font-weight:600;margin-top:6px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1px solid var(--soft)}
.row:last-child{border-bottom:none}
.avatar{width:56px;height:56px;border-radius:28px;background:var(--green);color:#fff;font-size:18px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
fieldset{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
legend{font-size:15px;font-weight:600;padding:0;margin-bottom:6px}
.badge{display:inline-flex;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--warn);color:#fff;font-size:12px;font-weight:600;align-items:center;justify-content:center}
.viewer img{width:100%;border-radius:12px;display:block;background:#ddd}

.qopt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;margin-bottom:8px}
.qopt input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex-shrink:0}
.qopt:has(input:checked){border:2px solid var(--green);box-shadow:0 4px 12px rgba(47,107,79,.15)}
.camera{position:relative;border-radius:16px;overflow:hidden;background:#1F2A24;aspect-ratio:3/4;max-height:56vh}
.camera video{width:100%;height:100%;object-fit:cover;display:block}
.camera video[data-preview]{transform:scaleX(-1)}
.timer{position:absolute;left:12px;top:12px;background:rgba(31,42,36,.8);color:#fff;font-size:14px;font-weight:600;padding:4px 10px;border-radius:12px}
.recdot{width:14px;height:14px;border-radius:7px;background:#fff;display:inline-block}
.bar{height:10px;border-radius:5px;background:var(--soft);overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--green);transition:width .2s}
.vcard{display:flex;gap:12px;padding:12px;border-radius:14px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);align-items:center}
.vthumb{position:relative;width:96px;height:72px;flex-shrink:0;border-radius:10px;background:#3E5C4C;display:flex;align-items:center;justify-content:center;color:#fff}
.vthumb .dur{position:absolute;right:6px;bottom:6px;padding:1px 6px;border-radius:6px;background:rgba(31,42,36,.8);font-size:11px}
.pthumb{width:64px;height:64px;flex-shrink:0;border-radius:32px;background:#C9B79C;overflow:hidden}
.pthumb img{width:100%;height:100%;object-fit:cover}
.addlinks{display:flex;gap:8px;flex-wrap:wrap}
.addlinks a{font-size:14px;font-weight:600;padding:8px 12px;border-radius:16px;border:1.5px dashed #9AA89E;text-decoration:none;min-height:36px;display:inline-flex;align-items:center}