:root{--ink: #14110c;--ink-2: #1d1913;--ink-3: #2a241a;--ink-4: #353018;--paper: #f4ede0;--paper-dim: #b8ad99;--amber: #f0a830;--amber-deep: #c97f1a;--line: #3a3225;--ok: #8fb86a;--err: #e07070;--blue: #7ab8e8;--pink: #e8a0c0}*{box-sizing:border-box;margin:0;padding:0}html{height:100%}body{background:#14110c;color:#f4ede0;font-family:"JetBrains Mono",monospace;line-height:1.6}.serif{font-family:"Instrument Serif",serif;font-weight:400}button{font-family:inherit;cursor:pointer}@keyframes spin{to{transform:rotate(360deg)}}.topbar{display:flex;align-items:center;gap:14px;padding:0 20px;height:48px;border-bottom:1px solid #3a3225;background:#1d1913;flex-shrink:0}.topbar-sep{color:#3a3225;font-size:18px}.topbar-spacer{flex:1}.topbar-crumb{font-size:12px;color:#b8ad99}.topbar-crumb b{color:#f4ede0}.topbar-links{display:flex;gap:20px;font-size:12px}.topbar-links a{color:#b8ad99;transition:color .15s;text-decoration:none}.topbar-links a:hover{color:#f0a830}.logo{font-size:20px;letter-spacing:-0.5px;text-decoration:none;color:#f4ede0;flex-shrink:0}.logo .serif{font-size:25px;font-style:italic;color:#f0a830}.keyfield{display:flex;align-items:center;gap:7px;font-size:11px;color:#b8ad99}.keyfield input{background:#14110c;border:1px solid #3a3225;color:#f4ede0;padding:5px 9px;border-radius:3px;font-family:inherit;font-size:11px;width:200px;outline:none}.keyfield input:focus{border-color:#c97f1a}.dot{width:7px;height:7px;border-radius:50%;background:#b8ad99;flex-shrink:0}.dot.on{background:#8fb86a}.dot.off{background:#e07070}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);background:#353018;border:1px solid #c97f1a;color:#f4ede0;padding:11px 20px;border-radius:4px;font-size:13px;transition:transform .25s;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,.5);white-space:nowrap}.toast.show{transform:translateX(-50%) translateY(0)}.toast.err{border-color:#e07070}.btn-ghost{font-family:inherit;font-size:13px;padding:10px 20px;background:rgba(0,0,0,0);color:#b8ad99;border:1px solid #3a3225;border-radius:3px;cursor:pointer;transition:all .12s}.btn-ghost:hover{border-color:#b8ad99;color:#f4ede0}.btn-danger{font-family:inherit;font-size:13px;padding:10px 20px;background:#e07070;color:#fff;border:1px solid #e07070;border-radius:3px;cursor:pointer;font-weight:700;transition:opacity .12s}.btn-danger:hover{opacity:.85}.copy-btn{font-family:inherit;font-size:10px;padding:3px 8px;background:rgba(0,0,0,0);border:1px solid #3a3225;color:#b8ad99;border-radius:2px;cursor:pointer;flex-shrink:0;transition:all .12s}.copy-btn:hover{border-color:#c97f1a;color:#f0a830}.copy-btn.ok,.copy-btn.copied{border-color:#8fb86a;color:#8fb86a}body{min-height:100%;display:flex;flex-direction:column;background-image:repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(240, 168, 48, 0.025) 39px, rgba(240, 168, 48, 0.025) 40px),repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(240, 168, 48, 0.025) 39px, rgba(240, 168, 48, 0.025) 40px)}.topbar{gap:16px;padding:14px 28px;height:auto;position:sticky;top:0;z-index:20;flex-shrink:0}.logo{font-size:20px;letter-spacing:-0.5px;text-decoration:none;color:#f4ede0}.logo .serif{font-size:25px;font-style:italic;color:#f0a830}.crumb{font-size:12px;color:#b8ad99}.crumb b{color:#f4ede0}.topbar-sep{color:#3a3225}.keyfield input{width:220px;padding:6px 10px}.content{max-width:1100px;margin:0 auto;padding:48px 28px 80px;flex:1;width:100%}.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:40px;flex-wrap:wrap}.page-title{font-size:32px;font-weight:700;letter-spacing:-1px}.page-title .serif{font-style:italic;color:#f0a830;font-weight:400}.count-badge{display:inline-block;background:#2a241a;border:1px solid #3a3225;color:#b8ad99;font-size:12px;padding:2px 9px;border-radius:20px;vertical-align:middle;margin-left:10px}.btn-new{font-family:inherit;font-size:13px;font-weight:700;padding:12px 22px;background:#f0a830;color:#14110c;border:1px solid #f0a830;border-radius:3px;cursor:pointer;text-decoration:none;display:inline-block;box-shadow:3px 3px 0 #c97f1a;transition:transform .12s,box-shadow .15s;white-space:nowrap}.btn-new:hover{transform:translate(-1px, -1px);box-shadow:4px 4px 0 #c97f1a}.state-box{text-align:center;padding:80px 20px;color:#b8ad99;font-size:14px;line-height:1.8}.empty-state{text-align:center;padding:80px 20px}.empty-state .serif{font-size:42px;font-style:italic;color:#f0a830;display:block;margin-bottom:14px}.empty-state p{font-size:14px;color:#b8ad99;max-width:38ch;margin:0 auto 28px;line-height:1.7}.spinner{display:inline-block;width:20px;height:20px;border:2px solid #3a3225;border-top-color:#f0a830;border-radius:50%;animation:spin .7s linear infinite;margin-right:8px;vertical-align:middle}@keyframes spin{to{transform:rotate(360deg)}}.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));gap:18px}.card{background:#1d1913;border:1px solid #3a3225;border-radius:4px;display:flex;flex-direction:column;transition:border-color .15s}.card:hover{border-color:#c97f1a}.card-head{display:flex;align-items:flex-start;gap:10px;padding:18px 18px 14px;border-bottom:1px solid #3a3225}.card-name{font-size:16px;font-weight:700;letter-spacing:-0.3px;flex:1;word-break:break-word}.card-actions{display:flex;gap:6px;flex-shrink:0}.btn-edit{font-family:inherit;font-size:11px;padding:6px 12px;background:rgba(0,0,0,0);color:#f0a830;border:1px solid #c97f1a;border-radius:3px;cursor:pointer;text-decoration:none;display:inline-block;transition:background .12s}.btn-edit:hover{background:rgba(240,168,48,.1)}.btn-del{font-family:inherit;font-size:11px;padding:6px 10px;background:rgba(0,0,0,0);color:#b8ad99;border:1px solid #3a3225;border-radius:3px;cursor:pointer;transition:all .12s}.btn-del:hover{border-color:#e07070;color:#e07070}.card-id{padding:10px 18px;border-bottom:1px solid #3a3225;display:flex;align-items:center;gap:8px;font-size:11px;color:#b8ad99}.id-val{color:#c97f1a;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.copy-btn{font-family:inherit;font-size:10px;padding:3px 8px;background:rgba(0,0,0,0);border:1px solid #3a3225;color:#b8ad99;border-radius:2px;cursor:pointer;flex-shrink:0;transition:all .12s}.copy-btn:hover{border-color:#c97f1a;color:#f0a830}.copy-btn.ok{border-color:#8fb86a;color:#8fb86a}.card-source{padding:14px 18px;flex:1;font-size:11px;color:#b8ad99;line-height:1.7;overflow:hidden;max-height:96px;white-space:pre-wrap;word-break:break-all;position:relative}.card-source::after{content:"";position:absolute;bottom:0;left:0;right:0;height:32px;background:linear-gradient(transparent, #1d1913)}.card-foot{padding:10px 18px;border-top:1px solid #3a3225;display:flex;gap:16px;font-size:10px;color:#b8ad99;flex-wrap:wrap}.card-foot span b{color:#b8ad99}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:#1d1913;border:1px solid #c97f1a;border-radius:4px;padding:32px 36px;max-width:400px;width:90%;box-shadow:0 16px 48px rgba(0,0,0,.6)}.modal h3{font-size:20px;margin-bottom:10px}.modal-tplname{font-size:14px;color:#f0a830;margin-bottom:8px;font-weight:700}.modal-warn{font-size:12px;color:#b8ad99;margin-bottom:28px;line-height:1.6}.modal-actions{display:flex;gap:10px;justify-content:flex-end}.toast{z-index:200;padding:12px 22px}