:root{--accent: #8B2635;--primary: #2e3532;--secondary: #D3EFBD;--light: #d2d4c8;--background: #e0e2db;--text: var(--dark);--sidebar-background: #2e3532;--sidebar-selected-text-color: var(--primary);--sidebar-selected-background: var(--secondary);--template-ref-background-color: #fff2f2;--template-header-background-color: #dacbcb;--item-hover-background-color: var(--light);--button-background: var(--primary)}body{font-family:system-ui,sans-serif;background:var(--background);color:var(--text);margin:0;padding:0}#app{max-width:900px;background:var(--background);border-radius:8px;box-shadow:0 2px 8px #00000012;padding:2em}h1{text-align:center;margin-bottom:1.5em;color:var(--primary)}.templates-section{margin-bottom:1em}.templates-list{list-style:none;padding:0;margin:.5em 0 0}.template-name{padding:.5em 1em;border-radius:4px;cursor:pointer;transition:background .2s}.template-name:hover{background:#e9ecef}.new-template-section{margin-bottom:2em;padding-bottom:1em;border-bottom:1px solid #e9ecef}.new-template-input{padding:.5em;margin-right:.5em;border:1px solid #ced4da;border-radius:4px}.new-template-btn{padding:.5em 1em;background:var(--primary);color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background .2s}.new-template-btn:hover{background:var(--primary-hover)}.selected-template-section .item{display:flex;align-items:center;justify-content:flex-start}.selected-template-section .remove-item-btn{margin-left:auto}.rename-form{margin-bottom:1em}.rename-input{padding:.5em;margin-right:.5em;border:1px solid #ced4da;border-radius:4px}.rename-btn{padding:.5em 1em;background:var(--secondary);color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background .2s}.rename-btn:hover{background:var(--primary);color:var(--dark)}.items-list{list-style:none;padding:0;margin:.5em 0 1em}.item{display:flex;align-items:center;justify-content:flex-start;padding:.5em .5em .5em 1em;border-bottom:1px solid #e9ecef}.item input[type=checkbox]{margin-right:.7em}.item span{flex:1 1 auto;text-align:left}.item,.template-ref-header,.template-ref-item{transition:background .15s,font-weight .15s;align-items:center}.item:hover,.template-ref-header:hover,.template-ref-item:hover{background:var(--item-hover-background-color);cursor:pointer;font-weight:700}.remove-item-btn{padding:.3em .8em;background:var(--button-background);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.9em;transition:background .2s;margin-left:1em}.remove-item-btn:hover{background:var(--accent);color:var(--dark)}.add-item-form{display:flex;align-items:center;gap:.5em;margin-bottom:.5em}.add-item-input{flex:1 1 auto;padding:.5em;border:1px solid #ced4da;border-radius:4px}.add-item-btn{padding:.5em 1.2em;background:var(--primary);color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background .2s}.add-item-btn:hover{background:var(--accent);color:var(--dark)}.add-template-link-row{display:flex;align-items:center;gap:.7em;margin-bottom:1em}.add-template-or{color:var(--text);font-size:1em}.add-template-select{flex:1 1 auto;min-width:0;padding:.4em 1em;border:1px solid #ced4da;border-radius:4px;font-size:1em}.delete-template-btn{margin-top:1em;padding:.5em 1em;background:var(--secondary);color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background .2s}.delete-template-btn:hover{background:var(--accent);color:var(--dark)}.checked span{color:#888;text-decoration:line-through}.template-ref-header{font-weight:700;color:gray;border-right:4px solid var(--accent);background:var(--template-header-background-color);display:flex;align-items:center;justify-content:flex-end;padding-right:1em}.template-ref-header span,.template-ref-item span{flex:1 1 auto;text-align:left}.template-ref-item{border-right:4px solid var(--accent);background:var(--template-ref-background-color)}.layout{display:flex;max-width:900px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000012}.sidebar{width:220px;background:var(--sidebar-background);color:var(--light);border-right:1px solid #e0e4ea;padding:1.5em .5em 1.5em 1em;display:flex;flex-direction:column;gap:2em;overflow-y:auto;height:100%;min-height:0;box-sizing:border-box}.sidebar-section{margin-bottom:1em}.sidebar-section-header{font-weight:700;font-size:1.1em;display:flex;align-items:center;justify-content:space-between;margin-bottom:.5em}.sidebar-add-btn{background:var(--accent);color:#fff;border:none;border-radius:50%;width:1.7em;height:1.7em;font-size:1.2em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.sidebar-add-btn:hover{background:#0056b3}.sidebar-list{list-style:none;padding:0;margin:0}.sidebar-list-item{padding:.5em .7em;border-radius:4px;cursor:pointer;margin-bottom:.2em;transition:background .15s,font-weight .15s}.sidebar-list-item.selected{background:var(--sidebar-selected-background);color:var(--sidebar-selected-text-color);font-weight:700}.sidebar-list-item:hover{background:var(--sidebar-selected-background);color:var(--sidebar-selected-text-color)}.sidebar-new-form{display:flex;gap:.5em;margin:.5em 0}.sidebar-new-input{flex:1 1 auto;padding:.4em;border:1px solid #ced4da;border-radius:4px}.sidebar-new-submit{padding:.4em 1em;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background .2s}.sidebar-new-submit:hover{background:#0056b3}.sidebar-actions{display:flex;gap:.7em;justify-content:center;position:static;padding-bottom:.5em;background:none}.sidebar-action-btn{background:var(--accent);color:var(--primary);border:none;border-radius:6px;padding:.5em 1.2em;font-size:1em;font-weight:700;cursor:pointer;box-shadow:0 1px 4px #00000012;transition:background .2s,color .2s}.sidebar-action-btn:hover{background:var(--primary);color:var(--accent)}.main-content{flex:1 1 auto;padding:2em 2.5em;overflow-y:auto;min-width:0}.main-placeholder{color:#888;font-size:1.2em;text-align:center;margin-top:4em}.version-footer{text-align:center;padding:1em;color:#888;font-size:.9em;border-top:1px solid #e9ecef;margin-top:2em}.toast-notification{position:fixed;left:50%;bottom:2em;transform:translate(-50%);background:var(--secondary);color:#fff;padding:1em 2em;border-radius:8px;box-shadow:0 2px 8px #0003;z-index:1000;font-size:1em;display:flex;align-items:center;gap:1em}.toast-undo-btn{background:#fff;color:var(--primary);border:none;border-radius:4px;padding:.4em 1em;font-weight:700;cursor:pointer;transition:background .2s,color .2s}.toast-undo-btn:hover{background:var(--accent);color:var(--dark)}.main-header-row{display:flex;align-items:center;gap:.7em;margin-bottom:1.2em;background:var(--accent);color:var(--light);padding:1em 1.2em;border-radius:8px;width:100%;box-sizing:border-box}.main-title{font-size:1.5em;font-weight:700;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dark);line-height:1.2}.edit-title-btn{font-size:large;background:none;border:none;padding:.2em .4em;cursor:pointer;display:flex;align-items:center;border-radius:4px;transition:background .2s;color:var(--secondary)}.edit-title-btn:hover{background:#f8fbff;color:var(--primary)}.mobile-back-btn{margin-bottom:1em;padding:.7em 0;background:#f5f7fa;border:none;border-bottom:1px solid #e0e4ea;font-size:1.1em;font-weight:700;color:var(--primary);cursor:pointer;text-align:left;transition:background .2s}.mobile-back-btn:active{background:#e3f0ff}.mobile-back-btn.icon-btn{display:flex;align-items:center;justify-content:center;width:2.2em;height:2.2em;min-width:2.2em;min-height:2.2em;border-radius:50%;background:var(--sidebar-selected-background, #D3EFBD);color:var(--primary);border:none;box-shadow:0 1px 4px #00000012;font-size:1.1em;cursor:pointer;margin-right:.5em;margin-bottom:0;align-self:center;padding:0;transition:background .2s,color .2s}.mobile-back-btn.icon-btn:hover{background:var(--primary);color:var(--sidebar-selected-background, #D3EFBD)}.mobile-back-btn.icon-btn i{font-size:1.1em;line-height:1;vertical-align:middle}.main-title-edit-form{flex:1 1 auto;display:flex;align-items:center;gap:.5em;margin:0}.main-title-edit-input{flex:1 1 auto;min-width:0;font-size:1.1em;padding:.5em .7em;border:1px solid #ced4da;border-radius:4px;background:#fff;color:var(--dark)}.main-title-edit-save{margin-left:.5em;padding:.5em 1em;background:var(--button-background);color:#fff;border:none;border-radius:4px;font-size:1.1em;cursor:pointer;display:flex;align-items:center;transition:background .2s,color .2s}.main-title-edit-save:hover{background:var(--accent);color:var(--dark)}@media (max-width: 700px){#app{margin:0;padding:1em}.layout{flex-direction:column;height:auto;min-height:0;max-width:100%;margin:0}.sidebar{width:100%;border-right:none;flex-direction:column;gap:1em;padding:.5em;overflow-x:visible;overflow-y:visible;min-height:100vh;box-sizing:border-box;height:auto}.main-content{padding:1em .5em;min-width:0}.sidebar-list-item{font-size:1.1em;padding:.7em 1em}.mobile-back-btn{margin-bottom:1em;padding:.7em 0;background:#f5f7fa;border:none;border-bottom:1px solid #e0e4ea;font-size:1.1em;font-weight:700;color:var(--primary);cursor:pointer;text-align:left;transition:background .2s}.mobile-back-btn:active{background:#e3f0ff}.main-header-row{margin-bottom:.7em;gap:.5em;padding:.7em;border-radius:6px}.main-title{font-size:1.1em;line-height:1.2}.add-item-form{flex-direction:row;align-items:center;gap:.5em}.add-item-btn{width:auto}.add-template-link-row{flex-direction:row;align-items:center;gap:.7em}.add-template-select{width:100%;flex:1 1 auto;min-width:0}.main-title-edit-form{flex:1 1 auto;gap:.3em}.main-title-edit-input{font-size:1em;padding:.4em .5em}.main-title-edit-save{font-size:1em;padding:.4em .7em}.sidebar-actions{gap:.5em;margin-top:1.5em;font-size:.95em;padding:.5em 0}.sidebar-action-btn{font-size:.95em;padding:.5em .8em}}