:root{--bg: #f7f8fa;--bg-card: #f3f4f6;--bg-task: #f7f8fa;--bg-modal: #f3f4f6;--bg-input: #fff;--text: #23272a;--text-secondary: #5a6270;--text-date: #8b949e;--primary: #4251c2;--primary-dark: #2d3576;--border: #e3e6ed;--shadow: rgba(44, 51, 73, .08);--sidebar-bg: #fff;--sidebar-bg-selected: #f3f4f6;--sidebar-text: #23272a}.dark-mode{--bg: #181a1b;--bg-card: #23272a;--bg-task: #23272a;--bg-modal: #23272a;--bg-input: #151618;--text: #f7f8fa;--text-secondary: #b0b3b8;--text-date: #888;--primary: #4251c2;--primary-dark: #2d3576;--border: #444;--shadow: rgba(0,0,0,.5);--sidebar-bg: #23272a;--sidebar-bg-selected: #2d313a;--sidebar-text: #f3f4f6}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:17px;background-color:var(--bg);color:var(--text);letter-spacing:.01em;line-height:1.6;overflow-x:hidden;width:100%;position:relative}#root{min-height:100vh;width:100%;overflow-x:hidden;position:relative}.container{max-width:1200px;margin:0 auto;padding:32px;background:none;width:100%;box-sizing:border-box}.header{background:linear-gradient(120deg,#4251c2 0%,#2d3576 100%);color:var(--text);padding:36px 0 28px;margin-bottom:36px;box-shadow:0 6px 32px #2c33491a;border-bottom-left-radius:32px;border-bottom-right-radius:32px;position:relative;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);width:100%;box-sizing:border-box}.header h1{text-align:center;font-size:2.5rem;font-weight:300}.search-bar{background:white;padding:20px;border-radius:10px;box-shadow:0 2px 10px #0000001a;margin-bottom:30px}.search-input{width:100%;padding:12px 20px;border:2px solid #e1e5e9;border-radius:8px;font-size:16px;transition:border-color .3s ease}.search-input:focus{outline:none;border-color:#667eea}.macrotemi-grid{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}.macrotema-card{min-width:0;max-width:100%;flex:1 1 320px;height:auto;background:var(--bg-card);border-radius:14px;padding:28px;box-shadow:0 4px 18px var(--shadow);transition:transform .2s,box-shadow .2s;width:100%;box-sizing:border-box;overflow:hidden}.macrotema-card:hover{transform:translateY(-2px);box-shadow:0 8px 32px #2c334921}.macrotema-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;padding-bottom:14px;border-bottom:2px solid #e3e6ed;gap:8px;flex-wrap:wrap}.macrotema-title{font-size:1.35rem;font-weight:700;color:var(--text);word-break:break-word;overflow-wrap:break-word;white-space:pre-line;max-width:100%;min-width:0}.macrotema-actions{display:flex;gap:8px}.task-list{margin-top:15px}.task-item{background:var(--bg-task);border-radius:10px;padding:18px;margin-bottom:10px;border-left:4px solid var(--primary);transition:all .2s}.task-item:hover{background:var(--bg-card);transform:translate(2px)}.task-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:8px;flex-wrap:wrap}.task-title{font-weight:700;color:var(--text);margin-bottom:7px;flex:1;word-break:break-word;overflow-wrap:break-word;white-space:pre-line;font-size:1.08rem;min-width:0;max-width:100%}.task-actions{display:flex;gap:4px}.task-description{color:var(--text-secondary);font-size:1rem;margin-bottom:12px;word-break:break-word;overflow-wrap:break-word;white-space:pre-line;max-width:100%}.task-date{font-size:.92rem;color:var(--text-date);margin-bottom:8px}.task-comments{margin-top:10px}.comments-section{margin-top:16px;padding:16px;background:var(--bg-modal);border-radius:8px;border:1px solid var(--border)}.comment{padding:8px;margin-bottom:8px;background:var(--bg-task);border-radius:4px;border-left:3px solid var(--primary)}.comment p{margin-bottom:4px;color:var(--text);word-break:break-word;overflow-wrap:break-word;white-space:pre-line;max-width:100%}.comment small{color:var(--text-date);font-size:.75rem}.add-comment{margin-top:14px;padding-top:12px;border-top:1px solid #e3e6ed}.add-task-form{background:var(--bg-modal);color:var(--text);padding:15px;border-radius:8px;margin-bottom:15px;border:1px solid var(--border);box-shadow:0 4px 16px #0000002e}.btn{padding:12px 22px;border:none;border-radius:16px;cursor:pointer;font-size:1rem;font-weight:600;transition:background .18s,box-shadow .18s,transform .18s,color .18s;box-shadow:none;outline:none;display:inline-flex;align-items:center;gap:8px;background:none}.btn-primary{background:linear-gradient(90deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff}.btn-primary:hover,.btn-primary:focus{background:linear-gradient(90deg,#2d3576 0%,#4251c2 100%);color:#fff;transform:translateY(-2px) scale(1.03);box-shadow:0 0 0 2px #b3b8e7}.btn-secondary{background:#e3e6ed;color:var(--primary-dark)}.btn-secondary:hover,.btn-secondary:focus{background:#d1d5e6;color:var(--primary);transform:translateY(-2px) scale(1.03);box-shadow:0 0 0 2px #b3b8e7}.btn-danger{background:#e53e3e;color:#fff}.btn-danger:hover,.btn-danger:focus{background:#b91c1c;color:#fff;transform:translateY(-2px) scale(1.03);box-shadow:0 0 0 2px #fca5a5}.btn:focus{outline:none;box-shadow:0 0 0 2px #b3b8e7}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-sm{padding:7px 14px;font-size:.92rem;border-radius:10px}.dark-mode .btn-secondary{background:#23272a;color:#b3b8e7}.dark-mode .btn-secondary:hover,.dark-mode .btn-secondary:focus{background:#2d313a;color:#fff}.dark-mode .btn-primary{background:linear-gradient(90deg,#4251c2 0%,#2d3576 100%);color:#fff}.dark-mode .btn-primary:hover,.dark-mode .btn-primary:focus{background:linear-gradient(90deg,#2d3576 0%,#4251c2 100%);color:#fff}.dark-mode .btn-danger{background:#b91c1c;color:#fff}.dark-mode .btn-danger:hover,.dark-mode .btn-danger:focus{background:#e53e3e;color:#fff}.dark-mode .btn-move{background:linear-gradient(90deg,#15803d 0%,#047857 100%);color:#fff}.dark-mode .btn-move:hover,.dark-mode .btn-move:focus{background:linear-gradient(90deg,#16a34a 0%,#059669 100%);color:#fff}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:var(--bg-modal);color:var(--text);padding:36px;border-radius:16px;width:90%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px #2c33492e,0 0 0 1.5px var(--border);border:1.5px solid var(--border);box-sizing:border-box;margin:20px}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #f0f0f0}.modal-title{font-size:1.5rem;font-weight:600;color:#2c3e50}.dark-mode .modal-title{color:#fff}.close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6c757d;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#dc3545}.form-group{margin-bottom:28px}.form-label{display:block;margin-bottom:10px;font-weight:700;color:var(--text);font-size:1.08rem}.form-input,.form-textarea{width:100%;padding:14px;border:2px solid var(--border);border-radius:8px;font-size:1rem;background:var(--bg-input);color:var(--text);transition:border-color .3s,background .3s;box-shadow:0 1px 4px #00000014;box-sizing:border-box;max-width:100%}.form-input::placeholder,.form-textarea::placeholder{color:#a0a0a0;opacity:1}.dark-mode .form-input,.dark-mode .form-textarea{background:#23272a;color:#f5f5f5;border:2px solid #444}.dark-mode .form-input::placeholder,.dark-mode .form-textarea::placeholder{color:#b0b3b8;opacity:1}.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}.empty-state{text-align:center;padding:60px 20px;color:#6c757d}.empty-state h3{margin-bottom:10px;color:#495057}.add-macrotema-btn{display:block;width:100%;margin:24px auto 0;padding:12px 0;border-radius:12px;background:#667eea;color:#fff;border:none;font-size:1.5rem;cursor:pointer;box-shadow:0 2px 8px #667eea2e;transition:all .18s ease;position:static}.add-macrotema-btn:hover{transform:scale(1.08);box-shadow:0 4px 16px #667eea47}@media (max-width: 900px){.add-macrotema-btn{width:90%;margin:18px auto 0;font-size:1.2rem;padding:10px 0}}.form-textarea{min-height:110px;resize:none}.macrotema-card,.task-item,.modal-content,.sidebar-macrotema,.form-input,.form-textarea{transition:box-shadow .22s,background .22s,border-color .22s,color .18s}.sidebar-macrotema:focus,.sidebar-macrotema.selected:focus{outline:none;box-shadow:0 0 0 2px #b3b8e7;background:var(--sidebar-bg-selected)}.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #b3b8e7}.macrotema-card:focus-within,.task-item:focus-within{box-shadow:0 0 0 2px #b3b8e7}.sidebar-macrotema:focus-visible,.btn:focus-visible,.form-input:focus-visible,.form-textarea:focus-visible,.add-macrotema-btn:focus-visible{outline:2.5px solid #4251c2;outline-offset:2px;box-shadow:0 0 0 3px #b3b8e7;z-index:2}.dark-mode .sidebar-macrotema:focus-visible,.dark-mode .btn:focus-visible,.dark-mode .form-input:focus-visible,.dark-mode .form-textarea:focus-visible,.dark-mode .add-macrotema-btn:focus-visible{outline:2.5px solid #b3b8e7;box-shadow:0 0 0 3px #23272a}@media (max-width: 768px){.container{padding:12px;width:100%;box-sizing:border-box}.header h1{font-size:1.8rem}.macrotemi-grid{grid-template-columns:1fr;width:100%;gap:16px}.add-macrotema-btn{bottom:20px;right:20px;width:50px;height:50px;font-size:20px;max-width:calc(100vw - 40px)}.task-header{flex-direction:column;gap:8px;align-items:flex-start}.task-actions{align-self:flex-end;flex-wrap:wrap;gap:4px}.macrotema-title{font-size:1.1rem;padding-right:4px;word-break:break-word;overflow-wrap:break-word}.task-title{font-size:1rem;padding-right:4px;word-break:break-word;overflow-wrap:break-word}.comment p{font-size:.95rem;word-break:break-word;overflow-wrap:break-word}.macrotema-header{flex-wrap:wrap;gap:8px}.macrotema-actions{flex-wrap:wrap}}.main-layout{display:flex;height:100vh}.sidebar{width:260px;background:var(--sidebar-bg);padding:36px 0 24px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:10px;min-width:180px;max-width:320px;box-shadow:0 2px 12px var(--shadow)}.sidebar-macrotema{padding:14px 28px;cursor:pointer;color:var(--sidebar-text);border-left:4px solid transparent;transition:background .2s,border-color .2s,color .18s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.08em;line-height:1.5;border-radius:6px 24px 24px 6px;margin:0 8px;min-height:48px;display:flex;align-items:center}.sidebar-macrotema.selected{background:var(--sidebar-bg-selected);border-left:4px solid var(--primary);color:var(--primary-dark);font-weight:600}.sidebar-macrotema:hover,.sidebar-macrotema:focus-visible{background:var(--sidebar-bg-selected);color:var(--primary-dark)}.tasks-section-and-notebox{display:flex;align-items:flex-start;width:100%;box-sizing:border-box;overflow-x:hidden}.tasks-section{flex:1;padding:32px;overflow-y:auto;overflow-x:hidden;min-width:0;width:100%;box-sizing:border-box}@media (max-width: 900px){.main-layout{flex-direction:column;height:100dvh;width:100%;overflow:hidden}.sidebar{position:fixed;top:0;left:0;bottom:0;width:80vw;max-width:340px;z-index:1003;transform:translate(-100%);transition:transform .25s;box-shadow:2px 0 16px #00000026;background:var(--sidebar-bg);display:flex;flex-direction:column;align-items:stretch;padding:24px 0 32px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sidebar.open{transform:translate(0)}.sidebar-macrotema{padding:16px 20px;border-left:4px solid transparent;border-bottom:none;min-width:0;text-align:left;font-size:1.1em;line-height:1.6;word-break:break-word;overflow-wrap:break-word;white-space:normal;overflow:visible;text-overflow:clip;min-height:auto;display:block;align-items:flex-start}.sidebar-macrotema.selected{background:var(--sidebar-bg-selected);border-left:4px solid #4f8cff;color:var(--sidebar-text)}.add-macrotema-btn{position:static;margin:24px auto 0;display:block;max-width:calc(100% - 32px)}.sidebar .search-bar{margin:0 16px 18px;box-shadow:none;background:var(--sidebar-bg-selected);width:calc(100% - 32px);box-sizing:border-box}}@media (max-width: 600px){.tasks-section-and-notebox{flex-direction:column;width:100%}.tasks-section{padding:12px 8px;width:100%;box-sizing:border-box}.sidebar{padding:24px 0 40px}.sidebar-macrotema{padding:14px 16px;font-size:.98em;line-height:1.6;min-height:auto}.macrotema-card{padding:18px 14px;border-radius:12px}.task-item{padding:14px 12px}.modal-content{padding:24px 18px;width:calc(100% - 20px);margin:10px;max-height:calc(100vh - 20px)}.save-status{top:12px;right:12px;left:12px;max-width:calc(100vw - 24px);padding:10px 16px;font-size:.95rem}.header{padding:24px 0 20px;margin-bottom:24px;border-bottom-left-radius:20px;border-bottom-right-radius:20px}.notebox-fab{bottom:12px;right:12px;width:48px;height:48px;font-size:1.4rem}.form-actions{flex-direction:column}.form-actions .btn{width:100%;justify-content:center}.btn-sm{padding:6px 10px;font-size:.85rem}.macrotema-actions .btn-sm{min-width:36px;height:36px}.task-actions .btn-sm{min-width:32px;height:32px}}.sidebar-toggle{display:none;position:absolute;top:18px;left:18px;z-index:1002;background:none;border:none;font-size:2rem;color:var(--sidebar-text);cursor:pointer}@media (max-width: 900px){.sidebar-toggle{display:block}.sidebar{position:fixed;top:0;left:0;bottom:0;width:80vw;max-width:340px;z-index:1003;transform:translate(-100%);transition:transform .25s;box-shadow:2px 0 16px #00000026}.sidebar.open{transform:translate(0)}.sidebar-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.25);z-index:1002}.sidebar-close{display:none}}.sidebar-close{display:none}@media (max-width: 900px){.sidebar-close{display:block}}.header-flex{display:flex;align-items:center;justify-content:center;max-width:1200px;margin:0 auto;padding:0 24px;min-height:72px;position:relative;width:100%;box-sizing:border-box}.header-title{color:#fff;font-weight:800;text-shadow:0 2px 12px rgba(60,60,60,.1),0 1px 0 rgba(0,0,0,.1);flex:1 1 auto;text-align:center;font-size:2.4rem;margin:0 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.08;padding:16px 0 4px;letter-spacing:-.5px;word-break:break-word;overflow-wrap:break-word;min-width:0}.header-subtitle{color:#e0e0f0;opacity:.92;font-weight:400;text-shadow:0 1px 4px rgba(60,60,60,.1);font-size:1.18rem;margin-top:8px;letter-spacing:.01em}.theme-toggle,.logout-btn{background:rgba(255,255,255,.1);border:none;font-size:1.7rem;color:#fff;cursor:pointer;margin-left:10px;padding:10px;border-radius:16px;box-shadow:0 2px 8px #503ca014;transition:background .18s,box-shadow .18s,transform .18s;outline:none;display:flex;align-items:center;justify-content:center}.theme-toggle:hover,.logout-btn:hover{background:rgba(255,255,255,.18);transform:translateY(-2px) scale(1.08);box-shadow:0 4px 16px #503ca021}.theme-toggle:focus,.logout-btn:focus{box-shadow:0 0 0 3px #a3bffa}.save-status{position:fixed;top:18px;right:36px;left:auto;min-width:180px;max-width:calc(100vw - 72px);background:#16a34a;color:#fff;padding:12px 28px;border-radius:8px;font-size:1.08rem;font-weight:600;z-index:2000;box-shadow:0 2px 12px #2c334921;letter-spacing:.01em;transition:background .2s,color .2s;text-align:center;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.save-status.error{background:#e53e3e;color:#fff}.save-status.info{background:#4251c2;color:#fff}.dark-mode .save-status{background:#15803d;color:#fff}.dark-mode .save-status.error{background:#b91c1c}.dark-mode .save-status.info{background:#2d3576}@media (max-width: 900px){.header-flex{padding:0 6px;min-height:56px;width:100%;box-sizing:border-box;flex-wrap:wrap}.header-title{font-size:1.25rem;padding:8px 0 2px;word-break:break-word;overflow-wrap:break-word}.header-subtitle{font-size:.98rem;margin-top:4px;word-break:break-word;overflow-wrap:break-word}.macrotema-title{font-size:1.08rem;word-break:break-word;overflow-wrap:break-word}.task-title{font-size:.98rem;word-break:break-word;overflow-wrap:break-word}.theme-toggle,.logout-btn{font-size:1.4rem;padding:8px;margin-left:6px}.sidebar-toggle{font-size:1.6rem;top:14px;left:14px}}.btn-move{background:linear-gradient(90deg,#16a34a 0%,#059669 100%);color:#fff;border:none;border-radius:16px;box-shadow:none;transition:background .18s,box-shadow .18s,transform .18s;font-weight:600}.btn-move:hover,.btn-move:focus{background:linear-gradient(90deg,#15803d 0%,#047857 100%);color:#fff;transform:translateY(-2px) scale(1.03);box-shadow:0 0 0 2px #bbf7d0}.dark-mode .sidebar-macrotema.selected{color:#fff}.dark-mode .sidebar-macrotema:hover,.dark-mode .sidebar-macrotema:focus-visible{color:#e0e0e0}.notebox{background:var(--bg-card);border-radius:16px;box-shadow:0 4px 18px var(--shadow);padding:28px 18px 24px;min-width:320px;max-width:380px;margin-left:32px;display:flex;flex-direction:column;align-items:stretch;height:fit-content}.notebox-title{font-size:1.35rem;font-weight:700;color:var(--primary-dark);margin-bottom:18px;letter-spacing:.01em;text-align:left}.notebox-input-row{display:flex;gap:8px;margin-bottom:18px}.notebox-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.notebox-item{background:var(--bg-task);border-radius:10px;padding:14px 12px 12px 16px;box-shadow:0 2px 8px var(--shadow);display:flex;flex-direction:column;gap:4px;border-left:4px solid var(--primary);position:relative;transition:box-shadow .18s,background .18s}.notebox-item.pinned{border-left:4px solid #16a34a;background:#f0fdf4}.dark-mode .notebox-item.pinned{background:#1a2b1a}.notebox-note-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.notebox-text{flex:1;color:var(--text);font-size:1.04rem;word-break:break-word;overflow-wrap:break-word;white-space:pre-line;min-width:0;max-width:100%}.notebox-actions{display:flex;gap:4px}.notebox-edit-row{display:flex;gap:8px;align-items:center}.notebox-empty{color:var(--text-date);text-align:center;font-size:1.01rem;padding:18px 0}@media (max-width: 1100px){.notebox{min-width:0;max-width:100%;margin-left:8px;padding:18px 6px 14px;width:calc(100% - 16px);box-sizing:border-box}}.notebox-fab{position:fixed;bottom:36px;right:36px;z-index:1201;width:62px;height:62px;border-radius:50%;background:linear-gradient(90deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;font-size:2.1rem;border:none;box-shadow:0 4px 18px var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s,box-shadow .18s,transform .18s}.notebox-fab:hover,.notebox-fab:focus{background:linear-gradient(90deg,#2d3576 0%,#4251c2 100%);transform:scale(1.08);box-shadow:0 8px 32px #2c33492e}.calendar-fab{right:110px;background:linear-gradient(90deg,#ea580c 0%,#c2410c 100%)}.calendar-fab:hover,.calendar-fab:focus{background:linear-gradient(90deg,#c2410c 0%,#9a3412 100%)}@media (max-width: 900px){.notebox-fab{bottom:18px;right:18px;width:52px;height:52px;font-size:1.5rem}.calendar-fab{right:80px}}@media (max-width: 600px){.notebox-fab{bottom:12px;right:12px;width:48px;height:48px;font-size:1.4rem}.calendar-fab{right:70px}}.notebox-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.32);z-index:1200;animation:fadeIn .18s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.notebox-slidein{position:fixed;top:0;right:0;height:100vh;width:410px;max-width:98vw;background:var(--bg-modal);box-shadow:-4px 0 32px var(--shadow);z-index:1202;display:flex;flex-direction:column;align-items:stretch;padding:0;animation:slideInRight .22s cubic-bezier(.4,1.2,.6,1)}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media (max-width: 600px){.notebox-slidein{width:100vw;min-width:0;max-width:100vw;border-radius:0;box-sizing:border-box}.notebox-slidein .notebox{padding:56px 12px 24px}.notebox-close{top:12px;right:12px;font-size:1.8rem}}.notebox-close{position:absolute;top:18px;right:18px;background:none;border:none;font-size:2.1rem;color:var(--text-date);cursor:pointer;z-index:2;transition:color .18s}.notebox-close:hover,.notebox-close:focus{color:#e53e3e}.notebox-slidein .notebox{margin:0;min-width:0;max-width:100vw;box-shadow:none;border-radius:0;height:100vh;padding-top:64px;padding-bottom:32px;overflow-y:auto}