:root{--bg-page:#0a0a0a;--bg-panel:#141414;--bg-card:#1a1a1a;--bg-card-2:#1f1f1f;--bg-elev:#262626;--bg-input:#161616;--line:#262626;--line-strong:#333;--text-0:#f5f5f5;--text-1:#d0d0d0;--text-2:#888;--text-3:#555;--accent:#e8c98c;--danger:#c87766;--success:#8fa876;--priority-low:#7a9a6a;--priority-medium:#c4945a;--priority-high:#c46b5a;--sleep-bed:#d87a6a;--sleep-wake:#6ba0c8;--sans:Arial,Helvetica,sans-serif;--mono:'JetBrains Mono','Courier New',monospace;--transition:.18s ease;--transition-slow:.3s cubic-bezier(.4,0,.2,1)}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg-page);color:var(--text-0);font-family:var(--sans);-webkit-font-smoothing:antialiased;height:100vh;overflow:hidden}
::selection{background:var(--text-3);color:var(--text-0)}
.num,[class*="stat-"][class*="-num"],[class*="-value"][class*="stats-"]{font-family:var(--mono)}
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
.app{display:grid;grid-template-columns:220px 1fr;height:100vh;max-width:1400px;margin:0 auto;padding:16px 28px;gap:16px}
.sidebar{background:var(--bg-panel);border:1px solid var(--line);border-radius:18px;padding:14px 12px;display:flex;flex-direction:column;gap:4px;height:100%;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg-card);border:1px solid var(--line);border-radius:12px;margin-bottom:14px;transition:all var(--transition)}
.brand:hover{border-color:var(--line-strong)}
.brand-mark{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#2a2a2a,#1a1a1a);border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:700;flex-shrink:0;letter-spacing:.05em}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-name{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.18em;line-height:1.2}
.brand-sub{font-size:10px;color:var(--text-2);margin-top:2px}
.nav-section-label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);padding:14px 12px 6px;font-weight:500}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--text-1);cursor:pointer;transition:all var(--transition);font-size:13px;font-weight:500;border:1px solid transparent}
.nav-item:hover{background:var(--bg-card);color:var(--text-0);transform:translateX(2px)}
.nav-item.active{background:var(--bg-card);border-color:var(--line);color:var(--text-0);font-weight:700}
.nav-icon{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;flex-shrink:0}
.sidebar-footer{margin-top:auto;padding-top:12px}
.user-card{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg-card);border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:all var(--transition);width:100%;font-family:var(--sans);text-align:left}
.user-card:hover{background:var(--bg-card-2);border-color:var(--line-strong)}
.user-card.active{background:var(--bg-card-2);border-color:var(--line-strong)}
.user-card.disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.user-card .user-name{color:var(--text-0)}
.user-card .user-role{color:var(--text-2)}
.user-card-arrow{width:14px;height:14px;color:var(--text-3);margin-left:auto;flex-shrink:0;transition:transform var(--transition)}
.user-card:hover .user-card-arrow{color:var(--text-1);transform:translateX(2px)}
.user-card.disabled .user-card-arrow{display:none}
.auth-buttons{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.auth-btn{padding:9px 12px;border-radius:9px;border:1px solid var(--line-strong);background:var(--bg-card);color:var(--text-0);font-family:var(--sans);font-size:12px;font-weight:700;cursor:pointer;transition:all var(--transition);width:100%}
.auth-btn:hover{background:var(--bg-card-2);border-color:var(--text-3);transform:translateY(-1px)}
.auth-btn.primary{background:var(--text-0);color:var(--bg-page);border-color:var(--text-0)}
.auth-btn.primary:hover{background:#fff}
.user-avatar{width:30px;height:30px;border-radius:8px;background:var(--bg-card-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.user-name{font-weight:700;font-size:12px;line-height:1.2}
.user-role{font-size:10px;color:var(--text-2);margin-top:2px}
.main{background:var(--bg-panel);border:1px solid var(--line);border-radius:18px;padding:22px 26px;height:100%;position:relative;overflow:hidden;display:flex;flex-direction:column}
.page{display:none;flex:1;flex-direction:column;min-height:0}
.page.active{display:flex}
.welcome-block{margin-bottom:18px;flex-shrink:0}
.welcome-title{font-size:26px;font-weight:700;line-height:1.1}
.welcome-sub{color:var(--text-2);font-size:13px;margin-top:6px}
.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;flex-shrink:0}
.page-title{font-size:26px;font-weight:700;line-height:1}
.page-title .light{font-weight:400;color:var(--text-1)}
.page-subtitle{color:var(--text-2);font-size:13px;margin-top:6px}
.home-grid{display:grid;grid-template-columns:35fr 65fr;grid-template-rows:1fr 1fr;gap:14px;flex:1;min-height:0}
.card{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:0;transition:border-color var(--transition)}
.card:hover{border-color:var(--line-strong)}
.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;flex-shrink:0;gap:10px}
.card-title-block{display:flex;flex-direction:column;gap:2px}
.card-title{font-size:18px;font-weight:700;line-height:1.1}
.card-subtitle{font-size:11px;color:var(--text-2);font-weight:500}
.card-subtitle.mono{font-family:var(--mono);letter-spacing:.05em}
.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;border:1px solid var(--line-strong);background:var(--bg-card-2);color:var(--text-0);font-family:var(--sans);font-size:12px;font-weight:700;cursor:pointer;transition:all var(--transition)}
.btn:hover{background:var(--bg-elev);border-color:var(--text-3);transform:translateY(-1px)}
.btn-add{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:8px;background:var(--bg-card-2);border:1px solid var(--line-strong);color:var(--text-0);font-size:12px;font-weight:700;cursor:pointer;transition:all var(--transition)}
.btn-add:hover{background:var(--bg-elev);transform:translateY(-1px)}
.btn-add svg{width:11px;height:11px;stroke-width:2.2}
.btn-arrow{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:8px;background:var(--bg-card-2);border:1px solid var(--line-strong);color:var(--text-0);font-size:12px;font-weight:700;cursor:pointer;transition:all var(--transition)}
.btn-arrow:hover{background:var(--bg-elev);transform:translateX(2px)}
.btn-icon{width:28px;height:28px;padding:0;justify-content:center}
.pin-btn{width:28px;height:28px;border-radius:7px;background:transparent;border:1px solid var(--line);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--transition)}
.pin-btn:hover{color:var(--text-0);background:var(--bg-elev);border-color:var(--line-strong)}
.pin-btn.pinned{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);box-shadow:0 0 10px rgba(255,255,255,.2)}
.pin-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pin-btn.pinned svg{fill:currentColor}
.notes-card-body{display:flex;flex-direction:column;gap:7px;overflow-y:auto;flex:1;min-height:0}
.note-preview{background:var(--bg-card-2);border:1px solid var(--line);border-radius:9px;padding:9px 12px;cursor:pointer;transition:all var(--transition);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-shrink:0}
.note-preview:hover{border-color:var(--line-strong);background:var(--bg-elev)}
.note-preview-content{flex:1;min-width:0}
.note-preview-title{font-weight:700;font-size:12.5px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-preview-tag{display:inline-block;font-size:10px;color:var(--text-2);background:var(--bg-elev);padding:2px 7px;border-radius:999px;font-weight:600}
.card-footer{border-top:1px solid var(--line);padding-top:10px;margin-top:10px;font-size:12px;color:var(--text-2);flex-shrink:0;display:flex;justify-content:space-between}
.card-footer .num{color:var(--text-0);font-weight:700}
.mini-tracker{display:flex;flex-direction:column;flex:1;min-height:0}
.mini-tracker-headrow{display:grid;grid-template-columns:150px repeat(7,1fr);gap:3px;padding-bottom:5px;flex-shrink:0;border-bottom:1px solid var(--line)}
.mini-day-head{text-align:center;font-size:12px;color:var(--text-2);font-weight:600;font-family:var(--mono);padding:3px 0;position:relative}
.mini-day-head.today{color:var(--text-0);font-weight:700}
.mini-day-head.today::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:18px;height:2px;background:#fff;border-radius:2px;box-shadow:0 0 6px rgba(255,255,255,.7)}
.mini-tracker-rows{overflow-y:auto;flex:1;min-height:0}
.mini-tracker-row{display:grid;grid-template-columns:150px repeat(7,1fr);gap:3px;align-items:center;height:42px;flex-shrink:0}
.mini-tracker-row+.mini-tracker-row{border-top:1px solid var(--line)}
.habit-name-cell{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;cursor:pointer;transition:all var(--transition);color:var(--text-0)}
.habit-name-cell span{transition:all var(--transition-slow);display:inline-block}
.habit-name-cell:hover span{color:#fff;transform:translateX(2px)}
.habit-color-bar{width:3px;height:16px;border-radius:2px;flex-shrink:0;transition:height var(--transition),width var(--transition)}
.habit-name-cell:hover .habit-color-bar{height:20px;width:4px}
.habit-cell{width:24px;height:24px;border-radius:6px;background:transparent;border:1.5px solid var(--line-strong);cursor:pointer;transition:all var(--transition-slow);margin:0 auto}
.habit-cell:hover{border-color:var(--text-1);transform:scale(1.1)}
.habit-cell.done{background:#fff;border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,.55),0 0 20px rgba(255,255,255,.25)}
.habit-cell.today-cell{border-color:rgba(255,255,255,.5);box-shadow:0 0 6px rgba(255,255,255,.3)}
.habit-cell.today-cell.done{box-shadow:0 0 12px rgba(255,255,255,.7),0 0 24px rgba(255,255,255,.35)}
.year-card{padding:16px 18px}
.year-header-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;flex-shrink:0}
.year-percent{font-size:22px;font-weight:700;line-height:1;font-family:var(--mono)}
.year-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:6px;flex-shrink:0}
.year-tile{background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;text-align:center;transition:all var(--transition)}
.year-tile-label{font-size:10px;color:var(--text-2);margin-bottom:2px;font-weight:600}
.year-tile-value{font-size:15px;font-weight:700;line-height:1;font-family:var(--mono)}
.year-grid-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:2px 0}
.year-grid{display:grid;grid-template-columns:repeat(22,1fr);gap:3px;width:100%;height:100%;align-content:center}
.year-cell{aspect-ratio:1;background:transparent;border:1px solid var(--line);border-radius:3px;transition:all var(--transition);min-height:0}
.year-cell:hover{transform:scale(1.4);z-index:2;position:relative}
.year-cell.passed{background:var(--text-0);border-color:var(--text-0)}
.year-cell.today{background:var(--text-0);border-color:var(--text-0);box-shadow:0 0 8px rgba(255,255,255,.85)}
.year-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:8px;margin-top:6px;font-size:12px;color:var(--text-2);flex-shrink:0}
.year-footer .num{color:var(--text-0);font-weight:700;font-family:var(--mono)}
.tasks-list-home{display:flex;flex-direction:column;gap:7px;overflow-y:auto;flex:1;min-height:0}
.task-row-home{background:var(--bg-card-2);border:1px solid var(--line);border-radius:9px;cursor:pointer;transition:border-color var(--transition),background var(--transition),opacity .5s ease,transform .5s ease,max-height .5s ease,margin-bottom .5s ease,padding .5s ease;flex-shrink:0;position:relative;overflow:hidden;max-height:200px}
.task-row-home{transition:opacity .8s ease,transform .8s ease,max-height .8s ease,margin .8s ease,padding .8s ease}
.task-row-home.fading{opacity:0;transform:translateX(30px) scale(.96);max-height:0!important;margin-bottom:0!important;padding:0;border-width:0;pointer-events:none;overflow:hidden}
.debt-item{transition:opacity .8s ease,transform .8s ease,max-height .8s ease,margin .8s ease,padding .8s ease}
.debt-item.fading{opacity:0;transform:translateX(30px) scale(.96);max-height:0!important;margin-bottom:0!important;padding:0;border-width:0;pointer-events:none;overflow:hidden}
.task-row-home:hover{border-color:var(--line-strong);background:var(--bg-elev)}
.task-priority-bar{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--priority-medium)}
.task-priority-bar.low{background:var(--priority-low)}
.task-priority-bar.high{background:var(--priority-high)}
.task-row-main{display:flex;align-items:center;gap:12px;padding:11px 14px 11px 16px}
.task-checkbox{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:all var(--transition);background:transparent}
.task-checkbox:hover{border-color:var(--text-1)}
.task-checkbox.checked{background:#fff;border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,.4)}
.task-checkbox.checked::after{content:'';width:8px;height:4px;border-left:1.5px solid var(--bg-page);border-bottom:1.5px solid var(--bg-page);transform:rotate(-45deg) translate(1px,-1px)}
.task-info{flex:1;min-width:0}
.task-row-name{font-weight:700;font-size:14px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-row-desc{font-size:11px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-row-home.expanded .task-row-desc{display:none}
.task-status{font-size:11px;color:var(--text-2);flex-shrink:0;font-weight:600}
.task-status.overdue{color:#d87a6a}
.task-status.today{color:#e8c98c;font-weight:700}
.task-row-home.expanded{background:var(--bg-elev);border-color:var(--line-strong);max-height:none;overflow:visible}
.task-expand{max-height:0;overflow:hidden;transition:max-height .3s ease;border-top:0 solid var(--line);min-height:0}
.task-row-home.expanded .task-expand{max-height:none;overflow:visible;border-top-width:1px}
.task-expand-content{padding:12px 16px 14px;font-size:13px;color:var(--text-1);line-height:1.55;min-height:0}
.task-expand-content .label{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);font-weight:700;margin-bottom:3px}
.task-expand-content .meta-text{font-size:11.5px;color:var(--text-2)}
.task-expand-content .desc-text{font-size:14px;color:var(--text-0);line-height:1.55;white-space:normal;overflow-wrap:anywhere;word-break:break-word;max-height:110px;overflow-y:auto}
.task-expand-row{margin-bottom:8px}
.task-expand-row:last-child{margin-bottom:0}
.task-expand-tags{display:flex;gap:5px;flex-wrap:wrap}
.task-expand-tag{background:var(--bg-card);border:1px solid var(--line);padding:2px 8px;border-radius:999px;font-size:10px;color:var(--text-1);font-weight:600}
.task-filter-tabs{display:flex;gap:4px;flex-wrap:wrap}
.task-filter-tab{padding:4px 10px;border-radius:999px;background:transparent;border:1px solid var(--line);color:var(--text-2);cursor:pointer;font-size:10px;transition:all var(--transition);font-weight:600}
.task-filter-tab:hover{color:var(--text-1)}
.task-filter-tab.active{background:var(--bg-elev);color:var(--text-0)}
.tracker-page{display:grid;grid-template-rows:auto auto 1fr;flex:1;min-height:0;gap:14px}
.tracker-top-bar{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.tracker-top-left{display:flex;align-items:center;gap:14px}
.tracker-month-label{font-size:16px;font-weight:700;min-width:130px;text-align:center}
.tracker-top-right{display:flex;align-items:center;gap:10px;font-family:var(--mono)}
.tracker-stat-pill{display:flex;align-items:center;gap:8px;padding:7px 14px;background:var(--bg-card-2);border:1px solid var(--line-strong);border-radius:999px;font-size:12px}
.tracker-stat-pill .lbl{color:var(--text-1);font-weight:600}
.tracker-stat-pill .val{color:#fff;font-weight:800;letter-spacing:.02em}
.tracker-today-btn{padding:6px 14px;background:var(--bg-card-2);border:1px solid var(--line-strong);border-radius:999px;color:var(--text-1);cursor:pointer;font-size:11px;font-weight:700;transition:all var(--transition);font-family:var(--sans);margin-left:6px}
.tracker-today-btn:hover{background:var(--bg-elev);color:var(--text-0);border-color:var(--text-3)}
.tracker-grid-card{position:relative;background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:12px 18px;flex-shrink:0;height:460px;min-height:0;display:flex;flex-direction:column}
.tracker-grid-scroll{overflow-y:auto;flex:1;min-height:0;padding-bottom:16px}
.tracker-grid{display:grid;gap:2px;min-width:700px}
.tracker-header,.tracker-row{display:grid;grid-template-columns:150px 1fr 32px;gap:12px;align-items:center}
.tracker-header{padding:6px 0 7px;border-bottom:1px solid var(--line-strong);margin-bottom:6px;position:sticky;top:0;background:var(--bg-card);z-index:5}
.tracker-header .day-cells{align-items:center}
.tracker-row{height:39px;border-bottom:1px solid var(--line)}
.tracker-row:last-child{border-bottom:none}
.day-cells{display:grid;grid-template-columns:repeat(var(--days,31),1fr);gap:2px}
.day-header{font-size:11px;text-align:center;color:var(--text-2);font-weight:600;font-family:var(--mono);position:relative;padding:0 0 3px}
.day-header strong{color:var(--text-1);font-weight:700;font-size:13px}
.day-header.today strong{color:#fff}
.day-header.today::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:16px;height:2px;background:#fff;border-radius:2px;box-shadow:0 0 6px rgba(255,255,255,.7)}
.habit-cell-big{aspect-ratio:1;border-radius:6px;background:transparent;border:1.5px solid var(--line-strong);cursor:pointer;transition:all var(--transition-slow);width:100%;max-width:32px;margin:0 auto}
.habit-cell-big:hover{border-color:var(--text-1);transform:scale(1.12)}
.habit-cell-big.done{background:#fff;border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,.55),0 0 20px rgba(255,255,255,.25)}
.habit-cell-big.today-cell{border-color:rgba(255,255,255,.55)}
.habit-cell-big.today-cell.done{box-shadow:0 0 12px rgba(255,255,255,.7),0 0 24px rgba(255,255,255,.35)}
.habit-count{text-align:right;font-size:14px;font-weight:700;font-family:var(--mono)}
.tracker-bottom{display:grid;grid-template-columns:1fr 1.7fr;gap:14px;flex:1;min-height:0;align-items:stretch}
.tracker-bottom > .card{height:340px;display:flex;flex-direction:column}
.tracker-bottom > .card .card-title{flex-shrink:0}
.bottom-card{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;min-height:0;overflow:visible}
.bottom-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-shrink:0}
.bottom-card-title{font-size:14px;font-weight:700}
.stats-tabs{display:flex;gap:4px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:999px;padding:3px}
.stats-tab{padding:5px 14px;border-radius:999px;background:transparent;border:none;color:var(--text-2);cursor:pointer;font-size:11px;font-weight:600;transition:all var(--transition);font-family:var(--sans)}
.stats-tab:hover{color:var(--text-1)}
.stats-tab.active{background:var(--bg-elev);color:var(--text-0);font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.stats-content{flex:1;min-height:0;display:none;flex-direction:column;gap:10px;overflow-y:auto}
.stats-content.active{display:flex}
.stats-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex-shrink:0}
.stats-big-tile{background:var(--bg-card-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;transition:border-color var(--transition),background var(--transition),box-shadow var(--transition);cursor:pointer}
.stats-big-tile:hover{background:var(--bg-elev);border-color:var(--text-3);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.stats-tile-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.stats-tile-label{font-size:9.5px;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.stats-tile-icon{width:20px;height:20px;border-radius:5px;background:var(--bg-elev);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text-1)}
.stats-tile-icon svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2}
.stats-tile-value{font-size:18px;font-weight:700;line-height:1;font-family:var(--mono);margin-bottom:6px}
.stats-progress-bar{width:100%;height:4px;background:var(--bg-elev);border-radius:2px;overflow:hidden}
.stats-progress-fill{height:100%;background:linear-gradient(90deg,#fff,#d4d4d4);border-radius:2px;transition:width .5s ease;box-shadow:0 0 6px rgba(255,255,255,.3)}
.sleep-card{background:var(--bg-card-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;flex:1;display:flex;flex-direction:column;min-height:0}
.sleep-card-big{padding:16px 18px;background:var(--bg-card-2);border-color:var(--line-strong)}
.sleep-chart-wrap-big{min-height:240px}
.stats-achievements-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);flex-shrink:0}
.stats-achievements-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.stats-achievements-title::before{content:'';width:3px;height:12px;background:var(--accent);border-radius:2px}
.sleep-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-shrink:0}
.sleep-legend{display:flex;gap:12px;font-size:10px;color:var(--text-2);font-weight:600}
.sleep-legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:middle}
.sleep-legend-dot.bed{background:var(--sleep-bed);box-shadow:0 0 6px var(--sleep-bed)}
.sleep-legend-dot.wake{background:var(--sleep-wake);box-shadow:0 0 6px var(--sleep-wake)}
.sleep-chart-wrap{flex:1;min-height:0;display:flex;position:relative;padding-top:4px}
.sleep-y-axis{width:40px;flex-shrink:0;font-size:10px;color:var(--text-1);font-family:var(--mono);text-align:right;font-weight:700;position:relative;padding-right:6px}
.sleep-y-tick{position:absolute;right:6px;transform:translateY(-50%);white-space:nowrap}
.sleep-chart{flex:1;position:relative;border-left:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:linear-gradient(180deg,rgba(216,122,106,.03) 0%,rgba(107,160,200,.03) 100%)}
.sleep-svg-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:1}
.sleep-line-bed,.sleep-line-wake,.sleep-line-pair{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sleep-line-bed{stroke:var(--sleep-bed);opacity:.85;stroke-width:2;filter:drop-shadow(0 0 4px var(--sleep-bed))}
.sleep-line-wake{stroke:var(--sleep-wake);opacity:.85;stroke-width:2;filter:drop-shadow(0 0 4px var(--sleep-wake))}
.sleep-line-pair{stroke:rgba(255,255,255,.4);stroke-width:1}
.sleep-grid-line{position:absolute;left:0;right:0;height:1px;background:var(--line);opacity:.4}
.sleep-bed-dot,.sleep-wake-dot{position:absolute;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;transition:box-shadow var(--transition);z-index:3;border:none}
.sleep-bed-dot{background:var(--sleep-bed);box-shadow:0 0 8px var(--sleep-bed),0 0 18px rgba(216,122,106,.55)}
.sleep-wake-dot{background:var(--sleep-wake);box-shadow:0 0 8px var(--sleep-wake),0 0 18px rgba(107,160,200,.55)}
.sleep-bed-dot:hover{box-shadow:0 0 14px var(--sleep-bed),0 0 30px rgba(216,122,106,1),0 0 50px rgba(216,122,106,.7);z-index:5}
.sleep-wake-dot:hover{box-shadow:0 0 14px var(--sleep-wake),0 0 30px rgba(107,160,200,1),0 0 50px rgba(107,160,200,.7);z-index:5}
.sleep-x-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--text-1);font-family:var(--mono);padding:4px 0 0 40px;flex-shrink:0;font-weight:700}
.sleep-x-labels span{transition:color var(--transition),text-shadow var(--transition);min-width:0;text-align:center;flex:1}
.sleep-x-labels span.today{color:#fff;font-weight:900;text-shadow:0 0 6px rgba(255,255,255,.5)}
.sleep-x-labels span.active{color:#fff;font-weight:900;text-shadow:0 0 10px rgba(255,255,255,.85)}
.sleep-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:11px;text-align:center}
.achievements-list{display:flex;flex-direction:column;gap:10px;padding-top:4px;overflow-y:auto;flex:1;min-height:0}
.achievement-item{background:var(--bg-card-2);border:1px solid var(--line);border-radius:11px;padding:12px 14px;display:flex;align-items:center;gap:12px;transition:all var(--transition)}
.achievement-item.locked{opacity:.55}
.achievement-icon{width:36px;height:36px;border-radius:8px;background:var(--bg-elev);border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-1)}
.achievement-item.unlocked .achievement-icon{background:rgba(255,255,255,.1);color:#fff;box-shadow:0 0 12px rgba(255,255,255,.25)}
.achievement-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.achievement-info{flex:1;min-width:0}
.achievement-title{font-size:13px;font-weight:700;margin-bottom:2px}
.achievement-desc{font-size:11px;color:var(--text-2);line-height:1.3}
.achievement-progress{font-family:var(--mono);font-size:11px;font-weight:700;flex-shrink:0;padding:4px 10px;background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:999px}
.habits-list{flex:1;display:flex;flex-direction:column;gap:6px;overflow-y:auto;margin-bottom:10px;min-height:0}
.habit-item{display:flex;align-items:center;justify-content:space-between;padding:6px 11px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;font-size:12.5px;flex-shrink:0;min-height:36px}
.habit-item-left{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.habit-item-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.habit-color-circle{width:12px;height:12px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.15);box-shadow:0 0 8px currentColor;color:inherit}
.habit-reorder{display:flex;flex-direction:column;gap:0;color:var(--text-3);font-size:8px;flex-shrink:0;line-height:1}
.habit-reorder span{cursor:pointer;padding:1px 2px}
.habit-reorder span:hover{color:var(--text-0)}
.habit-item-actions{display:flex;gap:4px;flex-shrink:0}
.icon-btn{width:26px;height:26px;border-radius:6px;background:var(--bg-elev);border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-1);transition:all var(--transition);flex-shrink:0}
.icon-btn:hover{color:var(--text-0);border-color:var(--text-3)}
.icon-btn.danger:hover{color:var(--danger);border-color:var(--danger)}
.icon-btn svg{width:11px;height:11px}
.icon-btn-tiny{width:22px;height:22px;border-radius:5px;background:transparent;border:1px solid transparent;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);flex-shrink:0}
.icon-btn-tiny:hover{color:var(--text-0);border-color:var(--line-strong);background:var(--bg-elev)}
.icon-btn-tiny svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
.add-habit-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;background:var(--bg-card-2);border:1px solid var(--line-strong);border-radius:9px;color:var(--text-1);font-size:13px;cursor:pointer;transition:all var(--transition);font-weight:700;flex-shrink:0}
.add-habit-btn:hover{color:var(--text-0);background:var(--bg-elev)}
.add-habit-btn svg{width:13px;height:13px}
.tasks-page{display:flex;flex-direction:column;flex:1;min-height:0}
.folders-row{display:flex;gap:10px;margin-bottom:14px;flex-shrink:0;flex-wrap:wrap;align-items:center}
.folder-card{background:var(--bg-card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;gap:10px;min-width:140px}
.folder-card:hover{border-color:var(--line-strong)}
.folder-card.active{background:var(--bg-card-2);border-color:var(--text-3)}
.folder-name{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px}
.folder-count{background:var(--bg-elev);border-radius:999px;padding:2px 9px;font-size:11px;color:var(--text-1);font-weight:700;font-family:var(--mono)}
.folder-actions{display:flex;gap:4px;margin-left:auto;opacity:0;transition:opacity var(--transition)}
.folder-card:hover .folder-actions{opacity:1}
.add-folder-card{background:var(--bg-card-2);border:1px solid var(--line-strong);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--text-1);font-size:12px;font-weight:700;transition:all var(--transition);margin-left:auto}
.add-folder-card:hover{color:var(--text-0);background:var(--bg-elev)}
.add-folder-card svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none}
.task-filters{display:flex;gap:6px;margin-bottom:14px;flex-shrink:0;flex-wrap:wrap}
.filter-chip{padding:6px 13px;border-radius:999px;background:var(--bg-card);border:1px solid var(--line);color:var(--text-1);cursor:pointer;font-size:12px;transition:all var(--transition);font-weight:600}
.filter-chip:hover{border-color:var(--line-strong)}
.filter-chip.active{background:var(--bg-card-2);border-color:var(--text-3);color:var(--text-0);font-weight:700}
.tasks-table-card{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;flex:1;display:flex;flex-direction:column;min-height:0}
.tasks-card-header-flex{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-shrink:0}
.btn-add-big{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:9px;background:var(--bg-card-2);border:1px solid var(--line-strong);color:var(--text-0);font-size:13px;font-weight:700;cursor:pointer;transition:all var(--transition)}
.btn-add-big:hover{background:var(--bg-elev);transform:translateY(-1px)}
.btn-add-big svg{width:13px;height:13px;stroke-width:2.2}
.tasks-list-scroll{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.tasks-table-footer{padding-top:10px;font-size:12px;color:var(--text-2);border-top:1px solid var(--line);flex-shrink:0;display:flex;justify-content:space-between}
.empty-state{padding:30px 20px;text-align:center;color:var(--text-2)}
.empty-state-title{font-size:14px;color:var(--text-1);margin-bottom:4px;font-weight:700}
.empty-state-desc{font-size:12px}
.finance-page{display:flex;flex-direction:column;flex:1;min-height:0;gap:12px}
.finance-header-bar{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;margin-bottom:14px}
.finance-month-pill{display:flex;align-items:center;gap:12px;background:var(--bg-card);border:1px solid var(--line);border-radius:999px;padding:6px 18px;font-size:13px;font-weight:700}
.finance-month-pill button{width:22px;height:22px;border:none;background:transparent;color:var(--text-1);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background var(--transition)}
.finance-month-pill button:hover{background:var(--bg-elev);color:var(--text-0)}
.finance-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex-shrink:0}
.finance-stat{background:var(--bg-card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;transition:all var(--transition)}
.finance-stat:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.finance-stat-label{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:var(--text-1);font-size:11px;font-weight:600}
.finance-stat-icon{width:24px;height:24px;border-radius:6px;background:var(--bg-card-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text-1);font-size:12px;font-weight:700}
.finance-stat-value{font-size:17px;font-weight:700;line-height:1;font-family:var(--mono)}
.finance-stat-meta{margin-top:4px;color:var(--text-2);font-size:10px}
.finance-charts-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;flex-shrink:0;height:260px}
.finance-chart-card{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;transition:all var(--transition);min-height:0;overflow:hidden;position:relative}
.finance-chart-card:hover{border-color:var(--line-strong)}
.finance-chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-shrink:0;gap:8px}
.finance-chart-title{font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px}
.finance-chart-title .dot{width:8px;height:8px;border-radius:50%}
.finance-chart-title .dot.income{background:var(--success);box-shadow:0 0 6px var(--success)}
.finance-chart-title .dot.expense{background:var(--danger);box-shadow:0 0 6px var(--danger)}
.finance-chart-body{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.donut-with-cats{display:flex;gap:14px;flex:1;min-height:0;align-items:center}
.donut-section{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;padding-left:6px}
.donut-wrap{width:140px;height:140px;position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.donut-wrap svg{width:90%;height:90%;transform:rotate(-90deg);overflow:visible}
.donut-bg-circle{fill:none;stroke:rgba(255,255,255,.03);stroke-width:12}
.donut-segment{fill:none;stroke-width:14;stroke-linecap:butt;transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1),stroke-dasharray .6s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 0 6px currentColor)}
.donut-segment-glow{fill:none;stroke-width:14;stroke-linecap:butt;opacity:.75;filter:blur(9px);transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1),stroke-dasharray .6s cubic-bezier(.4,0,.2,1)}
.donut-empty-ring{fill:none;stroke:var(--line-strong);stroke-width:12;stroke-dasharray:2 5;opacity:.4}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none}
.donut-center .total{font-size:18px;font-weight:700;font-family:var(--mono);line-height:1;color:var(--text-0)}
.donut-center .label{font-size:9px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-top:3px}
.category-chips-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;overflow-y:auto}
.category-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;background:transparent;border:1px solid rgba(255,255,255,.04);border-radius:7px;font-size:11px;color:var(--text-1);font-weight:600;cursor:pointer;transition:all var(--transition);width:100%}
.category-chip:hover{border-color:var(--line-strong);background:var(--bg-card-2);transform:translateX(2px)}
.category-chip-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}
.category-chip-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.category-chip-value{font-family:var(--mono);font-size:10px;color:var(--text-2);font-weight:700}
.finance-chart-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:11px;text-align:center;padding:10px}
.plan-fact-list,.debt-list{flex:1;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:0}
.plan-fact-item{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;transition:all var(--transition)}
.plan-fact-item:hover{border-color:var(--line-strong)}
.plan-fact-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:6px}
.plan-fact-name{display:flex;align-items:center;gap:7px;font-weight:700;flex:1;min-width:0;font-size:13px}
.plan-fact-name .cat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 8px currentColor}
.plan-fact-amount{font-family:var(--mono);color:var(--text-2);font-weight:700;white-space:nowrap;font-size:11.5px}
.plan-fact-amount .fact{color:var(--text-0)}
.plan-fact-amount .over{color:var(--danger)}
.plan-fact-actions{display:flex;gap:3px;margin-left:4px;flex-shrink:0}
.plan-fact-bar{width:100%;height:5px;background:var(--bg-elev);border-radius:3px;overflow:hidden}
.plan-fact-bar-fill{height:100%;background:var(--success);border-radius:3px;transition:width .5s ease}
.plan-fact-bar-fill.over{background:var(--danger)}
.debt-item{display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:var(--bg-card-2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;transition:border-color var(--transition),opacity .5s ease,transform .5s ease,max-height .5s ease,margin-bottom .5s ease,padding .5s ease;box-shadow:-3px 0 8px -3px var(--accent)}
.debt-item.theirs{border-left-color:var(--success);box-shadow:-3px 0 8px -3px var(--success)}
.debt-item:hover{border-color:var(--line-strong)}
.debt-item.completed{opacity:.6}
.debt-item.completed .debt-item-name{text-decoration:line-through;color:var(--text-2)}
.debt-item-row{display:flex;align-items:center;gap:8px}
.debt-checkbox{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:all var(--transition);background:transparent}
.debt-checkbox:hover{border-color:var(--text-1)}
.debt-checkbox.checked{background:#fff;border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,.4)}
.debt-checkbox.checked::after{content:'';width:8px;height:4px;border-left:1.5px solid var(--bg-page);border-bottom:1.5px solid var(--bg-page);transform:rotate(-45deg) translate(1px,-1px)}
.debt-item-name{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.debt-item-amount{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--accent);white-space:nowrap}
.debt-item.theirs .debt-item-amount{color:var(--success)}
.debt-item-meta{display:flex;gap:8px;font-size:10px;color:var(--text-2);align-items:center;padding-left:26px}
.debt-item-direction{padding:1px 7px;border-radius:999px;background:var(--bg-elev);font-weight:700;font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--accent)}
.debt-item.theirs .debt-item-direction{color:var(--success)}
.debt-item-due{font-family:var(--mono)}
.finance-chart-add-btn{width:26px;height:26px;border-radius:6px;background:var(--bg-card-2);border:1px solid var(--line-strong);color:var(--text-0);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);font-size:14px;flex-shrink:0}
.finance-chart-add-btn:hover{background:var(--bg-elev);transform:scale(1.05)}
.debts-completed-toggle{position:absolute;bottom:12px;right:-160px;background:var(--bg-card-2);border:1px solid var(--line-strong);color:var(--text-1);padding:7px 14px 7px 12px;border-radius:999px 0 0 999px;font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;transition:right .5s cubic-bezier(.4,0,.2,1),background var(--transition);z-index:10;box-shadow:-4px 0 12px rgba(0,0,0,.3)}
.debts-completed-toggle.visible{right:0}
.debts-completed-toggle:hover{background:var(--bg-elev);color:var(--text-0)}
.debts-completed-toggle svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform var(--transition-slow)}
.debts-completed-toggle.expanded svg{transform:rotate(180deg)}
.debts-completed-toggle .count{background:var(--bg-page);border-radius:999px;padding:1px 6px;font-size:9px;font-family:var(--mono)}
.finance-feed-card{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;flex:1;display:flex;flex-direction:column;min-height:0}
.finance-feed-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:10px;flex-shrink:0;gap:10px}
.finance-feed-title-block{display:flex;flex-direction:column;gap:2px;justify-self:start}
.finance-feed-title{font-size:15px;font-weight:700}
.finance-feed-sub{font-size:10px;color:var(--text-2)}
.finance-feed-filters{display:flex;gap:4px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:999px;padding:3px;justify-self:center}
.finance-feed-filter{padding:5px 14px;border-radius:999px;background:transparent;border:none;color:var(--text-2);cursor:pointer;font-size:11px;font-weight:600;transition:all var(--transition)}
.finance-feed-filter:hover{color:var(--text-1)}
.finance-feed-filter.active{background:var(--bg-elev);color:var(--text-0);font-weight:700}
.finance-feed-add-btn{justify-self:end}
.finance-feed-list{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:5px}
.finance-feed-item{display:grid;grid-template-columns:4px 1fr auto auto;gap:10px;align-items:center;padding:8px 12px 8px 10px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;transition:all var(--transition)}
.finance-feed-item:hover{border-color:var(--line-strong)}
.finance-feed-strip{width:3px;height:26px;border-radius:2px}
.finance-feed-strip.income{background:var(--success);box-shadow:0 0 6px var(--success)}
.finance-feed-strip.expense{background:var(--danger);box-shadow:0 0 6px var(--danger)}
.finance-feed-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.finance-feed-name{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.finance-feed-meta{display:flex;gap:8px;align-items:center;font-size:10px;color:var(--text-2)}
.finance-feed-cat{padding:1px 7px;background:var(--bg-elev);border-radius:999px;color:var(--text-1);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.finance-feed-cat .cat-dot{width:6px;height:6px;border-radius:50%}
.finance-feed-date{font-family:var(--mono)}
.finance-feed-amount{font-family:var(--mono);font-weight:700;font-size:12.5px}
.finance-feed-amount.income{color:var(--success)}
.finance-feed-amount.expense{color:var(--danger)}
.finance-feed-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-2);font-size:12px;padding:20px}
.notes-page{display:flex;flex-direction:column;flex:1;min-height:0}
.notes-layout{display:grid;grid-template-columns:320px 1fr;grid-template-rows:minmax(0,1fr);gap:14px;flex:1;min-height:0}
.notes-list-panel{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.notes-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-shrink:0}
.notes-list-title{font-weight:700;font-size:18px}
.notes-search{width:100%;padding:9px 12px 9px 32px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;color:var(--text-0);margin-bottom:10px;flex-shrink:0;font-size:13px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center;background-size:13px}
.notes-search:focus{outline:none;border-color:var(--line-strong)}
.notes-folders-block{margin-bottom:12px;flex-shrink:0}
.notes-folders-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.notes-folders-toggle{flex:1;display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;color:var(--text-1);cursor:pointer;font-size:13px;font-weight:600;transition:all var(--transition)}
.notes-folders-toggle:hover{color:var(--text-0)}
.notes-folders-toggle.active{background:var(--bg-elev);color:var(--text-0)}
.notes-folders-toggle svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;transition:transform var(--transition-slow)}
.notes-folders-toggle.expanded svg{transform:rotate(180deg)}
.notes-folder-add-btn{width:32px;height:32px;flex-shrink:0;border-radius:8px;background:var(--bg-card-2);border:1px solid var(--line);color:var(--text-1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.notes-folder-add-btn:hover{background:var(--bg-elev);color:var(--text-0)}
.notes-folder-add-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2}
.notes-folders-list{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1)}
.notes-folders-list.expanded{max-height:300px;overflow-y:auto}
.notes-folders-list-inner{padding-top:4px;display:flex;flex-direction:column;gap:4px}
.notes-folder-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:transparent;border:1px solid transparent;border-radius:7px;color:var(--text-2);cursor:pointer;font-size:12.5px;font-weight:600;transition:all var(--transition)}
.notes-folder-item:hover{background:var(--bg-card-2);border-color:var(--line);color:var(--text-1)}
.notes-folder-item.active{background:var(--bg-elev);border-color:var(--line-strong);color:var(--text-0);font-weight:700}
.notes-folder-item-name{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.notes-folder-item-icon{width:14px;height:14px;flex-shrink:0}
.notes-folder-item-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8}
.notes-folder-item-count{font-family:var(--mono);font-size:10px;color:var(--text-3);background:var(--bg-card);border-radius:999px;padding:1px 7px;font-weight:700}
.tasks-sidebar-item{position:relative;padding-right:34px}
.tasks-sidebar-pin{position:absolute;top:6px;right:6px;align-self:flex-start;width:26px;height:26px;border:none;background:none;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;opacity:.65;transition:all var(--transition)}
.tasks-sidebar-pin svg{width:14px;height:14px}
.tasks-sidebar-pin:hover{background:var(--bg-elev);color:var(--text-1);opacity:1}
.tasks-sidebar-pin.on{color:var(--text-0);opacity:1}
.tasks-sidebar-item.pinned{background:var(--bg-card-2);border-color:var(--line-strong);box-shadow:inset 2px 0 0 var(--text-2)}
.notes-folder-edit-btn{width:22px;height:22px;border-radius:5px;background:transparent;border:1px solid transparent;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:auto;opacity:0;transition:all var(--transition)}
.notes-folder-item:hover .notes-folder-edit-btn{opacity:1}
.notes-folder-edit-btn svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2}
.notes-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;min-height:0}
.note-item{padding:10px 12px;background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;transition:all var(--transition);display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.note-item:hover{background:var(--bg-card-2);border-color:var(--line)}
.note-item.active{background:var(--bg-card-2);border-color:var(--line-strong)}
.note-item-content{flex:1;min-width:0}
.note-item-title{font-weight:700;margin-bottom:4px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-item-meta{display:flex;gap:6px;color:var(--text-2);align-items:center;font-size:11px;flex-wrap:wrap}
.note-tag{display:inline-block;padding:2px 7px;background:var(--bg-elev);border-radius:999px;color:var(--text-1);font-weight:600;font-size:10px}
.note-editor{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:22px 26px;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.note-title-row{flex-shrink:0}
.note-editor>.note-photos,.note-editor>.note-divider,.note-editor>.note-editor-toolbar,.note-editor>#note-toolbar,.note-editor>.note-field-row,.note-editor>.note-tag-suggest,.note-editor>.note-tags-display{flex-shrink:0}
.note-editor-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-2);font-size:13px}
.note-section-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);font-weight:700;margin-bottom:6px}
.note-title-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:4px 0 10px;margin-bottom:14px}
.note-title-input{flex:1;background:transparent;border:none;color:var(--text-0);font-family:var(--sans);font-weight:700;font-size:22px;padding:0}
.note-title-input:focus{outline:none}
.note-preview-toggle{padding:5px 14px;background:transparent;border:1px solid var(--line-strong);border-radius:7px;color:var(--text-1);cursor:pointer;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;transition:all var(--transition);flex-shrink:0}
.note-preview-toggle:hover{color:var(--text-0);border-color:var(--text-3);background:var(--bg-elev)}
.note-preview-toggle.active{background:var(--bg-elev);color:var(--text-0)}
.note-editor-toolbar{display:flex;align-items:center;gap:0;padding:0;background:transparent;border:none;border-radius:0;margin:8px 0;overflow:hidden}
.note-toolbar-trigger{width:28px;height:28px;border-radius:6px;background:var(--bg-card-2);border:1px solid var(--line-strong);color:var(--text-1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);flex-shrink:0}
.note-toolbar-trigger:hover{background:var(--bg-elev);color:var(--text-0)}
.note-toolbar-trigger svg{width:13px;height:13px;transition:transform var(--transition-slow)}
.note-editor-toolbar:not(.collapsed) .note-toolbar-trigger svg{transform:rotate(180deg)}
.note-toolbar-content{display:flex;gap:3px;flex-wrap:nowrap;overflow:hidden;max-width:0;opacity:0;margin-left:0;padding:0;transition:max-width .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin-left .3s ease,padding .3s ease;background:var(--bg-card-2);border-radius:6px}
.note-editor-toolbar:not(.collapsed) .note-toolbar-content{max-width:800px;opacity:1;margin-left:6px;padding:3px 6px;border:1px solid var(--line)}
.note-toolbar-btn{padding:3px 8px;background:transparent;border:1px solid transparent;border-radius:5px;color:var(--text-1);cursor:pointer;font-size:11px;font-weight:700;font-family:var(--sans);transition:all var(--transition);min-width:24px;height:22px;display:inline-flex;align-items:center;justify-content:center;gap:3px;line-height:1;flex-shrink:0}
.note-toolbar-btn:hover{background:var(--bg-elev);color:var(--text-0);border-color:var(--line-strong)}
.note-toolbar-btn.bold{font-weight:900}
.note-toolbar-btn.italic{font-style:italic}
.note-toolbar-btn.strike{text-decoration:line-through}
.note-toolbar-btn.mono{font-family:var(--mono);font-size:10px}
.note-toolbar-btn.active{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.55);color:#fff}
.note-toolbar-btn.active:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.75);color:#fff}
.note-toolbar-divider{width:1px;background:var(--line);margin:0 3px;align-self:stretch}
.note-tag-suggest-btn{width:30px;height:30px;border-radius:7px;background:var(--bg-card-2);border:1px solid var(--line-strong);color:var(--text-1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);flex-shrink:0;padding:0}
.note-tag-suggest-btn:hover{background:var(--bg-elev);color:var(--text-0);border-color:var(--text-3)}
.note-tag-suggest-btn.active{background:var(--bg-elev);color:var(--text-0);border-color:var(--text-3)}
.note-tag-suggest-btn svg{width:14px;height:14px}
.note-field-icon-btn{width:30px;height:30px;border-radius:7px;border:1px solid var(--line-strong);background:var(--bg-card-2);color:var(--text-1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);flex-shrink:0;padding:0}
.note-field-icon-btn:hover{color:var(--text-0);background:var(--bg-elev);border-color:var(--text-3);transform:scale(1.05)}
.note-field-icon-btn.active{background:var(--bg-elev);color:var(--text-0);border-color:var(--text-3);box-shadow:none}
.note-field-icon-btn svg{width:14px;height:14px}
.note-tag-suggest{display:flex;flex-wrap:wrap;gap:5px;padding:8px 10px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;margin:-4px 0 12px;margin-left:34px}
.note-tag-suggest-chip{padding:3px 9px;background:var(--bg-elev);border:1px solid var(--line);border-radius:999px;color:var(--text-1);font-size:11px;font-weight:600;cursor:pointer;transition:all var(--transition)}
.note-tag-suggest-chip:hover{background:var(--accent);color:var(--bg-page);border-color:var(--accent)}
.note-tag-suggest-empty{font-size:11px;color:var(--text-3);font-style:italic}
.note-content-input{flex:1;width:100%;background:transparent;border:none;color:var(--text-1);font-family:var(--sans);font-size:14px;line-height:1.65;resize:none;padding:4px 0;min-height:180px;margin-bottom:0;tab-size:2}
.note-preview-rendered{flex:1 1 auto;min-height:120px;padding:10px 4px;font-size:14px;line-height:1.65;color:var(--text-1);overflow-y:auto}
.note-preview-rendered h1{font-size:24px;font-weight:800;margin:16px 0 10px;color:var(--text-0);line-height:1.2}
.note-preview-rendered h2{font-size:20px;font-weight:800;margin:14px 0 8px;color:var(--text-0);line-height:1.2}
.note-preview-rendered h3{font-size:17px;font-weight:700;margin:12px 0 6px;color:var(--text-0);line-height:1.2}
.note-preview-rendered h4{font-size:15px;font-weight:700;margin:10px 0 5px;color:var(--text-0);line-height:1.2}
.note-preview-rendered h5{font-size:13px;font-weight:700;margin:8px 0 4px;color:var(--text-1);text-transform:uppercase;letter-spacing:.05em}
.note-preview-rendered p{margin:6px 0}
.note-preview-rendered ul{margin:6px 0;padding-left:22px}
.note-preview-rendered li{margin:3px 0;list-style:disc}
.note-preview-rendered li.ord{list-style:decimal}
.note-preview-rendered strong{color:var(--text-0);font-weight:800}
.note-preview-rendered em{color:var(--text-0)}
.note-preview-rendered s{color:var(--text-3)}
.note-preview-rendered code{background:var(--bg-elev);padding:2px 6px;border-radius:4px;font-family:var(--mono);font-size:12px;color:var(--text-1)}
.note-preview-rendered blockquote{border-left:3px solid var(--text-3);padding:4px 0 4px 12px;margin:8px 0;color:var(--text-2);font-style:italic}
.note-preview-rendered .md-task{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:14px}
.note-preview-rendered .md-task input{accent-color:var(--accent);cursor:default}
.note-preview-rendered .md-task.done span{text-decoration:line-through;color:var(--text-3)}
.note-preview-rendered .md-wikilink{color:#8fb0d6;text-decoration:none;border-bottom:1px dashed rgba(143,176,214,.5);cursor:pointer;transition:all var(--transition);font-weight:600}
.note-preview-rendered .md-wikilink:hover{color:#fff;border-bottom-color:#fff}
.note-preview-rendered .md-wikilink.broken{color:#a89880;border-bottom-color:rgba(168,152,128,.4);opacity:.85;font-style:italic}
.note-preview-rendered .md-wikilink.broken:hover{color:#9fc0e6;border-bottom-color:#9fc0e6;opacity:1;font-style:normal}
.note-editor-live{position:relative;flex:1 1 auto;min-height:120px;overflow-y:auto;display:block}
.note-editor-live-highlight{position:absolute;top:0;left:0;right:0;min-height:100%;padding:4px 0;font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--text-1);pointer-events:none;white-space:pre-wrap;word-wrap:break-word;overflow:hidden;tab-size:2}
.md-hl-line{min-height:1.6em;white-space:pre-wrap;word-wrap:break-word}
.md-hl-line .md-wiki{color:#8fb0d6;border-bottom:1px dashed rgba(143,176,214,.5);cursor:pointer;pointer-events:auto}
.md-hl-line .md-wiki:hover{color:#fff;border-bottom-color:#fff}
.note-content-overlay{position:relative;background:transparent!important;color:transparent!important;caret-color:var(--text-0);z-index:2;width:100%;min-height:100%;overflow:hidden;box-sizing:border-box;display:block}
.note-content-overlay::placeholder{color:var(--text-3)}
.note-content-overlay::selection{background:rgba(255,255,255,.2);color:transparent}
.note-editor-hint{font-size:10px;color:var(--text-3);margin-top:4px;font-style:italic}
.note-content-input{flex:1;width:100%;background:transparent;border:none;color:var(--text-1);font-family:var(--sans);font-size:14px;line-height:1.65;resize:none;padding:4px 0;min-height:160px;margin-bottom:0;tab-size:2}
.graph-zoom-inline{display:none}
.graph-zoom-controls{display:none}
.graph-zoom-btn{width:28px;height:28px;border-radius:7px;background:var(--bg-card-2);border:1px solid var(--line-strong);color:var(--text-0);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;transition:all var(--transition);font-family:var(--mono)}
.graph-zoom-btn:hover{background:var(--bg-elev);border-color:var(--text-3);transform:scale(1.05)}
.graph-zoom-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4}
.graph-legend-row{display:flex;gap:5px;align-items:center}
.note-content-input:focus{outline:none}
.note-divider{border-top:1px solid var(--line);margin:4px 0 14px}
.note-field-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.note-field-icon{width:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.note-field-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.note-field-content{flex:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.note-tags-display{display:flex;gap:6px;flex-wrap:wrap}
.note-tag-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;background:var(--bg-elev);border:1px solid var(--line);border-radius:999px;color:var(--text-1);font-size:11px;font-weight:600}
.note-tag-chip .remove{cursor:pointer;color:var(--text-3);font-size:13px;line-height:1}
.note-tag-chip .remove:hover{color:var(--danger)}
.note-tag-input{background:transparent;border:none;color:var(--text-1);font-size:13px;flex:1;min-width:100px;padding:2px 0}
.note-tag-input:focus{outline:none}
.note-attach-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg-card-2);border:1px solid var(--line-strong);border-radius:7px;color:var(--text-1);font-size:12px;font-weight:700;cursor:pointer;transition:all var(--transition)}
.note-attach-btn:hover{color:var(--text-0);background:var(--bg-elev)}
.note-attach-btn svg{width:11px;height:11px;stroke-width:2.2}
.note-photos{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.note-photo-thumb{width:80px;height:80px;border-radius:8px;background-size:cover;background-position:center;border:1px solid var(--line-strong);position:relative;overflow:hidden;cursor:pointer;transition:all var(--transition)}
.note-photo-thumb:hover{transform:scale(1.05)}
.note-photo-remove{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.7);border:1px solid var(--line-strong);color:var(--text-0);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;line-height:1;transition:all var(--transition)}
.note-photo-remove:hover{background:var(--danger);border-color:var(--danger)}
.note-link-select{background:var(--bg-card-2);border:1px solid var(--line);border-radius:7px;color:var(--text-1);font-size:12px;padding:6px 10px;cursor:pointer;flex:1;min-width:140px}
.note-link-select:focus{outline:none;border-color:var(--line-strong)}
.note-editor-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--line);margin-top:14px;flex-shrink:0}
.btn-save{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;background:var(--bg-elev);border:1px solid var(--line-strong);color:var(--text-0);border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:all var(--transition)}
.btn-save:hover{background:var(--bg-panel);border-color:var(--text-3);color:#fff;transform:translateY(-1px)}
.btn-save svg{width:12px;height:12px;stroke-width:2.4}
.btn-delete-note{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;background:transparent;border:1px solid rgba(200,119,102,.4);color:var(--danger);border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:all var(--transition);margin-right:auto}
.btn-delete-note:hover{background:rgba(200,119,102,.1);border-color:var(--danger)}
.btn-delete-note svg{width:11px;height:11px}
.canvas-page{display:flex;flex-direction:column;flex:1;min-height:0;gap:12px}
.canvas-top-bar{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}
.canvas-selector{display:flex;gap:6px;flex-wrap:nowrap;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;padding-bottom:3px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.canvas-selector::-webkit-scrollbar{height:6px}
.canvas-selector::-webkit-scrollbar-track{background:transparent}
.canvas-selector::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.canvas-tab{flex-shrink:0;padding:5px 8px;border-radius:8px;background:var(--bg-card-2);border:1px solid var(--line);color:var(--text-1);cursor:pointer;font-size:12px;font-weight:600;transition:all var(--transition);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.canvas-tab-pin{width:15px;height:15px;display:none;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;flex-shrink:0}
.canvas-tab-pin svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
.canvas-tab:hover .canvas-tab-pin{display:inline-flex}
.canvas-tab-pin.on{display:inline-flex;color:var(--accent)}
.canvas-tab-pin.on svg{fill:var(--accent)}
.canvas-tab.pinned{border-color:var(--line-strong)}
.canvas-tab:hover{border-color:var(--line-strong);background:var(--bg-elev)}
.canvas-tab.active{background:var(--bg-elev);border-color:var(--text-3);color:var(--text-0);font-weight:700}
.canvas-tab .canvas-tab-edit{width:16px;height:16px;border-radius:4px;display:none;align-items:center;justify-content:center;color:var(--text-3)}
.canvas-tab.active .canvas-tab-edit{display:inline-flex}
.canvas-tab .canvas-tab-edit:hover{color:var(--text-0)}
.canvas-tab .canvas-tab-edit svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2}
.canvas-toolbar{display:flex;gap:8px;flex-shrink:0}
.canvas-area{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;flex:1;position:relative;overflow:hidden;min-height:0;cursor:grab}
.canvas-area.panning{cursor:grabbing}
.canvas-bg{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.canvas-viewport{position:absolute;top:0;left:0;transform-origin:0 0;width:100%;height:100%;pointer-events:none}
.canvas-viewport>*{pointer-events:auto}
.canvas-svg-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.canvas-svg-layer .canvas-edge-hit{pointer-events:stroke}
.canvas-card{position:absolute;background:var(--bg-card-2);border:1px solid var(--line-strong);border-radius:10px;padding:12px 14px;min-width:140px;min-height:60px;cursor:move;transition:border-color var(--transition),box-shadow var(--transition);box-shadow:0 4px 14px rgba(0,0,0,.4);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.canvas-card:hover{border-color:var(--text-3);box-shadow:0 6px 20px rgba(0,0,0,.5)}
.canvas-card.dragging{cursor:grabbing;z-index:10}
.canvas-card.note-card{border-left:3px solid var(--accent)}
.canvas-card.text-card{border-left:3px solid var(--success)}
.canvas-card.colored{box-shadow:0 4px 14px rgba(0,0,0,.4),0 0 18px var(--card-glow,transparent)}
.canvas-card.colored:hover{box-shadow:0 6px 20px rgba(0,0,0,.5),0 0 24px var(--card-glow,transparent)}
.canvas-card-header{position:absolute;top:6px;left:8px;right:8px;display:flex;justify-content:space-between;align-items:center;gap:6px;pointer-events:none;z-index:3}
.canvas-card-type{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);font-weight:700;font-family:var(--mono)}
.canvas-card-actions{display:flex;gap:3px;opacity:0;transition:opacity var(--transition);pointer-events:auto}
.canvas-card:hover .canvas-card-actions{opacity:1}
.canvas-card-title{font-weight:700;font-size:13px;margin-bottom:4px;word-wrap:break-word;width:100%;text-align:center;padding:0 4px}
.canvas-card-text{font-size:12px;color:var(--text-1);line-height:1.5;word-wrap:break-word;white-space:pre-wrap;overflow:hidden;width:100%;text-align:center;padding:0 4px}
.canvas-edge{fill:none;stroke:var(--text-2);stroke-width:2;transition:stroke var(--transition)}
.canvas-edge.temp{stroke:var(--accent);stroke-dasharray:4 4}
.canvas-edge-hit{fill:none;stroke:transparent;stroke-width:14;cursor:pointer;pointer-events:stroke}
.canvas-edge-hit:hover + .canvas-edge{stroke:var(--accent);stroke-width:2.5;filter:drop-shadow(0 0 4px var(--accent))}
.canvas-edge.selected{stroke:var(--accent);stroke-width:2.5;filter:drop-shadow(0 0 5px var(--accent))}
.canvas-link-handle{position:absolute;width:13px;height:13px;background:var(--text-0);border:2px solid var(--bg-page);border-radius:50%;cursor:crosshair;opacity:0;transition:opacity var(--transition),transform var(--transition),background var(--transition),box-shadow var(--transition);z-index:5;box-shadow:0 0 6px rgba(255,255,255,.3)}
.canvas-card:hover .canvas-link-handle{opacity:1}
.canvas-link-handle:hover{transform:scale(1.4);background:var(--accent);box-shadow:0 0 12px var(--accent)}
.canvas-link-handle.top{top:-8px;left:50%;transform:translateX(-50%)}
.canvas-link-handle.top:hover{transform:translateX(-50%) scale(1.4)}
.canvas-link-handle.bottom{bottom:-8px;left:50%;transform:translateX(-50%)}
.canvas-link-handle.bottom:hover{transform:translateX(-50%) scale(1.4)}
.canvas-link-handle.left{left:-8px;top:50%;transform:translateY(-50%)}
.canvas-link-handle.left:hover{transform:translateY(-50%) scale(1.4)}
.canvas-link-handle.right{right:-8px;top:50%;transform:translateY(-50%)}
.canvas-link-handle.right:hover{transform:translateY(-50%) scale(1.4)}
.canvas-resize-handle{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;cursor:nwse-resize;opacity:0;transition:opacity var(--transition);z-index:6}
.canvas-card:hover .canvas-resize-handle{opacity:1}
.canvas-resize-handle::before{content:'';position:absolute;right:3px;bottom:3px;width:8px;height:8px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);border-radius:0 0 3px 0}
.canvas-resize-handle:hover::before{border-color:var(--text-0)}
.canvas-empty-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--text-3);font-size:13px;text-align:center;pointer-events:none}
.canvas-zoom-info{position:absolute;bottom:12px;right:12px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-family:var(--mono);font-size:10px;color:var(--text-2);font-weight:700;pointer-events:none;z-index:20}
.canvas-zoom-controls{position:absolute;bottom:12px;left:12px;display:flex;gap:5px;z-index:20}
.notes-templates-block{flex-shrink:0;margin-top:8px;border-top:1px solid var(--line);padding-top:10px;position:relative}
.notes-templates-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;color:var(--text-1);cursor:pointer;font-size:13px;font-weight:600;transition:all var(--transition)}
.notes-templates-toggle:hover{color:var(--text-0);border-color:var(--line-strong)}
.notes-templates-toggle.expanded{background:var(--bg-elev);color:var(--text-0)}
.notes-templates-toggle svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;transition:transform var(--transition-slow)}
.notes-templates-toggle.expanded svg{transform:rotate(180deg)}
.notes-templates-toggle-left{display:flex;align-items:center;gap:8px}
.notes-templates-toggle-count{display:none}
.account-grid{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:14px;flex:1;min-height:0;overflow-y:auto;align-content:start}
.account-avatar-card,.account-info-card,.account-security-card{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:14px;transition:border-color var(--transition)}
.account-avatar-card:hover,.account-info-card:hover,.account-security-card:hover{border-color:var(--line-strong)}
.account-avatar-card{align-items:center;text-align:center}
.account-avatar-wrap{position:relative;display:inline-block}
.account-avatar{width:120px;height:120px;border-radius:50%;background-color:var(--bg-elev);border:2px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:700;color:var(--text-0);background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.account-avatar span{transition:opacity var(--transition)}
.account-avatar.has-image span{opacity:0}
.account-avatar-change{position:absolute;bottom:0;right:0;width:36px;height:36px;border-radius:50%;background:var(--bg-elev);border:3px solid var(--bg-card);color:var(--text-0);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.account-avatar-change:hover{background:var(--bg-card-2);transform:scale(1.1);border-color:var(--text-3)}
.account-avatar-change svg{width:15px;height:15px}
.account-name-block{margin-top:6px}
.account-name{font-size:18px;font-weight:700;color:var(--text-0);margin-bottom:3px}
.account-email{font-size:12px;color:var(--text-2);font-family:var(--mono)}
.account-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-2);font-weight:700;margin-bottom:4px}
.account-field{display:flex;flex-direction:column;gap:6px}
.account-field .form-label{margin-bottom:0}
.account-divider{height:1px;background:var(--line);margin:6px 0}
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:1;min-height:0;overflow-y:auto;align-content:start}
.share-card{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:14px;transition:border-color var(--transition)}
.share-card:hover{border-color:var(--line-strong)}
.share-card-wide{grid-column:span 2}
.share-card-icon{display:none}
.share-card-title{font-size:16px;font-weight:700;color:var(--text-0);line-height:1.2}
.share-card-desc{font-size:12px;color:var(--text-2);line-height:1.5}
.share-code-display{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--accent);letter-spacing:.2em;text-align:center;padding:14px;background:var(--bg-elev);border-radius:9px;border:1px solid var(--line-strong);user-select:all;text-shadow:0 0 12px rgba(232,201,140,.4)}
.share-code-input{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:.2em;text-align:center;text-transform:uppercase}
.share-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.share-card-actions .btn{flex:1;min-width:120px;justify-content:center;display:inline-flex;align-items:center;gap:6px}
.share-active-list{display:flex;flex-direction:column;gap:6px}
.share-active-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;font-size:13px}
.share-active-item .dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 6px var(--success);flex-shrink:0}
.share-active-item-name{font-weight:700;flex:1}
.share-active-item-code{font-family:var(--mono);color:var(--text-2);font-size:11px}
.share-workspaces{display:flex;flex-direction:column;gap:6px}
.share-workspace-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;font-size:13px}
.share-workspace-item .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}
.share-workspace-name{font-weight:700;flex:1;color:var(--text-0)}
.share-workspace-badge{font-size:10px;color:var(--text-3);background:var(--bg-elev);padding:2px 8px;border-radius:999px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.share-feature-preview{background:var(--bg-card-2);border:1px solid var(--line);border-radius:9px;padding:10px}
.share-chat-mock{display:flex;flex-direction:column;gap:8px}
.share-chat-msg{display:flex;align-items:flex-start;gap:8px}
.share-chat-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.share-chat-bubble{flex:1;background:var(--bg-card);border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-size:12px;color:var(--text-1)}
.share-chat-name{font-size:10px;color:var(--accent);font-weight:700;margin-bottom:2px}

/* Совместные трекеры в стиле HabitLink */
.shared-trackers-section{grid-column:span 2;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.shared-tracker-card{position:relative;background:linear-gradient(160deg,rgba(143,168,118,.18) 0%,rgba(143,168,118,.06) 50%,rgba(20,20,20,.7) 100%);border:1px solid rgba(143,168,118,.35);border-radius:14px;padding:11px;display:flex;flex-direction:column;gap:8px;transition:border-color var(--transition),box-shadow var(--transition);overflow:hidden;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.3)}
.shared-tracker-card .shared-tracker-footer{margin-top:auto}
.shared-tracker-card.has-week{min-height:240px}
.shared-tracker-card.has-finance{min-height:200px}
.shared-tracker-card::before{content:'';position:absolute;top:-30%;right:-30%;width:160px;height:160px;background:radial-gradient(circle,rgba(143,168,118,.15) 0%,transparent 70%);pointer-events:none}
.shared-tracker-card:hover{border-color:rgba(143,168,118,.6);box-shadow:0 6px 22px rgba(0,0,0,.45),0 0 22px rgba(143,168,118,.15)}
.shared-tracker-card.color-blue{background:linear-gradient(160deg,rgba(107,160,200,.18) 0%,rgba(107,160,200,.06) 50%,rgba(20,20,20,.7) 100%);border-color:rgba(107,160,200,.35)}
.shared-tracker-card.color-blue::before{background:radial-gradient(circle,rgba(107,160,200,.15) 0%,transparent 70%)}
.shared-tracker-card.color-blue:hover{border-color:rgba(107,160,200,.6);box-shadow:0 6px 22px rgba(0,0,0,.45),0 0 22px rgba(107,160,200,.15)}
.shared-tracker-card.color-orange{background:linear-gradient(160deg,rgba(212,165,116,.18) 0%,rgba(212,165,116,.06) 50%,rgba(20,20,20,.7) 100%);border-color:rgba(212,165,116,.35)}
.shared-tracker-card.color-orange::before{background:radial-gradient(circle,rgba(212,165,116,.15) 0%,transparent 70%)}
.shared-tracker-card.color-orange:hover{border-color:rgba(212,165,116,.6);box-shadow:0 6px 22px rgba(0,0,0,.45),0 0 22px rgba(212,165,116,.15)}
.shared-tracker-card.color-purple{background:linear-gradient(160deg,rgba(157,123,184,.18) 0%,rgba(157,123,184,.06) 50%,rgba(20,20,20,.7) 100%);border-color:rgba(157,123,184,.35)}
.shared-tracker-card.color-purple::before{background:radial-gradient(circle,rgba(157,123,184,.15) 0%,transparent 70%)}
.shared-tracker-card.color-purple:hover{border-color:rgba(157,123,184,.6);box-shadow:0 6px 22px rgba(0,0,0,.45),0 0 22px rgba(157,123,184,.15)}
.shared-tracker-card.color-red{background:linear-gradient(160deg,rgba(196,107,90,.18) 0%,rgba(196,107,90,.06) 50%,rgba(20,20,20,.7) 100%);border-color:rgba(196,107,90,.35)}
.shared-tracker-card.color-red::before{background:radial-gradient(circle,rgba(196,107,90,.15) 0%,transparent 70%)}
.shared-tracker-card.color-red:hover{border-color:rgba(196,107,90,.6);box-shadow:0 6px 22px rgba(0,0,0,.45),0 0 22px rgba(196,107,90,.15)}

.shared-tracker-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;position:relative;z-index:1}
.shared-tracker-icon{width:30px;height:30px;border-radius:8px;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.08)}
.shared-tracker-icon svg{width:16px;height:16px}
.shared-tracker-title{font-size:13.5px;font-weight:700;color:var(--text-0);line-height:1.2;position:relative;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.shared-tracker-sub{font-size:10.5px;color:rgba(255,255,255,.55);line-height:1.3;position:relative;z-index:1;margin-top:-2px}

.shared-tracker-stats{display:grid;grid-template-columns:1fr 1fr;gap:5px;position:relative;z-index:1}
.shared-tracker-stat{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.05);border-radius:8px;padding:5px 8px;display:flex;align-items:center;justify-content:space-between;gap:5px}
.shared-tracker-stat-num{font-size:14px;font-weight:800;color:#fff;font-family:var(--mono);line-height:1.1;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.shared-tracker-stat-label{font-size:8.5px;color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.04em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shared-tracker-stat-emoji{font-size:12px;flex-shrink:0;opacity:.85}
.shared-tracker-stat-icon{width:12px;height:12px;flex-shrink:0;opacity:.6;color:rgba(255,255,255,.85)}
.shared-tracker-check{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);cursor:pointer;transition:all var(--transition);flex-shrink:0}
.shared-tracker-check:hover{border-color:rgba(255,255,255,.7);color:#fff;background:rgba(255,255,255,.12)}
.shared-tracker-check.checked{background:#fff;border-color:#fff;color:#000;box-shadow:0 0 10px rgba(255,255,255,.4)}
.shared-tracker-check svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.8}

.shared-tracker-week{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;position:relative;z-index:1}
.shared-tracker-dow{font-size:8.5px;text-transform:uppercase;color:rgba(255,255,255,.4);text-align:center;font-weight:700;padding-bottom:1px}
.shared-tracker-day{aspect-ratio:1;border-radius:5px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:10px;color:rgba(255,255,255,.85);font-weight:700;cursor:pointer;transition:all var(--transition);font-family:var(--mono);border:1px solid rgba(255,255,255,.04)}
.shared-tracker-day:hover{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.2)}
.shared-tracker-day.checked{background:#fff;color:#000;border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,.4)}
.shared-tracker-day.today{box-shadow:0 0 0 1.5px rgba(255,255,255,.4) inset;color:#fff;font-weight:900;background:rgba(255,255,255,.1)}
.shared-tracker-day.today.checked{box-shadow:0 0 0 2px rgba(255,255,255,.9) inset,0 0 10px rgba(255,255,255,.4);background:#fff;color:#000}
.shared-tracker-day.future{opacity:.35;cursor:not-allowed}
.shared-tracker-day.future:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.04)}

.shared-tracker-footer{display:flex;align-items:center;gap:6px;position:relative;z-index:1}
.shared-tracker-invite-pill{flex:1;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:5px 11px;cursor:pointer;transition:all var(--transition);min-width:0}
.shared-tracker-invite-pill:hover{background:rgba(0,0,0,.4);border-color:rgba(255,255,255,.18)}
.shared-tracker-invite-text{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:5px;min-width:0;flex:1}
.shared-tracker-invite-text svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.5;flex-shrink:0}
.shared-tracker-participants{display:flex;align-items:center;margin-left:auto;flex-shrink:0}
.shared-tracker-participant{width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;font-size:11px;border:2px solid rgba(0,0,0,.4);margin-left:-5px;position:relative;transition:transform var(--transition)}
.shared-tracker-participant:first-child{margin-left:0}
.shared-tracker-participant-more{font-size:9px;font-weight:800;color:rgba(255,255,255,.8);font-family:var(--mono)}

.shared-tracker-empty-state{grid-column:1/-1;text-align:center;padding:40px 20px;color:var(--text-3);font-size:13px;background:var(--bg-card);border:1px dashed var(--line-strong);border-radius:14px}
.shared-tracker-empty-state .emoji{font-size:48px;opacity:.4;display:block;margin-bottom:10px}

/* Совместные заметки / задачи / финансы */
.shared-simple-kind{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.6);font-weight:700;background:rgba(0,0,0,.3);padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.08);align-self:center}
.shared-simple-body{font-size:12px;color:rgba(255,255,255,.85);line-height:1.5;max-height:90px;overflow:hidden;white-space:pre-wrap;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.05);border-radius:9px;padding:10px;position:relative;z-index:1}
.shared-simple-tasks{display:flex;flex-direction:column;gap:4px;position:relative;z-index:1;max-height:148px;overflow-y:auto;padding-right:3px}
.shared-simple-tasks.tall{max-height:360px}
.shared-simple-task{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.05);border-radius:7px;padding:6px 10px;font-size:12px;color:rgba(255,255,255,.85);cursor:pointer;transition:all var(--transition);min-width:0}
.shared-simple-task span:not(.shared-simple-check){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.shared-simple-task:hover{background:rgba(0,0,0,.4)}
.shared-simple-task.done{opacity:.7}
.shared-simple-task.done span:not(.shared-simple-check){text-decoration:line-through}
.shared-simple-check{width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;flex-shrink:0;background:rgba(0,0,0,.3);transition:all var(--transition);color:transparent}
.shared-simple-task.done .shared-simple-check{background:#fff;color:#000;border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,.5)}
.shared-simple-more{font-size:10px;color:rgba(255,255,255,.5);text-align:center;padding:2px}
.shared-simple-progress{height:3px;background:rgba(0,0,0,.3);border-radius:2px;overflow:hidden;position:relative;z-index:1}
.shared-simple-progress-bar{height:100%;background:rgba(255,255,255,.7);border-radius:2px;transition:width var(--transition-slow)}
.shared-simple-balance{font-family:var(--mono);font-size:24px;font-weight:800;color:#fff;text-align:center;padding:8px 0 2px;position:relative;z-index:1;text-shadow:0 0 12px rgba(255,255,255,.3)}
.shared-simple-balance-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.6);font-weight:600;text-align:center;position:relative;z-index:1}

/* Модалка shared-item */
.subtask-edit-row{display:flex;gap:6px;margin-bottom:6px;align-items:center}
.subtask-input{flex:1}

/* Подробная модалка трекера */
.tracker-detail-header{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.tracker-detail-icon{width:54px;height:54px;border-radius:14px;background:var(--bg-elev);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--line-strong);color:var(--text-0)}
.tracker-detail-icon svg{width:28px;height:28px}
.tracker-detail-name{flex:1;min-width:0}
.tracker-detail-title{font-size:18px;font-weight:700;color:var(--text-0);line-height:1.2}
.tracker-detail-sub{font-size:12px;color:var(--text-2);margin-top:2px}
.tracker-detail-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.tracker-detail-stat{background:var(--bg-card-2);border:1px solid var(--line);border-radius:10px;padding:12px 10px;text-align:center;cursor:pointer;transition:all var(--transition);position:relative;overflow:hidden}
.tracker-detail-stat:hover{background:var(--bg-elev);border-color:var(--text-3);transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.tracker-detail-stat::before{content:'';position:absolute;top:-50%;right:-50%;width:80px;height:80px;background:radial-gradient(circle,rgba(255,255,255,.05) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity var(--transition)}
.tracker-detail-stat:hover::before{opacity:1}
.tracker-detail-stat-num{font-size:22px;font-weight:800;color:var(--text-0);font-family:var(--mono);line-height:1.1;position:relative;z-index:1}
.tracker-detail-stat-label{font-size:9px;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:4px;position:relative;z-index:1}
.tracker-detail-stat:hover .tracker-detail-stat-label{color:var(--text-1)}
.tracker-detail-month-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tracker-detail-month-title{font-size:13px;font-weight:700;color:var(--text-0);text-transform:capitalize}
.tracker-detail-month-btn{width:28px;height:28px;border-radius:7px;border:1px solid var(--line-strong);background:var(--bg-card-2);color:var(--text-1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.tracker-detail-month-btn:hover{background:var(--bg-elev);color:var(--text-0);border-color:var(--text-3)}
.tracker-detail-month-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4}
.tracker-detail-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:6px;max-width:340px;margin-left:auto;margin-right:auto}
.tracker-detail-dow{font-size:9px;color:var(--text-3);text-align:center;font-weight:700;padding-bottom:2px;text-transform:uppercase}
.tracker-detail-day{aspect-ratio:1;border-radius:6px;background:var(--bg-card-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-1);font-weight:700;cursor:pointer;transition:all var(--transition);font-family:var(--mono)}
.tracker-detail-day:hover{background:var(--bg-elev);border-color:var(--text-3);color:var(--text-0)}
.tracker-detail-day.checked{background:#fff;color:#000;border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,.4)}
.tracker-detail-day.today{box-shadow:0 0 0 1.5px rgba(255,255,255,.5) inset;color:#fff;font-weight:900;background:var(--bg-elev)}
.tracker-detail-day.today.checked{box-shadow:0 0 0 2px rgba(255,255,255,.95) inset,0 0 12px rgba(255,255,255,.5);background:#fff;color:#000}
.tracker-detail-day.empty{background:transparent;border-color:transparent;cursor:default}
.tracker-detail-day.future{opacity:.45;cursor:not-allowed}
.tracker-detail-day.future:hover{background:var(--bg-card-2);color:var(--text-1);border-color:var(--line)}
/* Меню "+ Создать" на странице Совместно */
.share-create-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-panel);border:1px solid var(--line-strong);border-radius:12px;padding:6px;min-width:260px;box-shadow:0 8px 28px rgba(0,0,0,.6);z-index:50;flex-direction:column;gap:3px}
.share-create-menu.open{display:flex}
.share-create-option{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg-card);border:1px solid var(--line);border-radius:9px;color:var(--text-0);cursor:pointer;transition:all var(--transition);text-align:left;font-family:var(--sans);width:100%}
.share-create-option:hover{background:var(--bg-card-2);border-color:var(--line-strong)}
.share-create-option svg{width:18px;height:18px;color:var(--text-1);flex-shrink:0}
.share-create-option:hover svg{color:var(--accent)}
.share-create-option-title{font-size:13px;font-weight:700;color:var(--text-0);margin-bottom:2px}
.share-create-option-desc{font-size:10.5px;color:var(--text-3);font-weight:500;line-height:1.3}
.tracker-detail-participants-row{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--line);margin-top:12px}
.tracker-detail-participants-label{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.tracker-detail-participants-list{display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-height:120px;overflow-y:auto;padding:6px 2px 2px 2px}
.tracker-detail-participant{display:flex;align-items:center;gap:6px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;transition:background var(--transition),border-color var(--transition),box-shadow var(--transition);position:relative}
.tracker-detail-participant:hover{background:var(--bg-elev);border-color:var(--text-3);box-shadow:0 3px 10px rgba(0,0,0,.3);z-index:5}
.tracker-detail-participant-emoji{width:24px;height:24px;border-radius:50%;background:var(--bg-elev);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:transform var(--transition)}
.tracker-detail-participant:hover .tracker-detail-participant-emoji{transform:scale(1.12)}
.tracker-detail-participant-name{font-size:11px;color:var(--text-0);font-weight:600}

/* Попап информации об участнике */
.participant-info-header{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0 16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.participant-info-avatar{width:80px;height:80px;border-radius:50%;background:var(--bg-elev);border:2px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:40px;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.participant-info-name{font-size:20px;font-weight:800;color:var(--text-0)}
.participant-info-tracker{font-size:12px;color:var(--text-2)}
.participant-info-stats{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.participant-info-stat{display:flex;align-items:center;gap:12px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;transition:all var(--transition)}
.participant-info-stat:hover{background:var(--bg-elev);border-color:var(--line-strong)}
.participant-info-stat svg{width:16px;height:16px;color:var(--accent);flex-shrink:0}
.participant-info-stat-label{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.participant-info-stat-value{font-size:14px;color:var(--text-0);font-weight:700;margin-top:2px}
.participant-info-note{font-size:11px;color:var(--text-3);background:var(--bg-card-2);border:1px dashed var(--line-strong);border-radius:9px;padding:10px 12px;line-height:1.5;text-align:center}

/* Управление трекером — модалка */
.tracker-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.tracker-emoji-btn{aspect-ratio:1;border-radius:8px;border:1px solid var(--line);background:var(--bg-card-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);color:var(--text-1);padding:0}
.tracker-emoji-btn:hover{background:var(--bg-elev);border-color:var(--line-strong);color:var(--text-0)}
.tracker-emoji-btn.selected{background:var(--bg-elev);border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}

.tracker-color-grid{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 6px;padding:2px 0}
.tracker-color-btn{width:24px;height:24px;min-height:24px;align-self:center;border-radius:50%;border:2px solid rgba(0,0,0,.45);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);padding:0;box-shadow:0 0 4px currentColor;flex-shrink:0;filter:brightness(.88)}
.tracker-color-btn:hover{transform:scale(1.15);box-shadow:0 0 16px currentColor,0 0 24px currentColor}
.tracker-color-btn.selected{border-color:#fff;box-shadow:0 0 14px currentColor,0 0 24px currentColor;transform:scale(1.1)}
.tracker-color-btn svg{display:none}

.tracker-participants-edit{display:flex;flex-direction:column;gap:6px}
.tracker-participant-edit-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:9px}
.tracker-participant-edit-emoji{font-size:20px;width:36px;height:36px;border-radius:50%;background:var(--bg-elev);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:all var(--transition)}
.tracker-participant-edit-emoji:hover{background:var(--bg-card)}
.tracker-participant-edit-name{flex:1;background:transparent;border:none;color:var(--text-0);font-family:var(--sans);font-size:13px;outline:none}
.tracker-participant-edit-remove{width:24px;height:24px;border-radius:5px;border:none;background:transparent;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.tracker-participant-edit-remove:hover{color:var(--danger);background:rgba(200,119,102,.1)}
.tracker-participant-edit-remove svg{width:14px;height:14px}
@media (max-width:1100px){.share-grid{grid-template-columns:1fr}.share-card-wide{grid-column:span 1}}
@media (max-width:1100px){.account-grid{grid-template-columns:1fr}}
.notes-templates-panel{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),margin-top .3s ease;margin-top:0}
.notes-templates-panel.expanded{max-height:260px;margin-top:8px}
.notes-templates-panel-inner{display:flex;flex-direction:column;gap:6px;padding:2px;overflow-y:auto;max-height:240px}
.notes-template-item{background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;padding:9px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;transition:all var(--transition)}
.notes-template-item:hover{border-color:var(--line-strong);background:var(--bg-elev)}
.notes-template-item-name{font-weight:700;font-size:12px;color:var(--text-0);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notes-template-item-actions{display:flex;gap:4px;flex-shrink:0}
.notes-template-apply-btn{padding:4px 10px;background:transparent;border:1px solid var(--line-strong);border-radius:6px;color:var(--text-1);cursor:pointer;font-size:11px;font-weight:600;transition:all var(--transition)}
.notes-template-apply-btn:hover{background:var(--bg-elev);color:var(--text-0);border-color:var(--text-3)}
.notes-templates-add-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px;background:transparent;border:1px dashed var(--line-strong);border-radius:7px;color:var(--text-2);cursor:pointer;font-size:11px;font-weight:600;transition:all var(--transition);margin-top:4px}
.notes-templates-add-btn:hover{color:var(--text-0);border-color:var(--text-3);background:var(--bg-card-2)}
.notes-templates-add-btn svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2}
.templates-page{display:flex;flex-direction:column;flex:1;min-height:0;gap:14px}
.templates-header-row{display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.templates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;flex:1;min-height:0;overflow-y:auto;align-content:start}
.template-card{background:var(--bg-card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;transition:all var(--transition);min-height:140px}
.template-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.template-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.template-card-title{font-size:14px;font-weight:700;word-wrap:break-word}
.template-card-actions{display:flex;gap:3px;flex-shrink:0}
.template-card-content{font-size:11px;color:var(--text-2);line-height:1.5;flex:1;word-wrap:break-word;max-height:80px;overflow:hidden;position:relative;white-space:pre-wrap}
.template-card-content::after{content:'';position:absolute;bottom:0;left:0;right:0;height:20px;background:linear-gradient(transparent,var(--bg-card));pointer-events:none}
.template-card-placeholders{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.template-placeholder-chip{display:inline-block;padding:2px 7px;background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:999px;color:var(--accent);font-size:9px;font-weight:700;font-family:var(--mono)}
.template-card-apply{width:100%;padding:8px;background:var(--bg-card-2);border:1px solid var(--line-strong);border-radius:8px;color:var(--text-0);cursor:pointer;font-size:12px;font-weight:700;transition:all var(--transition);margin-top:6px}
.template-card-apply:hover{background:var(--text-0);color:var(--bg-page);border-color:var(--text-0)}
.template-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text-2)}
.graph-page{display:flex;flex-direction:column;flex:1;min-height:0;gap:12px}
.graph-controls{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:12px;flex-shrink:0;flex-wrap:wrap}
.graph-control-label{font-size:11px;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.graph-toggles{display:flex;gap:4px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:999px;padding:3px}
.graph-toggle{padding:5px 12px;border-radius:999px;background:transparent;border:none;color:var(--text-2);cursor:pointer;font-size:11px;font-weight:600;transition:all var(--transition)}
.graph-toggle:hover{color:var(--text-1)}
.graph-toggle.active{background:var(--bg-elev);color:var(--text-0);font-weight:700}
.graph-stats{display:flex;gap:16px;margin-left:auto;font-family:var(--mono);font-size:14px;color:var(--text-2);font-weight:600}
.graph-stat{display:flex;align-items:center;gap:6px}
.graph-stat .num{color:var(--text-0);font-weight:700;font-size:16px}
.graph-area{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;flex:1;position:relative;overflow:hidden;min-height:0;cursor:grab}
.graph-area:active{cursor:grabbing}
.graph-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.graph-edge{stroke:var(--line-strong);stroke-width:1;fill:none;opacity:.5;transition:stroke .2s ease,opacity .2s ease;pointer-events:none}
.graph-edge.highlighted{stroke:var(--accent);opacity:1;stroke-width:1.6}
.graph-node-group{cursor:pointer;transition:opacity .2s ease}
.graph-node-group.dimmed{opacity:.2}
.graph-node-circle{transition:r .2s ease,fill .2s ease,stroke .2s ease;filter:drop-shadow(0 0 4px currentColor)}
.graph-node-group:hover .graph-node-circle{stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 8px currentColor)}
.graph-node-circle.note{fill:var(--accent);color:var(--accent)}
.graph-node-circle.folder{fill:var(--success);color:var(--success)}
.graph-node-circle.tag{fill:var(--sleep-wake);color:var(--sleep-wake)}
.graph-node-circle.task{fill:#d85a5a;color:#d85a5a}
.graph-node-label{fill:var(--text-1);font-size:10px;font-weight:600;text-anchor:middle;pointer-events:none;user-select:none}
.graph-node-group:hover .graph-node-label{fill:#fff;font-weight:700}
.graph-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--text-3);font-size:13px;pointer-events:none;text-align:center;gap:6px}
.graph-legend{position:absolute;bottom:12px;left:12px;display:flex;flex-direction:column;gap:0;font-size:11px;color:var(--text-1);font-weight:600;z-index:5}
.graph-legend-toggle{width:26px;height:26px;border-radius:50%;background:var(--bg-card-2);border:1px solid var(--line-strong);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.graph-legend-toggle:hover{color:var(--text-0);border-color:var(--text-3);transform:scale(1.05)}
.graph-legend-toggle svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform var(--transition-slow)}
.graph-legend.open .graph-legend-toggle svg{transform:rotate(180deg)}
.graph-legend-panel{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1),margin-bottom .35s ease;background:var(--bg-card-2);border:1px solid var(--line-strong);border-radius:12px;margin-bottom:0;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.graph-legend.open .graph-legend-panel{max-height:200px;margin-bottom:8px}
.graph-legend-panel-inner{padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.graph-legend-item{display:flex;align-items:center;gap:9px;font-size:12px}
.graph-legend-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.graph-legend-dot.note{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.graph-legend-dot.folder{background:var(--success);box-shadow:0 0 8px var(--success)}
.graph-legend-dot.tag{background:var(--sleep-wake);box-shadow:0 0 8px var(--sleep-wake)}
.graph-legend-dot.task{background:#d85a5a;box-shadow:0 0 8px #d85a5a}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);z-index:100;align-items:center;justify-content:center;padding:20px}
#participant-info-modal{z-index:120}
#finop-edit-modal{z-index:120}
.modal-overlay.active{display:flex}
.modal{background:var(--bg-panel);border:1px solid var(--line-strong);border-radius:18px;padding:28px;max-width:460px;width:100%;animation:modalSlide .25s cubic-bezier(.4,0,.2,1);max-height:90vh;overflow-y:auto}
@keyframes modalSlide{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-title{font-size:20px;font-weight:700;margin-bottom:18px}
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-2);margin-bottom:8px;font-weight:700}
.form-input,.form-select,.form-textarea{width:100%;padding:10px 14px;background:var(--bg-input);border:1px solid var(--line);border-radius:8px;color:var(--text-0);font-family:var(--sans);font-size:13px;transition:all var(--transition);color-scheme:dark}
input[type="date"],input[type="time"],input[type="datetime-local"]{color-scheme:dark}
input[type="date"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(0.8);cursor:pointer;opacity:.7;transition:opacity var(--transition)}
input[type="date"]::-webkit-calendar-picker-indicator:hover,input[type="time"]::-webkit-calendar-picker-indicator:hover{opacity:1}
.form-textarea{resize:vertical;min-height:80px;line-height:1.5}
.form-textarea.code{font-family:var(--mono);font-size:12px;min-height:140px}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--text-3);background:var(--bg-card)}
.form-helper{font-size:10px;color:var(--text-3);margin-top:6px;line-height:1.5}
.form-helper code{background:var(--bg-elev);padding:1px 5px;border-radius:3px;font-family:var(--mono);color:var(--accent);font-size:10px}
.picker-row{display:flex;gap:6px;flex-wrap:wrap}
.picker-option{flex:1;min-width:80px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg-card-2);color:var(--text-1);font-size:12px;font-weight:700;cursor:pointer;transition:all var(--transition);text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
.picker-option:hover{border-color:var(--line-strong)}
.picker-option .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.picker-option[data-priority="low"] .dot{background:var(--priority-low)}
.picker-option[data-priority="medium"] .dot{background:var(--priority-medium)}
.picker-option[data-priority="high"] .dot{background:var(--priority-high)}
.picker-option.selected{background:var(--bg-elev);color:var(--text-0)}
.picker-option[data-priority="low"].selected{border-color:var(--priority-low);box-shadow:0 0 0 1px var(--priority-low) inset}
.picker-option[data-priority="medium"].selected{border-color:var(--priority-medium);box-shadow:0 0 0 1px var(--priority-medium) inset}
.picker-option[data-priority="high"].selected{border-color:var(--priority-high);box-shadow:0 0 0 1px var(--priority-high) inset}
.picker-option[data-due].selected,.picker-option[data-debt-dir].selected,.picker-option[data-trans-type].selected,.picker-option[data-card-type].selected{border-color:var(--text-3);box-shadow:0 0 0 1px var(--text-3) inset}
.due-picker-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:6px}
.due-picker-row .picker-option{min-width:0}
.due-picker-bottom{width:100%;padding:11px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg-card-2);color:var(--text-1);font-size:13px;font-weight:700;cursor:pointer;transition:all var(--transition);text-align:center}
.due-picker-bottom:hover{border-color:var(--line-strong)}
.due-picker-bottom.selected{background:var(--bg-elev);color:var(--text-0);border-color:var(--text-3);box-shadow:0 0 0 1px var(--text-3) inset}
.due-picker-split{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.due-picker-date{padding:11px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg-card-2);color:var(--text-1);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--sans);transition:all var(--transition);width:100%;color-scheme:dark}
.due-picker-date:hover{border-color:var(--line-strong)}
.due-picker-date.has-value{background:var(--bg-elev);color:var(--text-0);border-color:var(--text-3);box-shadow:0 0 0 1px var(--text-3) inset}
.color-picker{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 6px;padding:6px 2px}
.color-option{width:24px;height:24px;min-height:24px;align-self:center;border-radius:50%;cursor:pointer;transition:all var(--transition);border:2px solid rgba(0,0,0,.45);box-shadow:0 0 4px currentColor;flex-shrink:0;filter:brightness(.88)}
.color-option:hover{transform:scale(1.15);box-shadow:0 0 16px currentColor,0 0 24px currentColor}
.color-option.selected{border-color:#fff;box-shadow:0 0 14px currentColor,0 0 24px currentColor;transform:scale(1.1)}
.modal-actions{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.modal-actions-right{display:flex;gap:10px;margin-left:auto}
.btn-primary{background:var(--bg-elev);color:var(--text-0);border-color:var(--line-strong);font-weight:700}
.btn-primary:hover{background:var(--bg-panel);color:#fff;border-color:var(--text-3)}
.btn-danger{background:transparent;color:var(--danger);border-color:rgba(200,119,102,.4)}
.btn-danger:hover{background:rgba(200,119,102,.1);border-color:var(--danger)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg-card-2);border:1px solid var(--line-strong);border-radius:8px;padding:10px 22px;color:var(--text-0);font-size:13px;opacity:0;transition:all .3s ease;pointer-events:none;z-index:200}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:1300px){.app{max-width:100%;padding:12px 18px}}
@media (max-width:1100px){html,body{overflow:auto;height:auto}.app{grid-template-columns:60px 1fr;padding:10px;gap:10px;height:auto;min-height:100vh}.sidebar{padding:12px 6px;height:auto;position:sticky;top:10px}.brand-text,.nav-item span,.nav-section-label,.user-info{display:none}.nav-item{justify-content:center}.main{padding:16px;height:auto;min-height:calc(100vh - 20px)}.home-grid,.tracker-bottom,.notes-layout{grid-template-columns:1fr}.finance-stats{grid-template-columns:repeat(2,1fr)}.finance-charts-row{grid-template-columns:1fr;height:auto}.stats-overview{grid-template-columns:1fr 1fr}.donut-with-cats{flex-direction:column}}

/* Collapsible-секции в модалках */
.collapse-section{margin-bottom:14px}
.collapse-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:4px 0;user-select:none}
.collapse-header-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);font-weight:700}
.collapse-header-arrow{width:16px;height:16px;color:var(--text-3);transition:transform var(--transition);fill:none;stroke:currentColor;stroke-width:2.4}
.collapse-section.open .collapse-header-arrow{transform:rotate(180deg);color:var(--text-1)}
.collapse-content{display:none;padding-top:10px}
.collapse-section.open .collapse-content{display:block}
.collapse-header:hover .collapse-header-label{color:var(--text-0)}
.collapse-header:hover .collapse-header-arrow{color:var(--text-1)}

/* Модалка с прокруткой контента и закреплёнными actions */
.modal.modal-scroll{display:flex;flex-direction:column;max-height:90vh;padding:0;overflow:hidden}
.modal.modal-scroll .modal-title{padding:18px 22px 12px;border-bottom:1px solid var(--line);margin:0;flex-shrink:0}
.modal.modal-scroll .modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;padding:14px 22px}
.modal.modal-scroll .modal-actions{padding:12px 22px;border-top:1px solid var(--line);margin:0;flex-shrink:0;background:var(--bg-panel)}

/* Запретить ручной resize textarea */
.form-textarea{resize:none}

/* Shared-item: финансы операции */
.finance-mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.finance-mini-stat{background:var(--bg-card-2);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.finance-mini-stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:600;margin-bottom:3px}
.finance-mini-stat-value{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--text-0)}
.finance-mini-stat-value.income{color:var(--success)}
.finance-mini-stat-value.expense{color:var(--danger)}
.finance-ops-list{display:flex;flex-direction:column;gap:5px;max-height:none;overflow:visible;margin-bottom:8px}
.finance-op-row{display:flex;align-items:center;gap:8px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;padding:7px 11px}
.finance-op-name{flex:1;font-size:12px;color:var(--text-0)}
.finance-op-amount{font-family:var(--mono);font-size:12px;font-weight:700}
.finance-op-amount.income{color:var(--success)}
.finance-op-amount.expense{color:var(--danger)}
.finance-op-row .icon-btn-tiny{flex-shrink:0}
.finance-op-add-row{display:grid;grid-template-columns:1fr auto auto auto;gap:6px;align-items:center;margin-bottom:10px}
.finance-op-add-row input{padding:7px 9px;font-size:12px}
.finance-op-add-row select{padding:7px 9px;font-size:12px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:7px;color:var(--text-0);font-family:var(--sans)}
.finance-op-add-row .btn{padding:7px 12px;font-size:12px}

/* Note-formatting toolbar в shared-item */
.shared-note-toolbar{display:flex;gap:4px;flex-wrap:wrap;padding:6px 8px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;margin-top:6px}

/* Финансы — большой баланс */
.finance-balance-big{background:linear-gradient(135deg,var(--bg-elev),var(--bg-card-2));border:1px solid var(--line-strong);border-radius:12px;padding:14px 16px;margin-bottom:10px;text-align:center}
.finance-balance-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:700;margin-bottom:4px}
.finance-balance-value{font-family:var(--mono);font-size:24px;font-weight:800;letter-spacing:.01em}

/* Финансы — форма новой операции (крупная) */
.finop-form{background:var(--bg-card-2);border:1px solid var(--line);border-radius:11px;padding:12px;display:flex;flex-direction:column;gap:9px}
.finop-type-toggle{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.finop-type-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 12px;background:var(--bg-card);border:1.5px solid var(--line);border-radius:8px;color:var(--text-2);cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:700;transition:all var(--transition)}
.finop-type-btn svg{width:13px;height:13px}
.finop-type-btn:hover{border-color:var(--text-3);color:var(--text-0)}
.finop-type-btn.income.active{background:rgba(143,168,118,.15);border-color:var(--success);color:var(--success);box-shadow:0 0 12px rgba(143,168,118,.25) inset}
.finop-type-btn.expense.active{background:rgba(196,107,90,.15);border-color:var(--danger);color:var(--danger);box-shadow:0 0 12px rgba(196,107,90,.25) inset}
.finop-name-input{padding:10px 12px!important;font-size:13px}
.finop-amount-row{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center}
.finop-amount-input{padding:10px 12px!important;font-size:14px!important;font-family:var(--mono);font-weight:700;text-align:right}
.finop-currency{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--text-2);padding:0 4px}
.finop-add-btn{padding:10px 14px!important;font-size:12px!important;display:flex;align-items:center;gap:5px;white-space:nowrap;background:var(--bg-elev)!important;color:var(--text-0)!important;border:1.5px solid var(--line-strong)!important}
.finop-add-btn:hover{background:var(--bg-panel)!important;border-color:var(--text-3)!important}

/* Операция: иконка типа */
.finance-op-type-icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.finance-op-type-icon svg{width:11px;height:11px}
.finance-op-type-icon.income{background:rgba(143,168,118,.18);color:var(--success)}
.finance-op-type-icon.expense{background:rgba(196,107,90,.18);color:var(--danger)}

/* Превью иконки в свёрнутой секции */
.collapse-icon-preview{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:6px;color:var(--text-1)}
.collapse-icon-preview svg{width:14px;height:14px}

/* Красивый редактор заметки в Совместно */
.shared-note-editor{background:var(--bg-card-2);border:1px solid var(--line);border-radius:11px;overflow:hidden;display:flex;flex-direction:column}
.shared-note-toolbar{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:6px 8px;background:var(--bg-elev);border-bottom:1px solid var(--line);margin:0!important;border:none!important;border-radius:0!important}
.shared-note-toolbar::-webkit-scrollbar{display:none}
.shared-note-toolbar .note-toolbar-btn{flex:0 0 auto;background:transparent;border:1px solid transparent;color:var(--text-1);min-width:22px;height:24px;border-radius:5px;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0 5px;cursor:pointer;transition:all var(--transition);font-family:var(--mono)}
.shared-note-toolbar .note-toolbar-btn:hover{background:var(--bg-card);color:var(--text-0);border-color:var(--line)}
.shared-note-toolbar .note-toolbar-btn.bold{font-weight:900;font-family:var(--sans)}
.shared-note-toolbar .note-toolbar-btn.italic{font-style:italic;font-family:var(--sans)}
.shared-note-toolbar .note-toolbar-btn.strike{text-decoration:line-through;font-family:var(--sans)}
.shared-note-toolbar .note-toolbar-divider{flex:0 0 auto;width:1px;background:var(--line);margin:3px 3px}
.shared-note-textarea{background:transparent!important;border:none!important;border-radius:0!important;padding:14px 16px!important;font-size:13px!important;line-height:1.6!important;color:var(--text-0)!important;min-height:140px}
.shared-note-textarea:focus{outline:none!important;box-shadow:none!important}

/* Красивый редактор задачи */
.shared-task-editor{background:var(--bg-card-2);border:1px solid var(--line);border-radius:11px;padding:10px;display:flex;flex-direction:column;gap:6px}
.shared-task-editor .subtask-edit-row{margin-bottom:0;background:var(--bg-card);border:1px solid var(--line);border-radius:8px;padding:4px 6px}
.shared-task-editor .subtask-input{background:transparent!important;border:none!important;padding:8px 10px!important;font-size:13px}
.shared-task-editor .subtask-input:focus{outline:none!important;box-shadow:none!important}
.subtask-empty{text-align:center;color:var(--text-3);font-size:11px;padding:14px;background:var(--bg-card);border:1px dashed var(--line-strong);border-radius:8px;font-style:italic}
.subtask-add-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--bg-elev)!important;color:var(--text-0)!important;border:1.5px solid var(--line-strong)!important;font-weight:700;margin-top:4px}
.subtask-add-btn:hover{background:var(--bg-panel)!important;border-color:var(--text-3)!important}

/* Новые цвета карточек Совместно (teal, pink, yellow, indigo, mint) */
.shared-tracker-card.color-teal{background:linear-gradient(160deg,rgba(90,154,154,.18) 0%,rgba(90,154,154,.06) 50%,rgba(20,20,20,.7) 100%);border-color:rgba(90,154,154,.35)}
.shared-tracker-card.color-teal::before{background:radial-gradient(circle,rgba(90,154,154,.15) 0%,transparent 70%)}
.shared-tracker-card.color-teal:hover{border-color:rgba(90,154,154,.6);box-shadow:0 6px 22px rgba(0,0,0,.45),0 0 22px rgba(90,154,154,.15)}
.shared-tracker-card.color-pink{background:linear-gradient(160deg,rgba(196,123,160,.18) 0%,rgba(196,123,160,.06) 50%,rgba(20,20,20,.7) 100%);border-color:rgba(196,123,160,.35)}
.shared-tracker-card.color-pink::before{background:radial-gradient(circle,rgba(196,123,160,.15) 0%,transparent 70%)}
.shared-tracker-card.color-pink:hover{border-color:rgba(196,123,160,.6);box-shadow:0 6px 22px rgba(0,0,0,.45),0 0 22px rgba(196,123,160,.15)}
.shared-tracker-card.color-yellow{background:linear-gradient(160deg,rgba(196,168,90,.18) 0%,rgba(196,168,90,.06) 50%,rgba(20,20,20,.7) 100%);border-color:rgba(196,168,90,.35)}
.shared-tracker-card.color-yellow::before{background:radial-gradient(circle,rgba(196,168,90,.15) 0%,transparent 70%)}
.shared-tracker-card.color-yellow:hover{border-color:rgba(196,168,90,.6);box-shadow:0 6px 22px rgba(0,0,0,.45),0 0 22px rgba(196,168,90,.15)}
.shared-tracker-card.color-indigo{background:linear-gradient(160deg,rgba(114,128,196,.18) 0%,rgba(114,128,196,.06) 50%,rgba(20,20,20,.7) 100%);border-color:rgba(114,128,196,.35)}
.shared-tracker-card.color-indigo::before{background:radial-gradient(circle,rgba(114,128,196,.15) 0%,transparent 70%)}
.shared-tracker-card.color-indigo:hover{border-color:rgba(114,128,196,.6);box-shadow:0 6px 22px rgba(0,0,0,.45),0 0 22px rgba(114,128,196,.15)}
.shared-tracker-card.color-mint{background:linear-gradient(160deg,rgba(122,196,154,.18) 0%,rgba(122,196,154,.06) 50%,rgba(20,20,20,.7) 100%);border-color:rgba(122,196,154,.35)}
.shared-tracker-card.color-mint::before{background:radial-gradient(circle,rgba(122,196,154,.15) 0%,transparent 70%)}
.shared-tracker-card.color-mint:hover{border-color:rgba(122,196,154,.6);box-shadow:0 6px 22px rgba(0,0,0,.45),0 0 22px rgba(122,196,154,.15)}

/* Просмотр shared-item */
.shared-detail-note-content{background:var(--bg-card-2);border:1px solid var(--line);border-radius:11px;padding:14px 18px;font-size:13px;line-height:1.6;color:var(--text-0)}
.shared-detail-note-content h1,.shared-detail-note-content h2,.shared-detail-note-content h3{margin-top:8px;margin-bottom:8px}
.shared-detail-task-progress{background:var(--bg-card-2);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px}
.shared-detail-task-progress-info{display:flex;justify-content:space-between;font-size:11px;color:var(--text-2);margin-bottom:6px;font-weight:600}
.shared-detail-task-progress-info b{color:var(--text-0);font-family:var(--mono);font-size:13px}
.shared-detail-task-progress-bar{height:5px;background:var(--bg-elev);border-radius:3px;overflow:hidden}
.shared-detail-task-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--success));border-radius:3px;transition:width var(--transition-slow);box-shadow:0 0 8px var(--accent)}
.shared-detail-task-list{display:flex;flex-direction:column;gap:4px}
.shared-detail-task-item{display:flex;align-items:center;gap:9px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:7px;padding:7px 12px;cursor:pointer;transition:all var(--transition);font-size:13.5px;color:var(--text-0)}
.shared-detail-task-item:hover{background:var(--bg-elev)}
.shared-detail-task-item.done .shared-detail-task-text{text-decoration:line-through;color:var(--text-3)}
.shared-detail-task-check{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--text-3);display:flex;align-items:center;justify-content:center;font-weight:900;flex-shrink:0;color:transparent;transition:all var(--transition);font-size:12px}
.shared-detail-task-item.done .shared-detail-task-check{background:#fff;color:#000;border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,.5)}
.shared-detail-task-text{flex:1}

/* Список друзей в личном кабинете */
.friends-card{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-top:14px;display:flex;flex-direction:column;gap:12px}
.friends-card-header{display:flex;align-items:center;justify-content:space-between}
.friends-card-title{font-size:14px;font-weight:700;color:var(--text-0);display:flex;align-items:center;gap:8px}
.friends-card-title svg{width:14px;height:14px;color:var(--accent)}
.friends-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto}
.friend-row{display:flex;align-items:center;gap:10px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:9px;padding:8px 11px;cursor:pointer;transition:all var(--transition)}
.friend-row:hover{background:var(--bg-elev);border-color:var(--line-strong)}
.friend-avatar{width:32px;height:32px;border-radius:50%;background:var(--bg-elev);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;border:1px solid var(--line-strong)}
.friend-info{flex:1;min-width:0}
.friend-name{font-size:13px;font-weight:700;color:var(--text-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend-status{font-size:10.5px;color:var(--text-3);font-weight:500;margin-top:1px}
.friend-msg-btn{width:30px;height:30px;border-radius:50%;background:var(--bg-elev);border:1px solid var(--line-strong);color:var(--text-1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition);flex-shrink:0}
.friend-msg-btn:hover{background:var(--accent);color:#000;border-color:var(--accent)}
.friend-msg-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.friends-empty{text-align:center;padding:18px;color:var(--text-3);font-size:11.5px;font-style:italic;background:var(--bg-card-2);border:1px dashed var(--line-strong);border-radius:9px}

/* Профиль друга — модалка */
.friend-profile-header{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0 16px;border-bottom:1px solid var(--line);margin-bottom:14px}
.friend-profile-avatar{width:90px;height:90px;border-radius:50%;background:var(--bg-elev);border:2px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:44px;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.friend-profile-name{font-size:20px;font-weight:800;color:var(--text-0)}
.friend-profile-bio{font-size:12px;color:var(--text-2);text-align:center;line-height:1.4;padding:0 12px}

/* Кнопка чата в углу страницы */
.chat-fab{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;background:var(--accent);color:#000;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(232,201,140,.4),0 0 0 1px rgba(255,255,255,.06) inset;z-index:90;transition:all var(--transition)}
.chat-fab:hover{transform:scale(1.08);box-shadow:0 8px 28px rgba(232,201,140,.55)}
.chat-fab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2}
.chat-fab-badge{position:absolute;top:0;right:0;background:var(--danger);color:#fff;font-size:10px;font-weight:800;border-radius:10px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--bg-page)}

/* Чат-окно (mini-chat) */
.chat-window{display:none;position:fixed;right:22px;bottom:90px;width:340px;height:460px;background:var(--bg-panel);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,.6);z-index:91;flex-direction:column;overflow:hidden}
.chat-window.open{display:flex}
.chat-window-header{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-shrink:0;background:var(--bg-card)}
.chat-back-btn{width:24px;height:24px;border-radius:5px;background:transparent;border:none;color:var(--text-2);cursor:pointer;display:none;align-items:center;justify-content:center}
.chat-back-btn.visible{display:flex}
.chat-back-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4}
.chat-back-btn:hover{color:var(--text-0)}
.chat-window-avatar{width:28px;height:28px;border-radius:50%;background:var(--bg-elev);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;border:1px solid var(--line-strong)}
.chat-window-title{flex:1;font-size:13px;font-weight:700;color:var(--text-0);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-window-close{width:24px;height:24px;border-radius:5px;background:transparent;border:none;color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-window-close:hover{color:var(--danger);background:rgba(196,107,90,.1)}
.chat-window-close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4}
.chat-list-pane{flex:1;overflow-y:auto;padding:8px}
.chat-list-pane .friend-row{margin-bottom:5px}
.chat-list-pane .friends-empty{margin:18px 8px}
.chat-conversation-pane{display:none;flex:1;flex-direction:column;min-height:0}
.chat-conversation-pane.active{display:flex}
.chat-list-pane.hidden{display:none}
.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.chat-message{max-width:75%;padding:7px 11px;border-radius:11px;font-size:12.5px;line-height:1.4;word-wrap:break-word}
.chat-message.outgoing{background:var(--accent);color:#000;align-self:flex-end;border-bottom-right-radius:3px}
.chat-message.incoming{background:var(--bg-card-2);color:var(--text-0);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:3px}
.chat-message-time{font-size:9px;opacity:.65;margin-top:3px}
.chat-input-row{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line);background:var(--bg-card);flex-shrink:0}
.chat-input{flex:1;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;padding:8px 11px;color:var(--text-0);font-family:var(--sans);font-size:12.5px;outline:none}
.chat-input:focus{border-color:var(--accent)}
.chat-send-btn{width:32px;height:32px;border-radius:8px;background:var(--accent);color:#000;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-send-btn:hover{background:#fff}
.chat-send-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4}
.chat-empty{text-align:center;padding:30px 18px;color:var(--text-3);font-size:11.5px;font-style:italic}

/* Toggle security режим (пароль / email) */
.security-mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:9px;padding:4px;margin-bottom:14px}
.security-mode-btn{padding:8px 10px;background:transparent;border:none;color:var(--text-2);font-size:12px;font-weight:700;cursor:pointer;border-radius:6px;transition:all var(--transition);font-family:var(--sans);display:flex;align-items:center;justify-content:center;gap:6px}
.security-mode-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.security-mode-btn:hover{color:var(--text-0)}
.security-mode-btn.active{background:var(--bg-elev);color:var(--text-0);box-shadow:0 1px 4px rgba(0,0,0,.3)}

/* Совместный трекер: кнопка "Отметить сегодня" + неделя */
.shared-tracker-week-wrap{display:flex;flex-direction:column;gap:8px;flex:1;justify-content:center;position:relative;z-index:1}
.shared-tracker-today-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:9px 14px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);border-radius:9px;color:rgba(255,255,255,.9);cursor:pointer;font-family:var(--sans);font-size:12px;font-weight:700;transition:all var(--transition)}
.shared-tracker-today-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.5}
.shared-tracker-today-btn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35);color:#fff}
.shared-tracker-today-btn.checked{background:#fff;color:#000;border-color:#fff;box-shadow:0 0 14px rgba(255,255,255,.45)}

/* Превью карточек заметки/задачи */
.shared-simple-note-body{flex:1;min-height:80px}
.shared-simple-task-content{font-size:12px;color:rgba(255,255,255,.78);line-height:1.5;font-style:normal;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.04);border-radius:7px;padding:7px 10px;position:relative;z-index:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;overflow-wrap:anywhere}
.shared-simple-empty{font-size:11px;color:rgba(255,255,255,.5);text-align:center;padding:12px;background:rgba(0,0,0,.2);border:1px dashed rgba(255,255,255,.1);border-radius:7px;font-style:italic}

/* Inline edit подзадачи в просмотре */
.shared-detail-task-text-input{flex:1;background:transparent;border:none;color:var(--text-0);font-family:var(--sans);font-size:12.5px;outline:none;padding:1px 4px;border-radius:4px;transition:background var(--transition)}
.shared-detail-task-text-input:focus{background:var(--bg-elev)}
.shared-detail-task-item.done .shared-detail-task-text-input{text-decoration:line-through;color:var(--text-3)}
.subtask-add-row{display:flex;gap:6px;margin-top:8px;align-items:center}
.subtask-add-row input{flex:1}
.subtask-add-row .btn{padding:9px 12px!important;flex-shrink:0}

/* Тёмные кнопки (Редактировать в просмотре) */
.btn-dark{background:var(--bg-elev)!important;color:var(--text-0)!important;border:1px solid var(--line-strong)!important;font-weight:600}
.btn-dark:hover{background:var(--bg-panel)!important;border-color:var(--text-3)!important;color:#fff!important}

/* 3 stat-блока бюджета в ряд */
.finance-stat-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px;margin-bottom:4px}
.finance-stat-tile{background:var(--bg-card-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;text-align:center}
.finance-stat-tile.primary{background:linear-gradient(135deg,var(--bg-elev),var(--bg-card-2));border-color:var(--line-strong)}
.finance-stat-tile-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:700;margin-bottom:5px}
.finance-stat-tile-value{font-family:var(--mono);font-size:16px;font-weight:800;letter-spacing:.01em;color:var(--text-0);text-align:center}
.finance-stat-tile.primary .finance-stat-tile-value{font-size:18px}
.finance-stat-tile-value.income{color:var(--success)}
.finance-stat-tile-value.expense{color:var(--danger)}

/* Фильтр истории */
.finance-filter-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:10px;flex-wrap:wrap}
.finop-filter-toggle{display:flex;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;padding:2px;gap:0}
.finop-filter-btn{padding:5px 11px;background:transparent;border:none;color:var(--text-3);font-size:11px;font-weight:600;cursor:pointer;border-radius:5px;transition:all var(--transition);font-family:var(--sans)}
.finop-filter-btn:hover{color:var(--text-1)}
.finop-filter-btn.active{background:var(--bg-elev);color:var(--text-0);box-shadow:0 1px 3px rgba(0,0,0,.3)}

/* План-факт */
.finance-plan-list{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.finance-plan-item{display:grid;grid-template-columns:1fr auto;gap:2px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:7px;padding:2px 9px;align-items:center;grid-auto-rows:min-content}
.finance-plan-info{grid-column:1;display:flex;justify-content:space-between;align-items:center;font-size:11px}
.finance-plan-name{font-weight:700;color:var(--text-0);font-size:11px}
.finance-plan-amounts{font-family:var(--mono);color:var(--text-2);font-size:10px}
.finance-plan-amounts b{color:var(--text-0)}
.finance-plan-bar{grid-column:1/-1;height:3px;background:var(--bg-elev);border-radius:2px;overflow:hidden}
.finance-plan-bar-fill{height:100%;border-radius:2px;transition:width var(--transition-slow)}
.finance-plan-item .icon-btn-tiny{grid-column:2;grid-row:1;align-self:center;width:18px;height:18px;min-height:0;max-height:18px}
.plan-add-row{display:grid;grid-template-columns:1fr 90px auto;gap:6px;align-items:center;margin-top:6px}
.plan-add-row input{padding:8px 10px;font-size:12px}
.plan-add-btn{padding:8px 12px!important;background:var(--bg-elev)!important;color:var(--text-0)!important;border:1px solid var(--line-strong)!important}
.plan-add-btn:hover{background:var(--bg-panel)!important}

/* Долги */
.finance-debts-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.finance-debt-item{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;background:var(--bg-card-2);border:1px solid var(--line);border-radius:9px;padding:8px 11px}
.finance-debt-item.theyOwe{border-left:3px solid var(--success)}
.finance-debt-item.iOwe{border-left:3px solid var(--danger)}
.finance-debt-dir{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:700}
.finance-debt-name{font-size:12px;color:var(--text-0);font-weight:700}
.finance-debt-amount{font-family:var(--mono);font-size:12px;font-weight:700}
.finance-debt-amount.income{color:var(--success)}
.finance-debt-amount.expense{color:var(--danger)}
.debt-add-row{display:flex;flex-direction:column;gap:6px}
.debt-add-row input{padding:8px 10px;font-size:12px}
.debt-add-row .finop-type-toggle{margin-bottom:0}
.debt-add-row .finop-amount-row{grid-template-columns:1fr auto auto}

/* Тёмная кнопка + подзадачи */
.subtask-add-icon-btn{padding:0!important;width:34px!important;height:34px!important;min-height:34px!important;aspect-ratio:1;background:var(--bg-elev)!important;color:var(--text-0)!important;border:1px solid var(--line-strong)!important;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.subtask-add-icon-btn:hover{background:var(--bg-panel)!important;border-color:var(--text-3)!important}

/* Центрирование недели в карточке трекера */
.shared-tracker-week-wrap{flex:1;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.shared-tracker-week-wrap .shared-tracker-week{width:100%}

/* Карточка финансов с двумя колонками */
.shared-tracker-card.has-finance{min-height:240px}
.shared-finance-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative;z-index:1;flex:1;align-items:center}
.shared-finance-card-left{display:flex;flex-direction:column;gap:8px;padding-right:6px;border-right:1px solid rgba(255,255,255,.08)}
.shared-finance-balance-num{font-family:var(--mono);font-size:22px;font-weight:800;letter-spacing:.01em;color:#fff;line-height:1.1;text-shadow:0 2px 6px rgba(0,0,0,.4);word-break:break-all}
.shared-finance-balance-sub{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.65);font-weight:700;margin-top:-2px}
.shared-finance-mini-stats{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.shared-finance-mini-stat{font-family:var(--mono);font-size:11.5px;color:rgba(255,255,255,.85);font-weight:700;display:flex;align-items:center;gap:6px}
.shared-finance-mini-stat .dot{width:8px;height:8px;border-radius:50%;box-shadow:0 0 6px currentColor;flex-shrink:0}
.shared-finance-card-right{display:flex;flex-direction:column;gap:8px;padding-left:6px;justify-content:center}
.shared-finance-plan-mini-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.65);font-weight:700;margin-bottom:2px}
.shared-finance-plan-mini-item{display:flex;flex-direction:column;gap:3px}
.shared-finance-plan-mini-row{display:flex;justify-content:space-between;font-size:11.5px;color:rgba(255,255,255,.9);font-weight:600}
.shared-finance-plan-mini-pct{font-family:var(--mono);font-weight:700}
.shared-finance-plan-mini-bar{height:3px;background:rgba(0,0,0,.4);border-radius:2px;overflow:hidden}
.shared-finance-plan-mini-bar-fill{height:100%;border-radius:2px;transition:width var(--transition-slow)}
.shared-finance-empty-right{font-size:10.5px;color:rgba(255,255,255,.55);text-align:center;line-height:1.5;font-style:italic;padding:8px 4px}

/* Бюджет detail: секции с разделителями */
.finance-section{padding:0 0 6px;margin-top:14px}
.finance-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);font-weight:700;margin-bottom:8px}
.finance-divider{height:1px;background:var(--line);margin:12px 0}
.finance-empty{font-size:11px;color:var(--text-3);text-align:center;padding:14px;background:var(--bg-card-2);border:1px dashed var(--line-strong);border-radius:9px;font-style:italic}

/* Интерактивные stat-tile (кнопки) */
.finance-stat-tile{cursor:pointer;font-family:var(--sans);border:1px solid var(--line);transition:all var(--transition)}
.finance-stat-tile:hover{background:var(--bg-elev);border-color:var(--text-3)}
.finance-stat-tile.active{background:var(--bg-elev);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}

/* Срок: кнопки */
.finop-date-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.finop-date-btn{padding:7px 14px;background:var(--bg-card);border:1px solid var(--line);color:var(--text-2);font-size:11px;font-weight:700;cursor:pointer;border-radius:7px;transition:all var(--transition);font-family:var(--sans);white-space:nowrap;flex-shrink:0}
.finop-date-btn:first-child{padding:7px 18px}
.finop-date-btn:hover{color:var(--text-0);border-color:var(--text-3)}
.finop-date-btn.active{background:var(--bg-elev);color:var(--text-0);border-color:var(--accent)}
.finop-date-input{padding:7px 10px;font-size:11px!important;width:auto;flex:1;min-width:130px}
.finop-date-row .finop-add-btn{margin-left:auto}

/* Доп инфо у операции/долга */
.finance-op-info{flex:1;min-width:0}
.finance-op-date{font-size:9.5px;color:var(--text-3);font-family:var(--mono);margin-top:2px}
.finance-debt-info{flex:1;min-width:0}
.finance-debt-date{font-size:9.5px;color:var(--text-3);font-family:var(--mono);margin-top:2px}

/* Drag&drop карточек */
.shared-tracker-card{user-select:none}
.shared-tracker-card[draggable="true"]:hover{cursor:grab}
.shared-tracker-card.dragging{opacity:.4;cursor:grabbing}
.shared-tracker-card.drag-over{box-shadow:0 0 0 2px var(--accent), 0 0 20px rgba(232,201,140,.4) !important}

/* Задача: чекбокс рядом с названием */
.task-detail-name-row{display:flex;gap:10px;align-items:center}
.task-detail-done-check{width:36px;height:36px;border-radius:9px;border:2px solid var(--text-3);background:var(--bg-card-2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition);color:transparent;flex-shrink:0}
.task-detail-done-check svg{width:18px;height:18px}
.task-detail-done-check:hover{border-color:var(--text-2);background:var(--bg-elev)}
.task-detail-done-check.checked{background:#fff;color:#000;border-color:#fff;box-shadow:0 0 14px rgba(255,255,255,.5)}
.task-detail-name-input{flex:1;font-size:16px!important;font-weight:700;padding:10px 14px!important}
.task-detail-name-input.done{text-decoration:line-through;color:var(--text-3)!important}

/* Финансы редактор stat-tiles интерактив */
.finance-mini-stat{cursor:default}

/* Чекбокс выполнено в карточке задачи */
.shared-task-card-title-row{display:flex;align-items:center;gap:8px;position:relative;z-index:1}
.shared-task-card-check{width:28px;height:28px;min-height:28px;aspect-ratio:1;align-self:center;border-radius:7px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;color:transparent;cursor:pointer;transition:all var(--transition);flex-shrink:0}
.shared-task-card-check:hover{border-color:rgba(255,255,255,.6);background:rgba(0,0,0,.4)}
.shared-task-card-check.checked{background:#fff;color:#000;border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,.5)}
.shared-task-card-check svg{width:16px;height:16px}
.shared-task-card-title-row .shared-tracker-title.done{text-decoration:line-through;opacity:.55}

/* Привязка заметки */
.linked-to-section{display:flex;flex-direction:column;gap:8px}
.linked-to-current{display:flex;align-items:center;gap:8px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:9px;padding:8px 12px;cursor:pointer}
.linked-to-current:hover{background:var(--bg-elev)}
.linked-to-current svg{width:14px;height:14px;color:var(--accent)}
.linked-to-current-text{flex:1;font-size:12px;color:var(--text-0);font-weight:600}
.linked-to-current-clear{width:20px;height:20px;border-radius:5px;background:transparent;border:none;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.linked-to-current-clear:hover{color:var(--danger)}
.linked-to-current-clear svg{width:11px;height:11px}
.linked-to-picker{display:flex;flex-direction:column;gap:4px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:9px;padding:6px;max-height:160px;overflow-y:auto}
.linked-to-option{padding:7px 10px;font-size:11.5px}
.link-kind-toggle{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;padding:3px;margin-bottom:6px}
.link-kind-btn{padding:6px 8px;background:transparent;border:none;color:var(--text-2);font-size:11px;font-weight:700;cursor:pointer;border-radius:5px;transition:all var(--transition);font-family:var(--sans)}
.linked-to-option{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--bg-card);border:1px solid transparent;border-radius:7px;cursor:pointer;transition:all var(--transition);font-size:12px;color:var(--text-0)}
.linked-to-option:hover{background:var(--bg-elev);border-color:var(--line)}
.linked-to-option .badge{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);font-weight:700;padding:2px 7px;background:var(--bg-page);border-radius:999px}
.linked-to-empty{font-size:11px;color:var(--text-3);text-align:center;padding:10px;font-style:italic}

/* Список друзей в Личном кабинете */
.account-friends-section{margin-top:14px}

/* Переключатель типа привязки */
.link-kind-toggle{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:9px;padding:4px;margin-bottom:8px}
.link-kind-btn{padding:8px 10px;background:transparent;border:none;color:var(--text-2);font-size:12px;font-weight:700;cursor:pointer;border-radius:6px;transition:all var(--transition);font-family:var(--sans)}
.link-kind-btn:hover{color:var(--text-0)}
.link-kind-btn.active{background:var(--bg-elev);color:var(--text-0);box-shadow:0 1px 4px rgba(0,0,0,.3)}

/* Растягивание карточек на 2 колонки */
.shared-tracker-card.wide{grid-column:span 2}
.shared-tracker-resize-handle{position:absolute;right:0;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:5;opacity:0;transition:opacity var(--transition);background:linear-gradient(to right, transparent, rgba(255,255,255,.15))}
.shared-tracker-card:hover .shared-tracker-resize-handle{opacity:1}
.shared-tracker-resize-handle:hover,.shared-tracker-resize-handle.dragging{opacity:1!important;background:linear-gradient(to right, transparent, rgba(232,201,140,.4))}

/* Заметная кнопка + участника в collapse-header */
.collapse-header .btn[onclick*="addParticipant"],
.collapse-header .btn[onclick*="addSharedItemParticipant"]{width:30px!important;height:30px!important;padding:0!important;font-size:18px!important;font-weight:700;background:var(--bg-elev)!important;color:var(--text-0)!important;border:1.5px solid var(--line-strong)!important;border-radius:7px!important;display:inline-flex!important;align-items:center;justify-content:center;line-height:1}
.collapse-header .btn[onclick*="addParticipant"]:hover,
.collapse-header .btn[onclick*="addSharedItemParticipant"]:hover{background:var(--bg-panel)!important;color:#fff!important;border-color:var(--text-3)!important}

/* Вертикальный resize handle для задач */
.shared-tracker-resize-handle-v{position:absolute;bottom:0;left:0;right:0;height:8px;cursor:ns-resize;z-index:5;opacity:0;transition:opacity var(--transition);background:linear-gradient(to bottom, transparent, rgba(255,255,255,.15))}
.shared-tracker-card:hover .shared-tracker-resize-handle-v{opacity:1}
.shared-tracker-resize-handle-v:hover,.shared-tracker-resize-handle-v.dragging{opacity:1!important;background:linear-gradient(to bottom, transparent, rgba(232,201,140,.4))}
.shared-tracker-card.tall{grid-row:span 3;min-height:340px;max-height:none}
.shared-trackers-section{grid-auto-rows:min-content}

/* Заметка в карточке Совместно: перенос строк */
.shared-simple-note-body{flex:1;min-height:60px;font-size:12px;line-height:1.5;color:rgba(255,255,255,.78);white-space:pre-wrap;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;position:relative;z-index:1;max-height:140px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical}

/* Название трекера ввод: тёмный фон */
#shared-tracker-name,#shared-tracker-subtitle,#shared-item-name,#tracker-name,#habit-name-input{background:var(--bg-card-2)!important;color:var(--text-0)!important}

/* Карточка друзей */
.friends-card{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px;margin-top:14px}
.friends-card-header{display:flex;align-items:center;justify-content:space-between}
.friends-card-title{font-size:14px;font-weight:700;color:var(--text-0);display:flex;align-items:center;gap:8px}
.friends-card-title svg{width:15px;height:15px;color:var(--accent);fill:none;stroke:currentColor;stroke-width:2}
.friends-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto}
.friend-row{display:flex;align-items:center;gap:10px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:9px;padding:8px 11px;cursor:pointer;transition:all var(--transition)}
.friend-row:hover{background:var(--bg-elev);border-color:var(--line-strong)}
.friend-avatar{width:34px;height:34px;border-radius:50%;background:var(--bg-elev);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;border:1px solid var(--line-strong)}
.friend-info{flex:1;min-width:0}
.friend-name{font-size:13px;font-weight:700;color:var(--text-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend-status{font-size:10.5px;color:var(--text-3);font-weight:500;margin-top:1px;font-family:var(--mono)}
.friend-msg-btn{width:30px;height:30px;border-radius:50%;background:var(--bg-elev);border:1px solid var(--line-strong);color:var(--text-1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition);flex-shrink:0}
.friend-msg-btn:hover{background:var(--accent);color:#000;border-color:var(--accent)}
.friend-msg-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.friends-empty{text-align:center;padding:20px;color:var(--text-3);font-size:11.5px;font-style:italic;background:var(--bg-card-2);border:1px dashed var(--line-strong);border-radius:9px}

/* Профиль друга */
.friend-profile-header{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0 18px;border-bottom:1px solid var(--line);margin-bottom:16px}
.friend-profile-avatar{width:80px;height:80px;border-radius:50%;background:var(--bg-elev);border:2px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:40px;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.friend-profile-name{font-size:20px;font-weight:800;color:var(--text-0);margin-top:4px}
.friend-profile-bio{font-size:12.5px;color:var(--text-2);line-height:1.5;padding:10px 12px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;min-height:24px}

/* Маленькая кнопка удалить друга (незаметная) */
.friend-delete-btn{width:30px;height:30px;border-radius:7px;background:transparent;border:1px solid var(--line);color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;margin-right:auto;transition:all var(--transition)}
.friend-delete-btn:hover{background:rgba(196,107,90,.15);border-color:var(--danger);color:var(--danger)}

/* Чат FAB */
.chat-fab{position:fixed;right:24px;bottom:24px;width:54px;height:54px;border-radius:50%;background:var(--bg-elev);color:var(--text-0);border:1.5px solid var(--line-strong);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(0,0,0,.45);z-index:90;transition:all var(--transition)}
.chat-fab:hover{transform:scale(1.08);background:var(--bg-panel);border-color:var(--text-3);color:#fff}
.chat-fab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2}

/* Окно чата */
.chat-window{display:none;position:fixed;right:24px;bottom:92px;width:340px;height:460px;background:var(--bg-panel);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,.6);z-index:91;flex-direction:column;overflow:hidden}
.chat-window.open{display:flex}
.chat-window-header{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-shrink:0;background:var(--bg-card)}
.chat-back-btn{width:24px;height:24px;border-radius:5px;background:transparent;border:none;color:var(--text-2);cursor:pointer;display:none;align-items:center;justify-content:center}
.chat-back-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4}
.chat-window-avatar{width:30px;height:30px;border-radius:50%;background:var(--bg-elev);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;border:1px solid var(--line-strong)}
.chat-window-title{flex:1;font-size:13px;font-weight:700;color:var(--text-0);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-window-close{width:24px;height:24px;border-radius:5px;background:transparent;border:none;color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-window-close:hover{color:var(--danger);background:rgba(196,107,90,.1)}
.chat-window-close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4}
.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:7px}
.chat-message{max-width:75%;padding:7px 11px;border-radius:11px;font-size:12.5px;line-height:1.4;word-wrap:break-word}
.chat-message.outgoing{background:var(--accent);color:#000;align-self:flex-end;border-bottom-right-radius:3px}
.chat-message.incoming{background:var(--bg-card-2);color:var(--text-0);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:3px}
.chat-message-time{font-size:9px;opacity:.65;margin-top:3px}
.chat-input-row{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line);background:var(--bg-card);flex-shrink:0}
.chat-input{flex:1;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;padding:8px 11px;color:var(--text-0);font-family:var(--sans);font-size:12.5px;outline:none}
.chat-input:focus{border-color:var(--accent)}
.chat-send-btn{width:32px;height:32px;border-radius:8px;background:var(--accent);color:#000;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-send-btn:hover{background:#fff}
.chat-send-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4}
.chat-empty{text-align:center;padding:30px 18px;color:var(--text-3);font-size:11.5px;font-style:italic}

/* Security toggle */
.security-mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:9px;padding:4px;margin-bottom:14px}
.security-mode-btn{padding:8px 10px;background:transparent;border:none;color:var(--text-2);font-size:12px;font-weight:700;cursor:pointer;border-radius:6px;transition:all var(--transition);font-family:var(--sans);display:flex;align-items:center;justify-content:center;gap:6px}
.security-mode-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.security-mode-btn:hover{color:var(--text-0)}
.security-mode-btn.active{background:var(--bg-elev);color:var(--text-0);box-shadow:0 1px 4px rgba(0,0,0,.3)}

#friend-profile-modal{z-index:120}

/* Левая колонка ЛК — узкая, не расширяется */
.account-avatar-card{display:flex;flex-direction:column;gap:14px;align-items:stretch;width:100%}
.account-avatar-card .account-avatar-wrap{align-self:center}
.account-avatar-card .account-name-block{text-align:center}

/* Мой код приглашения */
.account-code-block{background:var(--bg-card-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:5px}
.account-code-label{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:700;text-align:center}
.account-code-row{display:flex;align-items:center;gap:8px;justify-content:center}
.account-code-value{font-family:var(--mono);font-size:14px;font-weight:800;color:var(--accent);letter-spacing:.05em;text-shadow:0 0 8px rgba(232,201,140,.3);text-align:center}
.account-code-copy{padding:4px 8px!important;flex-shrink:0}
.account-code-hint{font-size:10px;color:var(--text-3);font-style:italic;line-height:1.4;text-align:center}

/* Заявки в друзья */
.account-requests-block{background:rgba(232,201,140,.08);border:1px solid rgba(232,201,140,.25);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.account-requests-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);font-weight:700}
.account-requests-list{display:flex;flex-direction:column;gap:5px}
.friend-request-row{display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--line);border-radius:8px;padding:6px 9px}
.btn-tiny-success,.btn-tiny-danger{width:24px;height:24px;border-radius:6px;border:1px solid var(--line-strong);background:var(--bg-elev);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex-shrink:0;transition:all var(--transition)}
.btn-tiny-success:hover{background:rgba(143,168,118,.2);border-color:var(--success);color:var(--success)}
.btn-tiny-danger:hover{background:rgba(196,107,90,.15);border-color:var(--danger);color:var(--danger)}

/* Мои друзья */
.account-friends-block{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.account-friends-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);font-weight:700}
.account-friends-list{display:flex;flex-direction:column;gap:5px;max-height:232px;overflow-y:auto;min-height:232px}
.account-add-friend-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 12px;width:100%;font-size:12px}

/* Чат-FAB прячем когда не открыт чат (по запросу — оставляю но тёмным) */

/* Account: 2 поля в ряд */
.account-field-row{display:flex;gap:12px;align-items:flex-end;margin-bottom:0}
.account-field-row .account-field{margin-bottom:14px}

/* Безопасность: больше отступов между полями */
#security-password-section .account-field,
#security-email-section .account-field{margin-bottom:16px}

/* Данные кнопки: чуть выше */
.account-divider + .account-section-title{margin-top:14px!important}
.account-security-card .btn-save{margin-top:8px;margin-bottom:2px}

/* Плавное исчезание задач */
.task-row.fading-out,.task-item.fading-out{animation:fadeOutTask 1.2s ease forwards;pointer-events:none}
@keyframes fadeOutTask{
  0%{opacity:1;transform:scale(1)}
  60%{opacity:.4;transform:scale(.98)}
  100%{opacity:0;transform:scale(.92);max-height:0;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0}
}

/* Крестик отвязать — тёмный */
.linked-to-current-clear{background:var(--bg-elev)!important;border:1px solid var(--line-strong)!important;color:var(--text-2)!important;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition)}
.linked-to-current-clear:hover{background:rgba(196,107,90,.15)!important;border-color:var(--danger)!important;color:var(--danger)!important}

/* Picker empty state */
.participant-picker-empty{text-align:center;padding:30px 16px;display:flex;flex-direction:column;align-items:center}

/* Multiple links в заметке */
.linked-multi-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}

/* Чат-friend row */
.chat-friend-row{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:9px;cursor:pointer;transition:all var(--transition);margin-bottom:5px}
.chat-friend-row:hover{background:var(--bg-elev);border-color:var(--line-strong)}
.chat-friend-avatar{width:38px;height:38px;border-radius:50%;background:var(--bg-elev);display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--line-strong);flex-shrink:0}
.chat-friend-info{flex:1;min-width:0}
.chat-friend-top{display:flex;justify-content:space-between;align-items:center;gap:6px}
.chat-friend-name{font-size:13px;font-weight:700;color:var(--text-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-friend-time{font-size:10px;color:var(--text-3);font-family:var(--mono);flex-shrink:0}
.chat-friend-preview{font-size:11px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

/* Onboarding инструкция */
.onboarding-tip{background:linear-gradient(135deg, rgba(232,201,140,.06), rgba(143,168,118,.04));border:1px dashed rgba(232,201,140,.3);border-radius:12px;padding:14px 18px;margin-bottom:14px;position:relative;display:flex;gap:12px;align-items:flex-start}
.onboarding-tip-icon{width:36px;height:36px;border-radius:9px;background:rgba(232,201,140,.12);border:1px solid rgba(232,201,140,.25);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.onboarding-tip-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.onboarding-tip-content{flex:1;min-width:0}
.onboarding-tip-title{font-size:12.5px;font-weight:700;color:var(--text-0);margin-bottom:4px}
.onboarding-tip-text{font-size:11.5px;color:var(--text-2);line-height:1.5}
.onboarding-tip-close{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:6px;background:transparent;border:1px solid var(--line);color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.onboarding-tip-close:hover{background:var(--bg-elev);color:var(--text-0)}
.onboarding-tip-close svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4}

/* Заголовки страниц: одинаковые отступы (как на главной) */
.page-header{margin-bottom:14px}

/* Финансы: компактная "Новая операция" */
.finance-add-form{padding:10px 14px}

/* Чат: закреплённые сверху, индикатор */
.chat-friend-row{position:relative}
.chat-friend-row.pinned{background:rgba(232,201,140,.08);border-color:rgba(232,201,140,.25)}
.chat-pin-btn{width:24px;height:24px;border-radius:6px;background:transparent;border:1px solid var(--line);color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--transition);opacity:0}
.chat-friend-row:hover .chat-pin-btn,.chat-pin-btn.pinned{opacity:1}
.chat-pin-btn:hover{background:var(--bg-elev);color:var(--text-1)}
.chat-pin-btn.pinned{background:rgba(232,201,140,.2);color:var(--accent);border-color:rgba(232,201,140,.4)}
.chat-pin-btn svg{width:11px;height:11px}

/* ЛК: выравнивание секций */
.account-grid{display:grid;grid-template-columns:1fr 1.3fr 1.2fr;gap:14px;align-items:stretch}
.account-grid > div{display:flex;flex-direction:column;height:100%}
.account-personal-card,.account-security-card,.account-avatar-card{height:100%}

/* Безопасность: содержимое min-height по самому большому варианту */
.security-content{position:relative;min-height:280px}
#security-password-section,#security-email-section{transition:opacity .15s ease}

/* ===== Финальные правки ===== */

/* Шрифт Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');
:root{--sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important}
body,html,.app,button,input,textarea,select{font-family: 'Inter', -apple-system, system-ui, sans-serif}

/* Empty state в трекере — светлее */
.tracker-grid-empty,.habits-empty-state,.no-habits-state{color:var(--text-2);opacity:.85;font-style:normal;font-weight:500}

/* Onboarding в углу справа (вместо отдельной полосы) */
.onboarding-tip{position:relative;width:100%;max-width:none;margin-top:14px;margin-bottom:0;z-index:1;background:linear-gradient(135deg, rgba(232,201,140,.08), rgba(143,168,118,.05));border:1px solid rgba(232,201,140,.25);border-radius:11px;padding:13px 38px 13px 14px;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.onboarding-tip-icon{width:32px;height:32px;border-radius:8px}
.onboarding-tip-title{font-size:12px;font-weight:700}
.onboarding-tip-text{font-size:11px;line-height:1.5;color:var(--text-2)}
.onboarding-tip-close{position:absolute;top:6px;right:6px;width:22px;height:22px;background:rgba(0,0,0,.35);border:1px solid var(--line-strong);color:var(--text-0)}
.onboarding-tip-close:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.onboarding-tip-close svg{width:11px;height:11px}
.page-header{position:relative}
@media (max-width:1300px){.onboarding-tip{position:static;width:auto;max-width:none;margin-top:10px}}

/* Календари — темнее и читабельнее */
input[type="date"]{color-scheme:dark;background:var(--bg-card-2);color:var(--text-0);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:var(--mono);font-size:13px;cursor:pointer}
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(0.8) sepia(0.3) saturate(2) hue-rotate(10deg);cursor:pointer;opacity:.85}
input[type="date"]:hover{border-color:var(--text-3)}
input[type="date"]:focus{border-color:var(--accent);outline:none}

/* Поле с автокомплитом города */
.city-input-wrap{position:relative}
.city-suggest{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:9px;box-shadow:0 6px 20px rgba(0,0,0,.5);z-index:50;max-height:200px;overflow-y:auto;display:none}
.city-suggest.open{display:block}
.city-suggest-item{padding:8px 12px;cursor:pointer;font-size:12.5px;color:var(--text-1);border-bottom:1px solid var(--line)}
.city-suggest-item:last-child{border-bottom:none}
.city-suggest-item:hover,.city-suggest-item.active{background:var(--bg-panel);color:var(--text-0)}

/* Глаз скрытия личных данных */
.field-with-eye{position:relative}
.field-eye-btn{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:26px;height:26px;background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.field-eye-btn:hover{color:var(--text-1);background:var(--bg-elev);border-color:var(--line-strong)}
.field-eye-btn.hidden-from-friends{color:var(--danger);border-color:rgba(196,107,90,.3);background:rgba(196,107,90,.08)}
.field-eye-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.field-with-eye .form-input,.field-with-eye .form-textarea{padding-right:42px}
.field-eye-label{font-size:10px;color:var(--text-3);margin-top:3px;font-style:italic}
.field-eye-label.hidden{color:var(--danger)}

/* Профиль друга — полноценный */
.friend-profile-section{margin-bottom:12px}
.friend-profile-section-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:700;margin-bottom:5px}
.friend-profile-meta{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.friend-meta-item{padding:7px 11px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;font-size:12px;color:var(--text-1)}

/* ============================================ */
/* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */
/* ============================================ */

/* Стеклянное меню скрыто на десктопе */
.mobile-nav, .mobile-more-menu, .mobile-nav-overlay { display:none; }

@media (max-width:820px) {
  /* Прячем десктопный сайдбар */
  .sidebar { display:none !important; }

  /* Контент на всю ширину, отступ снизу под меню */
  .app { display:block !important; padding:0 !important; height:auto !important; }
  .main { padding:14px 12px 110px !important; height:auto !important; min-height:100vh; }

  html, body { overflow:auto !important; height:auto !important; }

  /* Заголовки страниц компактнее, onboarding под ними */
  .page-header { padding-right:0 !important; }
  .onboarding-tip { position:static !important; width:auto !important; max-width:none !important; margin-top:10px; }

  .page-title { font-size:20px !important; }
  .page-subtitle { font-size:11px !important; }

  /* Все 2-3 колоночные сетки → 1 колонка */
  .home-grid, .tracker-bottom, .notes-layout, .account-grid,
  .finance-page, .finance-stats, .finance-charts-row,
  .share-grid, .stats-overview, .donut-with-cats {
    grid-template-columns:1fr !important;
    display:flex !important; flex-direction:column !important;
    gap:12px !important; height:auto !important;
  }

  /* Карточки трекера/совместно — 1 в ряд */
  .shared-trackers-section { grid-template-columns:1fr !important; }
  .shared-tracker-card.wide { grid-column:auto !important; }
  .shared-tracker-card.tall { grid-row:auto !important; }

  /* Высоты не фиксируем на мобиле */
  .tracker-grid-card, .tracker-bottom > .card,
  .account-grid > div, .account-personal-card,
  .account-security-card, .account-avatar-card {
    height:auto !important; min-height:0 !important;
  }

  /* Финансы статы — 2 в ряд */
  .finance-stats { display:grid !important; grid-template-columns:1fr 1fr !important; }

  /* Модалки на всю ширину */
  .modal { max-width:calc(100vw - 24px) !important; width:calc(100vw - 24px) !important; max-height:88vh !important; overflow-y:auto; }

  /* Трекер-неделя скроллится по горизонтали */
  .tracker-grid-scroll { overflow-x:auto; }

  /* Граф/холст на всю высоту экрана минус меню */
  #graph-svg, .canvas-area { min-height:60vh; }

  /* Чат окно почти на весь экран */
  .chat-window { width:calc(100vw - 20px) !important; height:70vh !important; right:10px !important; bottom:90px !important; }

  /* FAB чат выше меню */
  .chat-fab { bottom:96px !important; right:14px !important; }

  /* Личные данные — поля в строку → колонкой */
  .account-field-row { flex-direction:column !important; gap:0 !important; }
  .account-field-row .account-field { flex:1 1 auto !important; }

  /* ===== СТЕКЛЯННОЕ НИЖНЕЕ МЕНЮ ===== */
  .mobile-nav {
    display:flex !important;
    position:fixed; bottom:12px; left:0; right:0;
    gap:9px; justify-content:center; align-items:center;
    padding:0 12px calc(env(safe-area-inset-bottom));
    z-index:200;
  }
  .glass-nav {
    background:rgba(26,26,26,0.62);
    backdrop-filter:blur(28px) saturate(180%);
    -webkit-backdrop-filter:blur(28px) saturate(180%);
    border:1px solid rgba(255,255,255,0.07);
    box-shadow:0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .mobile-nav-circle {
    width:58px; height:58px; flex-shrink:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--text-1); transition:all .2s;
  }
  .mobile-nav-circle:active { transform:scale(.92); }
  .mobile-nav-circle svg { width:23px; height:23px; }
  .mobile-nav-circle.active { color:var(--accent); }
  .mobile-nav-center {
    flex:1; max-width:280px; border-radius:30px;
    display:flex; align-items:center; gap:2px;
    padding:7px 8px; justify-content:space-around;
  }
  .mobile-nav-btn {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; cursor:pointer;
    color:var(--text-2); font-family:var(--sans); font-size:10px; font-weight:600;
    padding:8px 14px; border-radius:20px; flex:1;
    transition:all .25s cubic-bezier(.4,0,.2,1);
  }
  .mobile-nav-btn svg { width:22px; height:22px; }
  .mobile-nav-btn.active { color:var(--accent); background:rgba(232,201,140,0.12); }
  .mobile-nav-btn:active { transform:scale(.9); }

  /* Поповер "Ещё" */
  .mobile-nav-overlay {
    display:block; position:fixed; inset:0; background:rgba(0,0,0,0.4);
    backdrop-filter:blur(2px); z-index:199; opacity:0; pointer-events:none; transition:opacity .25s;
  }
  .mobile-nav-overlay.open { opacity:1; pointer-events:auto; }
  .mobile-more-menu {
    display:block; position:fixed; left:50%; bottom:84px;
    transform:translateX(-50%) translateY(20px) scale(.95);
    width:250px;
    background:rgba(30,30,30,0.88);
    backdrop-filter:blur(30px) saturate(180%);
    -webkit-backdrop-filter:blur(30px) saturate(180%);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:20px; padding:8px;
    box-shadow:0 12px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
    z-index:201; opacity:0; pointer-events:none; transform-origin:bottom center;
    transition:all .28s cubic-bezier(.34,1.4,.64,1);
  }
  .mobile-more-menu.open { transform:translateX(-50%) translateY(0) scale(1); opacity:1; pointer-events:auto; }
  .mobile-more-item {
    display:flex; align-items:center; gap:12px;
    padding:11px 14px; border-radius:13px;
    color:var(--text-1); font-size:14px; font-weight:600; cursor:pointer; transition:all .18s;
  }
  .mobile-more-item:active { transform:scale(.97); background:rgba(255,255,255,0.06); }
  .mobile-more-item svg { width:19px; height:19px; flex-shrink:0; }
  .mobile-more-divider { height:1px; background:rgba(255,255,255,0.08); margin:5px 10px; }
}

/* Маленькие телефоны */
@media (max-width:420px) {
  .finance-stats { grid-template-columns:1fr !important; }
  .page-title { font-size:18px !important; }
  .mobile-nav-btn { padding:8px 10px; }
}

/* ===== ЗАХОД 1: мобильные доработки ===== */
@media (max-width:820px) {
  /* Убираем чат-FAB на мобиле (мешает меню) */
  .chat-fab { display:none !important; }

  /* Год в днях — компактнее: меньше клетки, фикс высота */
  .year-grid { grid-template-columns:repeat(26,1fr) !important; gap:2px !important; }
  .year-grid-wrap { max-height:130px; }
  .year-cell { border-radius:2px !important; }
  /* Карточка года — не растягивается */
  #page-home .card:has(.year-grid) { max-height:none; }

  /* Главная — карточки компактнее */
  .home-card { min-height:0 !important; }
  .mini-tracker-row { height:auto !important; }

  /* Трекер привычек — горизонтальный скролл недели + читаемость */
  .tracker-grid { min-width:0 !important; }
  .tracker-grid-scroll { -webkit-overflow-scrolling:touch; }
  .habit-cell, .tracker-cell { min-width:32px; }
  .tracker-grid-card { padding:12px !important; }
  .habits-list { max-height:none !important; }

  /* Задачи — крупнее тач-цели */
  .task-row-home, .task-item { padding:12px !important; }
  .task-checkbox, .check { min-width:26px; min-height:26px; }

  /* Заголовки секций главной */
  .section-head, .card-head { flex-wrap:wrap; gap:6px; }
}

/* ===== Глобальный поиск ===== */
.global-search-modal{position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);z-index:300;display:none;align-items:flex-start;justify-content:center;padding:80px 16px 16px}
.global-search-modal.open{display:flex}
.global-search-box{width:100%;max-width:560px;background:var(--bg-panel);border:1px solid var(--line-strong);border-radius:16px;box-shadow:0 16px 50px rgba(0,0,0,0.6);overflow:hidden;max-height:75vh;display:flex;flex-direction:column}
.global-search-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
#global-search-input{flex:1;background:none;border:none;outline:none;color:var(--text-0);font-family:var(--sans);font-size:15px}
.global-search-close{width:28px;height:28px;border-radius:7px;background:var(--bg-elev);border:1px solid var(--line);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.global-search-close:hover{color:var(--text-0)}
.global-search-results{overflow-y:auto;padding:8px}
.global-search-hint{padding:30px 18px;text-align:center;color:var(--text-3);font-size:12.5px}
.global-search-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;cursor:pointer;transition:all .15s}
.global-search-item:hover{background:var(--bg-card-2)}
.global-search-item svg{width:18px;height:18px;color:var(--accent);flex-shrink:0}
.global-search-item-text{flex:1;min-width:0}
.global-search-item-title{font-size:13.5px;font-weight:600;color:var(--text-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.global-search-item-type{font-size:10.5px;color:var(--text-3);margin-top:2px}

/* ===== ЗАХОД 2: Заметки как Obsidian (мобайл) ===== */
.notes-mobile-sidebar-btn{display:none}

@media (max-width:820px) {
  /* Кнопка открытия списка слева */
  .notes-mobile-sidebar-btn{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;flex-shrink:0;
    background:var(--bg-elev);border:1px solid var(--line-strong);
    border-radius:10px;color:var(--text-1);cursor:pointer;
  }
  .notes-mobile-sidebar-btn svg{width:20px;height:20px}
  .notes-mobile-sidebar-btn:active{transform:scale(.92)}

  /* Список заметок — выезжающий слева сайдбар */
  .notes-layout{display:block !important;}
  .notes-list-panel{
    position:fixed;top:0;left:0;bottom:0;
    width:82%;max-width:340px;
    background:var(--bg-panel);
    border-right:1px solid var(--line-strong);
    box-shadow:6px 0 30px rgba(0,0,0,0.5);
    z-index:250;
    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    padding:16px 12px;
    overflow-y:auto;
    display:flex !important;flex-direction:column;
  }
  .notes-list-panel.open{transform:translateX(0)}

  /* Затемнение фона */
  .notes-sidebar-overlay{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);
    backdrop-filter:blur(2px);z-index:249;
  }
  .notes-sidebar-overlay.open{display:block}

  /* Редактор на всю ширину */
  .note-editor{width:100% !important;min-height:60vh;}

  /* Список заметок выше (нет фикс высоты) */
  #page-notes .notes-list{max-height:none !important;flex:1;}
}

/* ===== Трекер: шапка с кнопкой-переключателем ===== */
.tracker-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.tracker-card-title{font-size:14px;font-weight:700;color:var(--text-0)}
.tracker-view-content{display:none}
.tracker-view-content.active{display:block}

/* График сна — полноразмерный */
.sleep-fullhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.sleep-chart-wrap-full{display:flex;gap:8px;height:300px;position:relative}
.sleep-chart-wrap-full .sleep-y-axis{display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:var(--text-3);font-family:var(--mono);padding-right:4px;flex-shrink:0;width:38px;text-align:right}
.sleep-chart-wrap-full .sleep-chart{flex:1;position:relative;border-left:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.012),transparent)}

@media (max-width:820px){
  .tracker-view-switch{width:100%}
  .tracker-view-btn{flex:1;justify-content:center;padding:9px 8px;font-size:12px}
  .sleep-chart-wrap-full{height:240px}
  .stats-overview{display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important}
}
@media (max-width:420px){
  .stats-overview{grid-template-columns:1fr 1fr !important}
  .tracker-view-btn span,.tracker-view-btn{font-size:11px}
}

/* ===== Заметки: скрепка + стрелка на одной линии ===== */
.note-toolbar-leftbtns{display:flex;align-items:center;gap:7px}
.note-attach-icon-btn{width:28px;height:28px;border-radius:6px;background:var(--bg-card-2);border:1px solid var(--line-strong);color:var(--text-1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s;flex-shrink:0}
.note-attach-icon-btn:hover{background:var(--bg-elev);color:var(--text-0)}
.note-attach-icon-btn svg{width:15px;height:15px}
/* Тулбар: левые кнопки слева, контент-форматирование разворачивается вправо */
.note-editor-toolbar{display:flex;align-items:center;gap:8px}
.note-editor-toolbar .note-toolbar-content{display:flex;align-items:center;gap:4px;flex-wrap:wrap;overflow:hidden;transition:max-width .3s,opacity .25s;flex:1}
.note-editor-toolbar.collapsed .note-toolbar-content{max-width:0;opacity:0;pointer-events:none}
.note-editor-toolbar:not(.collapsed) .note-toolbar-content{max-width:1000px;opacity:1}

/* Превью-кнопка в углу — иконка крупнее и заметнее */
.note-preview-toggle{width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center}
.note-preview-toggle svg{width:17px;height:17px}

/* Убираем золотые вспышки/свечения с кнопок */
.nav-btn.active svg,.mobile-nav-btn.active svg{filter:none !important}
.nav-btn.active::before,.mobile-nav-btn.active::before{display:none !important}

/* ===== Полная мобильная защита от выхода за рамки ===== */
@media (max-width:820px){
  /* Ничего не вылезает по горизонтали */
  html,body{overflow-x:hidden !important;max-width:100vw}
  *{max-width:100%}
  .main,.page,.tracker-page,.notes-page,.finance-page,.home-grid{max-width:100% !important;overflow-x:hidden}
  img,canvas,svg,video{max-width:100%;height:auto}

  /* Таблицы/сетки с прокруткой вместо вылезания */
  .tracker-grid-scroll{overflow-x:auto;max-width:100%}

  /* Модалки точно в экране */
  .modal{margin:0 auto}
  .modal-overlay{padding:12px}

  /* Длинные слова переносим */
  .note-title-input,.task-title,.card-title,.page-title,.bottom-card-title{word-break:break-word;overflow-wrap:break-word}

  /* Трекер шапка не ломается */
  .tracker-card-head{flex-wrap:nowrap;gap:8px}
  .tracker-card-title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Графики финансов влезают */
  .finance-chart,.donut-chart,.finance-charts-row canvas{max-width:100% !important}

  /* Кнопки в шапках страниц не вылезают */
  .page-header{flex-wrap:wrap;gap:10px}
  .btn-add-big{font-size:13px;padding:9px 14px}

  /* Совместные карточки */
  .shared-tracker-card{max-width:100%;overflow:hidden}

  /* График сна влезает аккуратно */
  .sleep-chart-wrap-full{height:220px}
  .sleep-fullhead{flex-wrap:wrap}
}

/* Убираем золотые вспышки везде (drop-shadow свечение на активных иконках) */
.nav-btn.active svg,.mobile-nav-btn.active svg,
.mobile-nav-circle.active svg{filter:none !important}

/* ============================================ */
/* ===== ПОЛНАЯ МОБИЛЬНАЯ АДАПТАЦИЯ (≤820px) ===== */
/* Только телефон. Десктоп не затрагивается.    */
/* ============================================ */
@media (max-width:820px){

  /* ---- ГЛАВНАЯ: год в днях ---- */
  .year-grid{grid-template-columns:repeat(20,1fr) !important;gap:2.5px !important}
  .year-cell{border-radius:2px !important;border-width:1px}
  .year-grid-wrap{padding:0 !important;max-height:150px}
  /* Карточка года компактнее */
  #page-home .year-card,#page-home .card{padding:14px !important}

  /* ---- ГЛАВНАЯ: мини-трекер недели ---- */
  .mini-tracker-headrow,.mini-tracker-row{
    grid-template-columns:90px repeat(7,1fr) !important;
    gap:3px !important;
  }
  .mini-tracker-row{height:38px !important}
  .mini-tracker-habit-name{font-size:11px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mini-tracker-headrow .day-label{font-size:9px !important}
  .mini-cell{min-width:0 !important}

  /* ---- ТРЕКЕР: верхняя панель ---- */
  .tracker-top-bar{flex-direction:column;gap:10px;align-items:stretch !important;padding:12px !important}
  .tracker-top-left{justify-content:center}
  .tracker-top-right{justify-content:center}
  .tracker-month-label{font-size:14px}

  /* ---- ТРЕКЕР: большое окно с горизонтальным скроллом ---- */
  .tracker-grid-card{height:auto !important;min-height:300px;padding:12px !important}
  .tracker-grid-scroll{overflow-x:auto !important;overflow-y:visible !important;-webkit-overflow-scrolling:touch;width:100%}
  .tracker-grid{min-width:640px !important}  /* скроллится по горизонтали */

  /* ---- ТРЕКЕР: аналитика 2x2 ---- */
  .tracker-bottom{gap:12px !important}
  .stats-overview{grid-template-columns:1fr 1fr !important;gap:9px !important}
  .stats-big-tile{padding:11px !important}
  .stats-tile-value{font-size:19px !important}
  .bottom-card{padding:14px !important}
  .habits-list{max-height:none !important}

  /* ---- ФИНАНСЫ: всё в колонку, статы 2х2 ---- */
  .finance-header-bar{flex-direction:column;gap:10px;align-items:stretch !important}
  .finance-month-pill{justify-content:center}
  .finance-stats{grid-template-columns:1fr 1fr !important;gap:8px !important}
  .finance-stat{padding:10px !important}
  .finance-stat-value{font-size:16px !important}
  .finance-charts-row{grid-template-columns:1fr !important;gap:12px !important;height:auto !important}
  .finance-chart-card{height:auto !important;min-height:240px}
  .donut-with-cats{flex-direction:column !important;align-items:center}
  .finance-bottom-row{grid-template-columns:1fr !important;gap:12px !important}
  .finance-transactions{max-height:none !important}
  /* Операции компактнее */
  .transaction-row{padding:10px !important}
  .transaction-amount{font-size:14px !important}

  /* ---- ЗАДАЧИ ---- */
  .tasks-board{grid-template-columns:1fr !important;gap:12px !important}
  .task-column{min-height:0 !important}
  .tasks-filters{flex-wrap:wrap;gap:6px}
  .task-filter-pill{font-size:12px;padding:6px 12px}

  /* ---- ЗАМЕТКИ: редактор ---- */
  .note-editor{padding:14px !important}
  .note-title-input{font-size:18px !important}

  /* ---- СОВМЕСТНО ---- */
  .share-grid,.shared-trackers-section{grid-template-columns:1fr !important;gap:12px !important}
  .shared-tracker-card{padding:14px !important}

  /* ---- ХОЛСТ / ГРАФ (базово, полный фуллскрин позже) ---- */
  .canvas-area,#graph-svg{min-height:65vh}
  .graph-controls{flex-wrap:wrap;gap:6px}

  /* ---- ЛИЧНЫЙ КАБИНЕТ ---- */
  .account-grid{gap:12px !important}
  .account-avatar-card,.account-personal-card,.account-security-card{padding:14px !important}

  /* ---- Общие карточки компактнее ---- */
  .card{padding:14px}
  .page-title{font-size:19px !important}
  .page-subtitle{font-size:11px !important}
}

@media (max-width:430px){
  .year-grid{grid-template-columns:repeat(18,1fr) !important}
  .finance-stats{grid-template-columns:1fr 1fr !important}
  .stats-overview{grid-template-columns:1fr 1fr !important}
  .mini-tracker-headrow,.mini-tracker-row{grid-template-columns:74px repeat(7,1fr) !important}
}

/* ============================================ */
/* ===== ХОЛСТ / ГРАФ / ЗАМЕТКИ фуллскрин (≤820px) ===== */
.canvas-mobile-add{display:none}
@media (max-width:820px){
  /* ---- ХОЛСТ: фуллскрин ---- */
  #page-canvas .canvas-top-bar{
    position:fixed;top:0;left:0;bottom:0;width:78%;max-width:300px;
    background:var(--bg-panel);border-right:1px solid var(--line-strong);
    box-shadow:6px 0 30px rgba(0,0,0,.5);z-index:250;
    transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    flex-direction:column;gap:12px;padding:18px 14px;overflow-y:auto;align-items:stretch;
  }
  #page-canvas .canvas-top-bar.open{transform:translateX(0)}
  #page-canvas .canvas-toolbar{flex-direction:column;gap:8px}
  #page-canvas .canvas-toolbar button{width:100%;justify-content:center}
  #canvas-sidebar-overlay.open{display:block}
  .canvas-page{padding:0 !important;height:calc(100vh - 150px);position:relative}
  .canvas-area{position:relative;min-height:calc(100vh - 150px) !important;border-radius:12px}
  /* Тёмная аккуратная кнопка + в правом верхнем углу */
  .canvas-mobile-add{
    display:flex;align-items:center;justify-content:center;
    position:absolute;right:12px;top:12px;width:42px;height:42px;border-radius:12px;
    background:rgba(38,38,38,0.9);color:var(--text-0);border:1px solid var(--line-strong);cursor:pointer;z-index:20;
    backdrop-filter:blur(10px);
  }
  .canvas-mobile-add svg{width:20px;height:20px}

  /* ---- ГРАФ: фуллскрин, контролы во всю ширину сверху ---- */
  #page-graph .graph-page{padding:0 !important;height:calc(100vh - 150px);position:relative;display:flex;flex-direction:column}
  #page-graph .graph-controls{
    position:relative;z-index:15;width:100%;
    display:flex;flex-wrap:wrap;gap:6px;align-items:center;
    background:transparent;border:none;padding:0 0 10px;margin:0;
  }
  #page-graph .graph-control-label{display:none}
  #page-graph .graph-toggles{display:flex;width:100%;gap:5px}
  #page-graph .graph-toggle{flex:1;padding:9px 4px;font-size:11px;text-align:center;border-radius:9px}
  #page-graph .graph-stats{display:none}
  #page-graph .graph-area{flex:1;position:relative;min-height:0 !important;border-radius:12px;width:100%}
  #page-graph #graph-svg{width:100%;height:100%}
  #page-graph .graph-legend{display:none}

  /* ---- ЗАМЕТКИ: редактор на всю менюшку ---- */
  #page-notes .note-editor{min-height:calc(100vh - 180px)}
  /* Скрепка + стрелка над кнопкой тега — уже на одной линии (note-toolbar-leftbtns) */
  .note-editor-toolbar{margin:8px 0}
}

/* ===== ФИНАНСЫ мобильная реорганизация (≤820px) ===== */
@media (max-width:820px){
  /* Убираем выбор месяца */
  .finance-month-pill{display:none !important}

  .finance-page{display:flex !important;flex-direction:column;gap:12px}
  /* Статы: баланс полная ширина сверху, остальные в ряд */
  .finance-stats{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important}
  .finance-stat:first-child{grid-column:1 / -1}  /* Баланс на всю ширину */

  /* Карточки доход/расход/план — в колонку */
  .finance-charts-row{display:flex !important;flex-direction:column;gap:12px !important}
  .finance-chart-card{min-height:200px}
  /* Порядок: операции выше плана-факта */
  .finance-feed-card{order:-1}

  /* Операции: компактнее, скролл */
  .finance-feed-list{max-height:260px;overflow-y:auto}
  .finance-feed-header{flex-wrap:wrap;gap:8px}
  .finance-feed-filters{flex:1}

  /* План-факт и долги ниже */
  #middle-finance-card{order:2}
}

/* Холст: кнопки Холст/Карточка слева снизу */
.canvas-mobile-btns{display:none}
@media (max-width:820px){
  .canvas-mobile-btns{
    display:flex;gap:8px;position:absolute;left:12px;bottom:12px;z-index:20;
  }
  .canvas-mobile-btns button{
    display:flex;align-items:center;gap:6px;
    padding:9px 14px;border-radius:11px;
    background:rgba(38,38,38,0.92);color:var(--text-0);
    border:1px solid var(--line-strong);cursor:pointer;
    font-family:var(--sans);font-size:12.5px;font-weight:600;
    backdrop-filter:blur(10px);
  }
  .canvas-mobile-btns button svg{width:15px;height:15px}
  .canvas-mobile-btns button:active{transform:scale(.95)}
}

/* ============================================ */
/* ===== ФИНАЛ: ГРАФ + ХОЛСТ ВО ВЕСЬ ЭКРАН ===== */
/* (приоритетный блок, переопределяет всё выше) */
@media (max-width:820px){
  /* Страница graph/canvas — без паддингов, на весь main */
  body .main #page-graph,
  body .main #page-canvas{padding:0 !important}

  /* Прячем заголовки страниц (Граф связей / Холст) сверху — место для фуллскрина */
  body #page-graph > .page-header{display:none !important}

  /* ГРАФ: контролы тонкой строкой сверху, малозаметные */
  body #page-graph .graph-page{padding:0 !important;height:calc(100vh - 90px) !important;display:flex;flex-direction:column;gap:0;position:relative;overflow:hidden}
  body #page-graph .graph-controls{position:absolute;top:6px;left:6px;right:6px;z-index:20;background:transparent !important;border:none !important;padding:0 !important;margin:0 !important;display:flex;gap:5px}
  body #page-graph .graph-control-label{display:none !important}
  body #page-graph .graph-stats{display:none !important}
  body #page-graph .graph-toggles{display:flex;gap:5px;width:100%}
  body #page-graph .graph-toggle{flex:1;padding:6px 3px;font-size:10px;border-radius:8px;opacity:.45;background:rgba(38,38,38,.5);border:1px solid rgba(255,255,255,.05);color:var(--text-2)}
  body #page-graph .graph-toggle.active{opacity:.8;color:var(--text-1)}
  /* Само окно графа — на весь экран до краёв */
  body #page-graph .graph-area{flex:1 !important;position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;min-height:0 !important;border:none !important;border-radius:0 !important;background:var(--bg-page) !important}
  body #page-graph #graph-svg{width:100% !important;height:100% !important}
  body #page-graph .graph-legend{display:none !important}

  /* ХОЛСТ: на весь экран до краёв */
  body #page-canvas .canvas-page{padding:0 !important;height:calc(100vh - 90px) !important;position:relative;overflow:hidden}
  body #page-canvas .canvas-area{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;min-height:0 !important;border:none !important;border-radius:0 !important}
  /* Кнопки Холст/Карточка убраны с полотна (они в левой панели) */
  body #page-canvas .canvas-mobile-btns{display:none !important}
  body #page-canvas .canvas-mobile-add{display:none !important}
}

/* ============================================ */
/* ===== ФИНАЛ ФИНАНСЫ под телефон (≤820px) ===== */
@media (max-width:820px){
  body #page-finance .finance-page{display:flex !important;flex-direction:column;gap:12px}
  /* Убираем верхние 4 плитки (баланс/доход/расход/долги) */
  body #page-finance .finance-stats{display:none !important}
  /* Месяц убран (свайп) */
  body #page-finance .finance-month-pill{display:none !important}

  /* Порядок: 1) доходы+расходы карточки  2) план-факт/долги  3) операции */
  body #page-finance .finance-charts-row{display:flex !important;flex-direction:column;gap:12px !important;height:auto !important;order:1}
  /* Доход и Расход — рядом в строку как два «круга»-блока */
  body #page-finance .finance-charts-row{flex-direction:row !important;flex-wrap:wrap}
  body #page-finance .finance-chart-card{flex:1 1 45%;min-width:0;min-height:0;height:auto !important}
  /* План-факт/долги — на всю ширину, под кругами */
  body #page-finance #middle-finance-card{flex:1 1 100% !important;order:2}
  /* Доход слева, расход справа, средний (план-факт) переносится вниз */
  body #page-finance .finance-charts-row > .finance-chart-card:nth-child(1){order:0}
  body #page-finance .finance-charts-row > .finance-chart-card:nth-child(3){order:1}

  /* Все операции — последним окном */
  body #page-finance .finance-feed-card{order:3;margin-top:0}
  body #page-finance .finance-feed-list{max-height:300px;overflow-y:auto}
  body #page-finance .finance-feed-header{flex-wrap:wrap;gap:8px}
}

/* ===== Финансы: окно кругов (мобильное) ===== */
.finance-circles-card{display:none}
.add-btn-round{width:32px;height:32px;border-radius:9px;background:var(--bg-elev);border:1px solid var(--line-strong);color:var(--text-1);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.add-btn-round:active{transform:scale(.92)}

/* Поповер категорий */
.cat-pop-item{display:flex;align-items:center;gap:11px;padding:12px;border-radius:11px;background:var(--bg-card-2);margin-bottom:8px;cursor:pointer}
.cat-pop-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.cat-pop-name{flex:1;font-size:14px;font-weight:600;color:var(--text-0)}
.cat-pop-amount{font-size:13px;font-family:var(--mono);color:var(--text-2)}
.cat-pop-edit{font-size:13px;color:var(--text-3)}
.cat-pop-add{text-align:center;padding:12px;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer;border:1px dashed rgba(232,201,140,.3);border-radius:11px;margin-top:4px}

@media (max-width:820px){
  /* Показываем окно кругов */
  body #page-finance .finance-circles-card{display:block !important;background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:16px;order:0}
  .finance-circles-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
  .finance-circles-row{display:flex;justify-content:space-around;gap:16px}
  .finance-circle{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;flex:1}
  .finance-circle-ring{width:115px;height:115px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .2s}
  .finance-circle:active .finance-circle-ring{transform:scale(.95)}
  .finance-circle-ring.income{background:radial-gradient(circle,rgba(143,168,118,.15),transparent 70%);border:2.5px solid var(--income,#8fa876)}
  .finance-circle-ring.expense{background:radial-gradient(circle,rgba(196,107,90,.15),transparent 70%);border:2.5px solid var(--expense,#c46b5a)}
  .finance-circle-label{font-size:10px;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
  .finance-circle-amount{font-size:18px;font-weight:800;font-family:var(--mono);margin-top:3px}
  .finance-circle-amount.income{color:var(--income,#8fa876)}
  .finance-circle-amount.expense{color:var(--expense,#c46b5a)}
  .finance-circle-tap{font-size:9px;color:var(--text-3)}

  /* Скрываем десктопные карточки доход/расход на мобиле (есть круги) */
  body #page-finance .finance-charts-row > .finance-chart-card:nth-child(1),
  body #page-finance .finance-charts-row > .finance-chart-card:nth-child(3){display:none !important}

  /* План-факт: на всю ширину, фикс высота под ~4 пункта, закреплён */
  body #page-finance #middle-finance-card{display:block !important;order:1;flex:none !important;width:100% !important;min-height:230px}
  body #page-finance #middle-finance-card .finance-chart-body{min-height:150px}

  /* Все операции — последним */
  body #page-finance .finance-feed-card{order:2}
}

/* ===== Переключатель типа категории (доход/расход) ===== */
.cat-type-switch{display:flex;gap:8px}
.cat-type-btn{flex:1;padding:11px;border-radius:11px;border:1.5px solid var(--line-strong);background:var(--bg-card-2);color:var(--text-2);font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;transition:all .18s}
.cat-type-btn.income.active{border-color:var(--income,#8fa876);background:rgba(143,168,118,.12);color:var(--income,#8fa876)}
.cat-type-btn.expense.active{border-color:var(--expense,#c46b5a);background:rgba(196,107,90,.12);color:var(--expense,#c46b5a)}

/* Круги — глубже, объёмнее */
@media (max-width:820px){
  .finance-circle-name{font-size:13px;font-weight:600;color:var(--text-1)}
  .finance-circle-cur{font-size:10px;color:var(--text-3);margin-top:-2px}
  .finance-circle-ring{box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 16px rgba(0,0,0,.3)}
  .finance-circle-ring.income{background:radial-gradient(circle at 50% 38%,rgba(143,168,118,.22),rgba(143,168,118,.04) 72%)}
  .finance-circle-ring.expense{background:radial-gradient(circle at 50% 38%,rgba(196,107,90,.22),rgba(196,107,90,.04) 72%)}

  /* План-факт: ровно ~4 пункта, дальше скролл */
  body #page-finance #middle-finance-card .finance-chart-body,
  body #page-finance #plan-fact-tab-body{max-height:200px;overflow-y:auto}
  body #page-finance #debts-tab-body{max-height:200px;overflow-y:auto}

  /* Все операции: ~6 пунктов, дальше скролл */
  body #page-finance .finance-feed-list{max-height:330px;overflow-y:auto}

  /* Поповеры выбора (категория в операции/плане) не вылезают за экран */
  .modal-overlay .modal{max-width:calc(100vw - 24px) !important;max-height:86vh;overflow-y:auto}
  select.form-input,select.form-select{max-width:100%}
}

/* Убираем золото из cat-pop-add (если где-то осталось) */
.cat-pop-add{display:none}

/* ===== Финансы: пончики в кругах + баланс-бар ===== */
@media (max-width:820px){
  .finance-donut-holder{width:120px;height:120px}
  .finance-donut-holder .donut-wrap{width:120px;height:120px;position:relative;display:flex;align-items:center;justify-content:center}
  .finance-donut-holder .donut-center{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .finance-donut-holder .donut-center .total{font-size:15px;font-weight:800;font-family:var(--mono);color:var(--text-0);line-height:1}
  .finance-donut-holder .donut-center .label{font-size:10px;color:var(--text-3);margin-top:2px}
  .finance-circle-name{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-1);margin-top:4px}
  .fc-dot{width:9px;height:9px;border-radius:50%}
  .fc-dot.income{background:var(--income,#8fa876)}
  .fc-dot.expense{background:var(--expense,#c46b5a)}

  /* Узкое заметное окно баланса под кругами */
  .finance-balance-bar{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:11px 16px;background:var(--bg-card-2);border:1px solid var(--line-strong);border-radius:12px}
  .finance-balance-label{font-size:12px;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
  .finance-balance-value{font-size:18px;font-weight:800;font-family:var(--mono)}
  .finance-balance-value.pos{color:var(--income,#8fa876)}
  .finance-balance-value.neg{color:var(--expense,#c46b5a)}

  /* План-факт: ровно 3 пункта, 4-й скрыт за скроллом */
  body #page-finance #plan-fact-tab-body,
  body #page-finance #debts-tab-body{max-height:198px !important;overflow-y:auto}
  /* Все операции: ~6 пунктов */
  body #page-finance .finance-feed-list{max-height:330px;overflow-y:auto}

  /* Кнопка + в окне доходов = как в операциях (одинаковые) */
  .add-btn-round{width:30px;height:30px;border-radius:8px;background:var(--bg-elev);border:1px solid var(--line-strong);color:var(--text-1);font-size:17px}
}

/* ===== Заметки: окно ниже, скролл текста внутри ===== */
@media (max-width:820px){
  /* Окно заметки растянуто почти до нижнего меню */
  #page-notes .note-editor{
    height:calc(100vh - 150px) !important;min-height:0 !important;
    display:flex;flex-direction:column;overflow:hidden;
  }
  /* Контент-область заметки скроллится ВНУТРИ, окно не растёт */
  #page-notes .note-editor-live,
  #page-notes .note-preview-rendered{
    flex:1;min-height:0;overflow-y:auto;
  }
  #page-notes .note-content-overlay{min-height:100%}
  /* Нижние элементы (тулбар, тег, привязка) не сжимаются */
  #page-notes .note-editor-toolbar,
  #page-notes .note-field-row,
  #page-notes .note-photos,
  #page-notes .note-divider{flex-shrink:0}

  /* ===== Задачи: фильтры в одну строку ===== */
  #page-tasks .task-filters{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  #page-tasks .filter-chip{flex-shrink:0;font-size:12px;padding:7px 12px;white-space:nowrap}

  /* Список задач: название вписывается, компактнее */
  #page-tasks .task-row,#page-tasks .task-item{padding:11px 12px !important}
  #page-tasks .task-name,#page-tasks .task-title{white-space:normal;overflow:visible;word-break:break-word;font-size:13.5px}
  /* Окно списка задач растянуто */
  #page-tasks .tasks-table-card{min-height:calc(100vh - 240px)}
  #page-tasks .tasks-list-scroll{max-height:calc(100vh - 300px);overflow-y:auto}
}

/* ============================================================ */
/* ===== ФИНАЛЬНАЯ МОБИЛЬНАЯ ПОЛИРОВКА (Obsidian/Notion стиль) ===== */
/* Чистый системный блок. Десктоп не затрагивается.            */
/* ============================================================ */
@media (max-width:820px){
  /* Onboarding-плашки убраны полностью */
  .onboarding-tip{display:none !important}

  /* ---- ЗАДАЧИ: чистый список как Notion ---- */
  #page-tasks .tasks-table-card{padding:12px !important;min-height:0 !important;border-radius:14px}
  #page-tasks .task-row-home{max-height:none !important;margin-bottom:8px}
  #page-tasks .task-row-main{padding:12px 14px;align-items:flex-start}
  #page-tasks .task-row-name{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;font-size:14px;line-height:1.3}
  #page-tasks .task-row-desc{white-space:normal !important;overflow:visible !important;font-size:11.5px;margin-top:2px}
  /* Фильтры — горизонтальная лента */
  #page-tasks .task-filters{display:flex !important;flex-wrap:nowrap;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;margin-bottom:10px;-ms-overflow-style:none;scrollbar-width:none}
  #page-tasks .task-filters::-webkit-scrollbar{display:none}
  #page-tasks .filter-chip{flex-shrink:0;font-size:12px;padding:7px 13px;white-space:nowrap;border-radius:9px}
  /* Колонки задач в один столбец */
  #page-tasks .tasks-board,#page-tasks .tasks-columns{display:flex !important;flex-direction:column;gap:12px !important}

  /* ---- ЗАМЕТКИ: редактор как Obsidian (фикс высота, скролл внутри) ---- */
  #page-notes .note-editor{height:calc(100vh - 150px) !important;display:flex;flex-direction:column;overflow:hidden;padding:14px !important}
  #page-notes .note-editor-live,#page-notes .note-preview-rendered{flex:1;min-height:0;overflow-y:auto}
  #page-notes .note-title-row{flex-shrink:0}
  #page-notes .note-editor-toolbar,#page-notes .note-field-row,#page-notes .note-photos,#page-notes .note-divider,#page-notes .note-tag-suggest{flex-shrink:0}
  #page-notes .note-title-input{font-size:18px;font-weight:700}
  /* Превью-кнопка аккуратная */
  #page-notes .note-preview-toggle{width:34px;height:34px;flex-shrink:0}

  /* ---- ОБЩЕЕ: чистота, тач-цели ---- */
  .modal{max-width:calc(100vw - 24px) !important;max-height:88vh;overflow-y:auto;border-radius:16px}
  .modal-overlay{padding:12px}
  button,.btn,.filter-chip,.nav-item{min-height:38px}
  /* Убираем горизонтальный вылет везде */
  .page{overflow-x:hidden}
  /* Карточки чуть мягче */
  .card,.bottom-card,.tasks-table-card{border-radius:14px}
}

/* ============ МОБИЛЬНАЯ ГЛАВНАЯ ============ */
#mobile-home{display:none}
@media (max-width:820px){
  #mobile-home{display:block}
  #page-home .home-grid{display:none !important}
  #page-home .welcome-block{margin-bottom:14px}

  .mh-sec{margin-bottom:14px}
  .mh-h{font-size:12.5px;font-weight:700;margin-bottom:9px;display:flex;justify-content:space-between;align-items:center;color:var(--text-1)}
  /* Тёмная стрелка-кнопка */
  .mh-arrow{width:26px;height:26px;border-radius:8px;background:var(--bg-elev);border:1px solid var(--line-strong);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .mh-arrow:active{transform:scale(.9)}
  .mh-arrow svg{width:13px;height:13px}
  .mh-empty{font-size:12px;color:var(--text-3);padding:10px;text-align:center}

  /* Заметки — скролл + закрепление */
  .mh-notes-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .mh-notes-strip::-webkit-scrollbar{display:none}
  .mh-note{position:relative;flex:0 0 145px;height:115px;background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:12px;cursor:pointer;display:flex;flex-direction:column}
  .mh-note.pinned{border-color:var(--line-strong);background:var(--bg-card-2)}
  .mh-note:active{transform:scale(.97)}
  .mh-note-title{font-size:13px;font-weight:700;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}
  .mh-note-text{font-size:11px;color:var(--text-2);line-height:1.4;overflow:hidden;flex:1}
  .mh-note-tag{font-size:9px;color:var(--text-3);margin-top:5px}
  .mh-note-pin{position:absolute;top:8px;right:8px;width:22px;height:22px;border:none;background:none;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
  .mh-note-pin svg{width:13px;height:13px}
  .mh-note-pin.on{color:var(--text-1)}

  /* Средний ряд: трекер шире, финансы уже */
  .mh-midrow{display:grid;grid-template-columns:1.25fr 1fr;gap:10px}
  .mh-panel{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:13px}
  .mh-habits-scroll{max-height:200px;overflow-y:auto;scrollbar-width:none}
  .mh-habits-scroll::-webkit-scrollbar{display:none}
  .mh-habit-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
  .mh-habit-row:last-child{border:none}
  .mh-habit-name{font-size:12px;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Квадратик трекера с лёгкой подсветкой даже не нажатый */
  .mh-habit-box{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line-strong);background:var(--bg-elev);flex-shrink:0;cursor:pointer;transition:all .15s;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
  .mh-habit-box:active{transform:scale(.88)}
  .mh-habit-box.done{box-shadow:0 0 10px -2px currentColor}

  /* Финансы — рамки зелёный/красный + подсветка */
  .mh-fin{border-radius:12px;padding:11px;text-align:center;margin-bottom:7px}
  .mh-fin.income{border:1.5px solid var(--income,#8fa876);box-shadow:0 0 14px -6px var(--income,#8fa876);background:rgba(143,168,118,.06)}
  .mh-fin.expense{border:1.5px solid var(--expense,#c46b5a);box-shadow:0 0 14px -6px var(--expense,#c46b5a);background:rgba(196,107,90,.06)}
  .mh-fin-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);font-weight:600}
  .mh-fin-val{font-size:15px;font-weight:800;font-family:var(--mono);margin-top:2px;color:var(--text-0)}
  .mh-fin-val.income{color:var(--income,#8fa876)}
  .mh-fin-val.expense{color:var(--expense,#c46b5a)}
  .mh-fin-val.pos{color:var(--income,#8fa876)}
  .mh-fin-val.neg{color:var(--expense,#c46b5a)}
  .mh-fin-total{background:var(--bg-card-2);border:1px solid var(--line-strong);border-radius:10px;padding:8px;text-align:center;margin-bottom:7px}

  /* Календари */
  .mh-cal-row{display:flex;align-items:stretch;gap:8px}
  .mh-cal{flex:1;background:var(--bg-card);border:1px solid var(--line);border-radius:12px;padding:9px 7px;cursor:pointer}
  /* Центральный месяц — с подсветкой */
  .mh-cal.current{flex:1.35;border:1.5px solid var(--line-strong);background:var(--bg-card-2);box-shadow:0 0 16px -6px rgba(255,255,255,.15)}
  .mh-cal.side{opacity:.55}
  .mh-cal-title{font-size:10px;font-weight:700;text-align:center;margin-bottom:6px;color:var(--text-2)}
  .mh-cal.current .mh-cal-title{color:var(--text-0)}
  .mh-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
  .mh-cal-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:7.5px;color:var(--text-3);border-radius:2px}
  .mh-cal.current .mh-cal-cell{font-size:9px;border-radius:3px}
  .mh-cal-cell.empty{visibility:hidden}
  /* Прошедшие и сегодня — белые квадратики */
  .mh-cal-cell.past{background:rgba(245,245,245,.22);color:var(--text-1)}
  .mh-cal-cell.today{background:var(--text-0);color:#000;font-weight:700}

  /* Линия прогресса года */
  .mh-year{margin-top:10px}
  .mh-year-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--text-3);margin-bottom:5px}
  .mh-year-bar{height:5px;background:var(--bg-elev);border-radius:3px;overflow:hidden}
  .mh-year-fill{height:100%;background:var(--text-1);border-radius:3px}

  /* Задачи — цветные, скролл */
  .mh-tasks-scroll{max-height:230px;overflow-y:auto;scrollbar-width:none}
  .mh-tasks-scroll::-webkit-scrollbar{display:none}
  .mh-task{background:var(--bg-card);border:1px solid var(--line);border-left:3px solid var(--text-3);border-radius:10px;margin-bottom:6px;cursor:pointer;overflow:hidden}
  .mh-task-head{padding:12px 14px;display:flex;align-items:center;gap:11px}
  .mh-task-head:active{transform:scale(.99)}
  .mh-task.pinned{background:var(--bg-card-2)}
  .mh-task.expanded{background:var(--bg-card-2)}
  .mh-task-check{width:21px;height:21px;border-radius:6px;border:1.5px solid var(--line-strong);flex-shrink:0;background:var(--bg-elev)}
  .mh-task-name{font-size:14px;font-weight:600;flex:1}
  .mh-task-badge{font-size:10px;font-weight:700;color:var(--text-2);background:var(--bg-elev);border-radius:6px;padding:2px 6px;flex-shrink:0}
  .mh-task-pin{width:24px;height:24px;min-height:0;border:none;background:none;color:var(--text-3);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}
  .mh-task-pin svg{width:14px;height:14px}
  .mh-task-pin.on{color:var(--text-1)}
  .mh-task-exp{padding:2px 14px 13px;border-top:1px solid var(--line)}
  .mh-task-exp-label{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);font-weight:700;margin:11px 0 5px}
  .mh-sub-count{color:var(--text-2);margin-left:4px}
  .mh-task-desc{font-size:14px;color:var(--text-0);line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
  .mh-task-subs{display:flex;flex-direction:column;gap:7px;max-height:165px;overflow-y:auto;scrollbar-width:none}
  .mh-task-subs::-webkit-scrollbar{display:none}
  .mh-task-sub{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-1)}
  .mh-task-sub-check{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-strong);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--bg-page);background:var(--bg-elev)}
  .mh-task-sub-check svg{width:12px;height:12px}
  .mh-task-sub.done .mh-task-sub-check{background:var(--success);border-color:var(--success)}
  .mh-task-sub.done .mh-task-sub-text{text-decoration:line-through;color:var(--text-3)}
  .mh-task-sub-text{flex:1}
  .mh-task-exp-empty{font-size:12.5px;color:var(--text-3);padding:4px 0}
  .mh-task-open{margin:12px 0 0 auto;width:fit-content;padding:6px 14px;border-radius:7px;background:var(--bg-elev);border:1px solid var(--line-strong);color:var(--text-1);font-family:var(--sans);font-size:11px;font-weight:600;cursor:pointer;display:block}
  .mh-task-open:active{transform:scale(.97)}
}

/* ===== ФИНАЛ: правки главной + меню ===== */
@media (max-width:820px){
  /* Подзаголовок убран, окна выше */
  #page-home .welcome-sub{display:none}
  #page-home .welcome-block{margin-bottom:10px}
  #page-home .welcome-title{font-size:20px}

  /* Стрелки — мелкие незаметные */
  .mh-arrow{width:20px;height:20px;border-radius:6px;background:transparent;border:none;color:var(--text-3);opacity:.6}
  .mh-arrow svg{width:12px;height:12px}
  .mh-arrow:hover{opacity:1}

  /* Финансы — только светящиеся рамки, без фона */
  .mh-fin.income{border:1.5px solid var(--income,#8fa876);box-shadow:0 0 16px -5px var(--income,#8fa876);background:transparent !important}
  .mh-fin.expense{border:1.5px solid var(--expense,#c46b5a);box-shadow:0 0 16px -5px var(--expense,#c46b5a);background:transparent !important}

  /* Трекер квадрат — яркая БЕЛАЯ подсветка (как на десктопе) */
  .mh-habit-box{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line-strong);background:var(--bg-elev);box-shadow:inset 0 0 6px -2px rgba(255,255,255,.1)}
  .mh-habit-box.done{background:var(--text-0) !important;border-color:var(--text-0) !important;box-shadow:0 0 12px 0 rgba(245,245,245,.6) !important}

  /* Календарь — белые светящиеся квадраты, даты заметнее */
  .mh-cal-cell{font-size:8.5px;color:var(--text-2)}
  .mh-cal.current .mh-cal-cell{font-size:9.5px;color:var(--text-1)}
  .mh-cal-cell.past{background:rgba(245,245,245,.28);color:var(--text-0)}
  .mh-cal-cell.today{background:var(--text-0);color:#000;font-weight:700;box-shadow:0 0 10px 0 rgba(245,245,245,.55)}

  /* Год — ярче текст + светящаяся полоска */
  .mh-year-labels{color:var(--text-1);font-weight:600}
  .mh-year-fill{background:var(--text-0);box-shadow:0 0 10px 0 rgba(245,245,245,.5)}

  /* Задача завершается: галка + плавный уход */
  .mh-task-check.checked{background:var(--text-0);border-color:var(--text-0);box-shadow:0 0 10px 0 rgba(245,245,245,.5)}
  .mh-task.completing{opacity:.6}
  .mh-task.fading{opacity:0;transform:translateX(30px);max-height:0;margin:0;padding:0;border-width:0;transition:all .55s ease;overflow:hidden}

  /* Убрать золото из нижнего меню (активная вкладка) */
  .mobile-nav-btn.active,.mobile-nav-circle.active{color:var(--text-0) !important;background:rgba(255,255,255,.07) !important}
  .mobile-nav-btn.active svg,.mobile-nav-circle.active svg{filter:none !important}
}

/* ===== Мелочи главной (финал-2) ===== */
@media (max-width:820px){
  /* Календарь: прошедшие — яркий белый фон, тёмные цифры; будущие — светлее */
  .mh-cal-cell.past{background:rgba(245,245,245,.92) !important;color:#0a0a0a !important;font-weight:600}
  .mh-cal-cell.today{background:#fff !important;color:#0a0a0a !important;font-weight:800;box-shadow:0 0 10px 0 rgba(255,255,255,.6)}
  .mh-cal-cell{color:var(--text-1)}              /* будущие дни — заметнее */
  .mh-cal.current .mh-cal-cell{color:var(--text-0)}

  /* Стрелки светлее */
  .mh-arrow{opacity:.85;color:var(--text-2)}

  /* Трекер: квадратики не обрезаются справа */
  .mh-midrow .mh-panel{padding-right:14px}
  .mh-habit-row{padding-right:2px}

  /* Заголовок "Заметки" выше, меньше пустого места */
  .mh-sec .mh-h{margin-bottom:7px}
  #mobile-home > .mh-sec:first-child{margin-top:0}

  /* Слова Финансы/Трекер выше (меньше пустоты сверху в окне) */
  .mh-midrow .mh-panel .mh-h{margin-bottom:8px}

  /* Трекеров ровно 5, дальше скролл */
  .mh-habits-scroll{max-height:188px;overflow-y:auto}

  /* Разделитель перед "Ближайшие задачи" */
  #mobile-home .mh-sec:last-child{border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
}

/* ===== Трекер: сайдбар "Мои привычки" на мобиле ===== */
@media (max-width:820px){
  /* "Мои привычки" — выезжающая панель слева */
  #tracker-habits-panel{
    position:fixed;top:0;left:0;bottom:0;
    width:80%;max-width:330px;z-index:250;
    background:var(--bg-panel);border-right:1px solid var(--line-strong);
    box-shadow:6px 0 30px rgba(0,0,0,.5);
    transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;padding:18px 14px;border-radius:0;
    display:flex;flex-direction:column;
  }
  #tracker-habits-panel.open{transform:translateX(0)}
  #tracker-sidebar-overlay.open{display:block}

  /* Аналитика — на всю ширину под сеткой трекера */
  .tracker-bottom{display:flex !important;flex-direction:column;gap:0}
  .tracker-bottom .bottom-card:not(#tracker-habits-panel){width:100% !important}

  /* Сетка трекера — большое окно, горизонтальный скролл по датам */
  .tracker-grid-card{min-height:0 !important}
  .tracker-grid-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tracker-grid{min-width:560px}

  /* Аналитика/достижения видны полностью */
  #stats-tab-stats,#stats-tab-achievements{display:block}
  .stats-overview{grid-template-columns:1fr 1fr !important;gap:9px}
}

/* ===== Трекер мобильный: топ-бар, неделя, аналитика ===== */
@media (max-width:820px){
  /* Топ-бар в строку: месяц слева, счётчики справа */
  .tracker-top-bar{flex-direction:row !important;flex-wrap:wrap;align-items:center !important;justify-content:space-between;gap:8px !important;padding:12px !important}
  .tracker-top-left{justify-content:flex-start;flex-wrap:nowrap;gap:6px}
  .tracker-top-left .tracker-today-btn{margin-left:2px}
  .tracker-top-right{justify-content:flex-end;gap:6px}
  .tracker-month-label{font-size:13px;white-space:nowrap}
  .tracker-stat-pill{padding:5px 9px;font-size:11px}

  /* Неделя: 7 крупных кружков, без горизонтального скролла */
  .tracker-grid{min-width:0 !important}
  .day-header .dh-wd{display:block;font-size:9px;color:var(--text-3);margin-bottom:2px}
  .day-header strong{font-size:12px}
  .habit-cell-big{width:auto !important;aspect-ratio:1;border-radius:9px !important}
  .day-cells{gap:5px !important}
  .habit-name-cell{font-size:12px}
  .habit-name-cell span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Аналитика не уезжает вправо, 4 окошка 2x2 */
  .tracker-bottom .bottom-card{overflow:hidden}
  .stats-overview{display:grid !important;grid-template-columns:1fr 1fr !important;gap:9px !important;width:100%}
  .stats-big-tile{min-width:0;overflow:hidden}
  .stats-tabs{flex-wrap:wrap}

  /* Модалка добавления привычки — НАД сайдбаром */
  .modal-overlay{z-index:400 !important}
  #tracker-habits-panel{z-index:250}
}

/* ===== Трекер мобильный (финал-3): без сна, недельная сетка ===== */
@media (max-width:820px){
  /* Убираем переключатель "график сна" и сам график сна на мобиле */
  #tracker-view-toggle{display:none !important}
  #tracker-view-sleep{display:none !important}
  /* Заголовок трекера + даты на одной линии (кнопки сна нет) */
  .tracker-card-head{margin-bottom:10px}
  .tracker-card-title{font-size:13px}

  /* Убираем счётчики "сегодня/привычек" сверху */
  .tracker-top-right{display:none !important}
  .tracker-top-bar{justify-content:flex-start !important}
  .tracker-top-left{flex:1;justify-content:space-between}

  /* Больше места трекеру, меньше аналитике */
  .tracker-grid-card{flex:none}
  .tracker-bottom{margin-top:10px}
  /* Аналитика компактнее */
  .tracker-bottom .bottom-card:last-child{padding:12px !important}
  .stats-overview{grid-template-columns:1fr 1fr !important;gap:8px !important}
  .stats-big-tile{padding:10px !important}
  .stats-tile-value{font-size:17px !important}
  /* Достижения со скроллом */
  #stats-tab-achievements .achievements-list{max-height:260px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  #stats-tab-stats,#stats-tab-achievements{width:100%}

  /* Квадратики недели — крупные, светлая подсветка при отметке */
  .habit-cell-big{aspect-ratio:1;width:auto !important;border-radius:9px !important;border:1.5px solid var(--line-strong);background:var(--bg-elev)}
  .habit-cell-big.done{background:var(--text-0) !important;border-color:var(--text-0) !important;box-shadow:0 0 12px 0 rgba(245,245,245,.55) !important}
  .day-cells{gap:5px !important}

  /* В окне трекера — не более 7 привычек, дальше скролл */
  #tracker-grid{max-height:none}
  .tracker-grid-card .tracker-grid-scroll{max-height:400px;overflow-y:auto}
}

@media (max-width:820px){
  /* Гарантия: на мобиле всегда показан трекер привычек (сна нет) */
  #tracker-view-habits{display:block !important}
}

/* ===== Трекер мобильный (финал-4): крупные кубики ===== */
@media (max-width:820px){
  /* Кубики на всю ячейку (убираем ограничение 24px) */
  #page-tracker .habit-cell-big{max-width:none !important;width:100% !important;aspect-ratio:1;border-radius:8px !important;border:1.5px solid var(--line-strong);background:var(--bg-elev)}
  #page-tracker .habit-cell-big.done{background:#fff !important;border-color:#fff !important;box-shadow:0 0 12px rgba(255,255,255,.55) !important}
  #page-tracker .day-cells{gap:6px !important}

  /* Даты на одной линии, компактно */
  #page-tracker .day-header{padding:2px 0 4px !important;font-size:10px}
  #page-tracker .day-header .dh-wd{font-size:9px;margin-bottom:1px}
  #page-tracker .day-header strong{font-size:12px}

  /* Названия привычек крупнее */
  #page-tracker .habit-name-cell{font-size:13px !important}
  #page-tracker .habit-name-cell span{font-size:13px}

  /* Окно трекера привычек больше */
  #page-tracker .tracker-grid-card{padding:14px !important}
  #page-tracker .tracker-row{padding:7px 0}

  /* Колонка названий шире чтобы влезали */
  #page-tracker .tracker-header,#page-tracker .tracker-row{grid-template-columns:96px 1fr 30px !important}
}

@media (max-width:820px){
  /* Статистика и достижения — строго раздельно, аналитика ниже */
  #page-tracker .stats-content{display:none !important}
  #page-tracker .stats-content.active{display:block !important}
  #page-tracker .tracker-bottom{margin-top:14px}
}

/* ===== Трекер мобильный (финал-5): кубики меньше, подсветка, аналитика ниже ===== */
@media (max-width:820px){
  /* Кубики меньше — текст привычек помещается */
  #page-tracker .habit-cell-big{max-width:30px !important;width:100% !important;border-radius:7px !important}
  #page-tracker .day-cells{gap:4px !important}
  /* Колонка названий шире — больше текста влезает */
  #page-tracker .tracker-header,#page-tracker .tracker-row{grid-template-columns:120px 1fr 26px !important}
  #page-tracker .habit-name-cell{font-size:12.5px !important}
  #page-tracker .habit-name-cell span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Таблица выше и правее — меньше пустого места */
  #page-tracker .tracker-card-head{margin-bottom:6px !important}
  #page-tracker .tracker-grid-card{padding:12px !important}
  #page-tracker .tracker-grid-scroll{margin:0}

  /* Подсветка сегодняшней колонки (день + все кубики) как на десктопе */
  #page-tracker .habit-cell-big.today-cell{border-color:rgba(255,255,255,.55) !important;box-shadow:0 0 8px -3px rgba(255,255,255,.4)}
  #page-tracker .habit-cell-big.today-cell.done{box-shadow:0 0 12px rgba(255,255,255,.7) !important}
  #page-tracker .day-header.today strong{color:#fff}

  /* Аналитика/достижения ниже — тянутся до нижнего меню */
  #page-tracker .tracker-bottom{margin-top:16px}
  #page-tracker .tracker-bottom .bottom-card:last-child{min-height:300px}
  #page-tracker #stats-tab-achievements .achievements-list{max-height:340px;overflow-y:auto}
}

/* ===== Главная (финал-3) + Трекер (финал-6) ===== */
@media (max-width:820px){
  /* Календарь: прошедшие дни мягче (не резкий чёрный на белом) */
  .mh-cal-cell.past{background:rgba(245,245,245,.5) !important;color:var(--text-0) !important;font-weight:500 !important}
  /* Сегодня: чёрный текст БЕЗ жирности */
  .mh-cal-cell.today{background:#fff !important;color:#1a1a1a !important;font-weight:500 !important;box-shadow:0 0 8px 0 rgba(255,255,255,.45)}

  /* Трекер на главной: дата над кубиками */
  .mh-today-date{font-size:11px;color:var(--text-2);font-weight:600;margin-bottom:8px;text-transform:none}
  /* Кубики на главной — подсветка по краям */
  .mh-habit-box{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 6px -3px rgba(255,255,255,.3)}
  /* Текст привычек на главной чуть больше */
  .mh-habit-name{font-size:12.5px !important}

  /* Трекер меню: даты выше, на линии с заголовком */
  #page-tracker .tracker-card-head{margin-bottom:4px !important}
  #page-tracker .tracker-grid-card{padding:10px 12px !important}
  #page-tracker .tracker-header{margin-bottom:2px}
  /* Счётчики справа — ближе к сетке */
  #page-tracker .habit-count{font-size:12px;padding-left:2px}
  #page-tracker .tracker-header,#page-tracker .tracker-row{grid-template-columns:110px 1fr 24px !important;gap:6px}

  /* Аналитика ниже, достижения не уходят под меню */
  #page-tracker .tracker-bottom{margin-top:14px;padding-bottom:10px}
  #page-tracker .tracker-bottom .bottom-card:last-child{min-height:0;max-height:none}
  #page-tracker #stats-tab-achievements .achievements-list{max-height:300px;overflow-y:auto}
  /* Чтобы достижения не уходили под нижнее меню — отступ снизу */
  #page-tracker{padding-bottom:76px}
}

/* ===== Попап календаря привычки ===== */
.habit-cal-box{max-width:320px;width:100%;padding:18px !important}
.hcal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.hcal-title{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700}
.hcal-dot{width:11px;height:11px;border-radius:50%;box-shadow:0 0 8px -1px currentColor}
.hcal-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding:0 2px}
.hcal-nav span{font-size:14px;font-weight:700;color:var(--text-0)}
.hcal-nav button{width:32px;height:32px;border-radius:8px;background:var(--bg-card-2);border:1px solid var(--line);color:var(--text-1);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.hcal-nav button:active{transform:scale(.9)}
.hcal-wdrow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.hcal-wd{text-align:center;font-size:9px;color:var(--text-3);font-weight:700;text-transform:uppercase}
.hcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.hcal-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:10.5px;color:var(--text-2);border-radius:7px;border:1px solid transparent;background:var(--bg-card-2);cursor:pointer;transition:all .15s;width:100%}
.hcal-cell:active{transform:scale(.85)}
.hcal-cell.empty{visibility:hidden;background:none}
.hcal-cell.done{background:linear-gradient(135deg,#fff,#dcdcdc);color:#1a1a1a;font-weight:700;box-shadow:0 0 10px rgba(255,255,255,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.hcal-cell.today{border-color:var(--accent);color:var(--accent)}
.hcal-cell.done.today{color:#1a1a1a;box-shadow:0 0 12px rgba(255,255,255,.55)}
.hcal-stat{margin-top:16px;font-size:12px;color:var(--text-2);text-align:center;padding-top:14px;border-top:1px solid var(--line)}
.hcal-stat strong{color:var(--text-0);font-size:14px}

@media (max-width:820px){
  /* Аналитика ниже — прямо над нижним меню */
  #page-tracker{padding-bottom:96px}
  #page-tracker .tracker-bottom{margin-top:18px}
}

/* ===== Трекер (финал-7): убрать промежуток, аналитика над меню ===== */
@media (max-width:820px){
  /* tracker-page: естественная высота, без растягивающего 1fr */
  #page-tracker .tracker-page{display:flex !important;flex-direction:column;gap:12px !important}
  /* Сетка трекера — по содержимому, не фикс-высота */
  #page-tracker .tracker-grid-card{height:auto !important;min-height:0 !important;flex:none !important}
  /* Аналитика сразу под трекером, без большого отступа */
  #page-tracker .tracker-bottom{margin-top:0 !important;flex:none !important}
  /* Отступ снизу — чтобы аналитика/достижения НЕ заходили под нижнее меню */
  #page-tracker{padding-bottom:110px !important}
}

/* ===== Достижения: горизонтальный скролл на мобиле ===== */
@media (max-width:820px){
  #page-tracker #stats-tab-achievements .achievements-list{
    display:flex !important;flex-direction:row !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;overflow-y:visible !important;
    max-height:none !important;
    gap:10px;padding-bottom:8px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  #page-tracker #stats-tab-achievements .achievements-list::-webkit-scrollbar{display:none}
  /* Карточка достижения — вертикальная, фикс ширина */
  #page-tracker #stats-tab-achievements .achievement-item{
    flex:0 0 150px;flex-direction:column;text-align:center;
    align-items:center;gap:9px;padding:14px 12px;height:auto;
  }
  #page-tracker #stats-tab-achievements .achievement-info{text-align:center}
  #page-tracker #stats-tab-achievements .achievement-title{font-size:12.5px}
  #page-tracker #stats-tab-achievements .achievement-desc{font-size:10.5px;line-height:1.35}
  #page-tracker #stats-tab-achievements .achievement-progress{font-size:11px}
  /* Меньше отступ снизу страницы — достижения теперь не уходят вниз */
  #page-tracker{padding-bottom:64px !important}
}

/* Стрелки топ-бара трекера — квадратные */
@media (max-width:820px){
  #page-tracker .tracker-top-left .btn-icon{border-radius:8px !important;width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center}
}

/* ===== Задачи: сайдбар папок на мобиле ===== */
.tasks-folders-panel-title{display:none}
.tasks-panel-actions{display:none}
@media (max-width:820px){
  /* Панель папок — выезжающий сайдбар слева */
  #tasks-folders-panel{
    position:fixed;top:0;left:0;bottom:0;
    width:80%;max-width:320px;z-index:250;
    background:var(--bg-panel);border-right:1px solid var(--line-strong);
    box-shadow:6px 0 30px rgba(0,0,0,.5);
    transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;padding:18px 14px;
    display:flex;flex-direction:column;gap:14px;
  }
  #tasks-folders-panel.open{transform:translateX(0)}
  #tasks-sidebar-overlay.open{display:block}
  .tasks-folders-panel-title{display:block;font-size:15px;font-weight:700;color:var(--text-0)}
  /* Папки в столбик в панели */
  #tasks-folders-panel .folders-row{display:flex !important;flex-direction:column;gap:8px;overflow:visible}
  #tasks-folders-panel .task-filters{display:flex !important;flex-direction:column;gap:6px;overflow:visible}
  #tasks-folders-panel .filter-chip{width:100%;text-align:left}
  /* Кнопки снизу: Папка слева, Задача справа */
  .tasks-panel-actions{display:flex;gap:8px;margin-top:auto;padding-top:10px}
  .tasks-panel-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;border-radius:11px;background:var(--bg-elev);border:1px solid var(--line-strong);color:var(--text-1);font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer}
  .tasks-panel-btn svg{width:15px;height:15px}
  .tasks-panel-btn.primary{background:var(--text-0);color:#0a0a0a;border-color:var(--text-0)}

  /* Главное окно задач — уже/длиннее, список аккуратнее */
  #page-tasks .tasks-page{display:block}
  #page-tasks .tasks-table-card{width:100%;min-height:calc(100vh - 200px)}
  #page-tasks .tasks-list-scroll{max-height:calc(100vh - 290px);overflow-y:auto}
  /* Кнопки редактирования/закрепа — правее, компактнее */
  #page-tasks .task-row-actions{margin-left:auto;gap:4px}
}

/* Календарь привычки: меньше ячейки, ровные отступы (финал) */
.habit-cal-box{max-width:296px !important}
.hcal-grid{gap:5px !important}
.hcal-cell{font-size:10px !important;border-radius:6px !important}
.hcal-wdrow{gap:5px !important}

/* ===== Задачи финал: окно до низа, фильтры, сайдбар, закреп ===== */
.task-filters-top{display:none}
@media (max-width:820px){
  /* Фильтры наверху списка задач */
  #page-tasks .task-filters-top{display:flex !important;flex-wrap:nowrap;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 0 12px;padding-bottom:4px}
  #page-tasks .task-filters-top::-webkit-scrollbar{display:none}
  #page-tasks .task-filters-top .filter-chip{flex-shrink:0;font-size:12px;padding:7px 13px;white-space:nowrap}

  /* Окно списка задач — до самого низа (до нижнего меню) */
  #page-tasks{padding-bottom:76px}
  #page-tasks .tasks-table-card{min-height:calc(100vh - 180px);display:flex;flex-direction:column}
  #page-tasks .tasks-list-scroll{flex:1;max-height:none;overflow-y:auto}

  /* Кнопку закрепа УБРАТЬ с главной строки задачи */
  #page-tasks .task-row-home > .task-row-main > .pin-btn{display:none !important}
  /* Кнопка редактирования чуть правее, компактнее */
  #page-tasks .task-row-main .task-edit-btn,#page-tasks .task-row-main .icon-btn{margin-left:4px}

  /* Закреп в раскрытой задаче — справа снизу */
  .task-expand-pin{display:flex;justify-content:flex-end;margin-top:10px}
  .task-expand-pin button{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:9px;background:var(--bg-elev);border:1px solid var(--line-strong);color:var(--text-2);font-family:var(--sans);font-size:12px;font-weight:600;cursor:pointer}
  .task-expand-pin button.pinned{color:var(--text-0);border-color:var(--text-0)}
  .task-expand-pin button svg{width:14px;height:14px}

  /* Папки в сайдбаре — горизонтальный скролл */
  #tasks-folders-panel .folders-row{display:flex !important;flex-direction:row !important;flex-wrap:nowrap;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #tasks-folders-panel .folders-row::-webkit-scrollbar{display:none}
  #tasks-folders-panel .folder-card{flex:0 0 auto;min-width:120px}

  /* Кнопка раскрытия "Все папки и задачи" */
  .tasks-folders-expand{display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 14px;border-radius:11px;background:var(--bg-card-2);border:1px solid var(--line);color:var(--text-1);font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;margin-top:4px}
  .tasks-folders-expand svg{width:16px;height:16px;transition:transform .25s}

  /* Дерево папок с задачами */
  .tasks-folders-tree{margin-top:10px;display:flex;flex-direction:column;gap:10px}
  .ftree-folder{background:var(--bg-card-2);border:1px solid var(--line);border-radius:11px;overflow:hidden}
  .ftree-folder-head{display:flex;align-items:center;gap:9px;padding:11px 13px;cursor:pointer;border-bottom:1px solid var(--line)}
  .ftree-folder-color{width:10px;height:10px;border-radius:3px;flex-shrink:0}
  .ftree-folder-name{flex:1;font-size:13px;font-weight:600;color:var(--text-0)}
  .ftree-folder-count{font-size:11px;color:var(--text-3);font-family:var(--mono)}
  .ftree-tasks{padding:6px 8px}
  .ftree-task{display:flex;align-items:center;gap:8px;padding:8px 8px;border-radius:8px;cursor:pointer}
  .ftree-task:active{background:var(--bg-elev)}
  .ftree-task-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
  .ftree-task-name{font-size:12.5px;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ftree-empty{font-size:11px;color:var(--text-3);padding:8px;text-align:center}
}

/* ===== Задачи: аккордеоны "Все папки"/"Все задачи" ===== */
.tasks-acc-btn{display:none}
@media (max-width:820px){
  .tasks-acc-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 14px;border-radius:11px;background:var(--bg-card-2);border:1px solid var(--line);color:var(--text-1);font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;margin-top:4px}
  .tasks-acc-btn svg{width:16px;height:16px;transition:transform .25s}
  .tasks-acc-body{margin-top:8px}
  .acc-list{display:flex;flex-direction:column;gap:6px}
  .acc-folder,.acc-task{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:9px;background:var(--bg-card);border:1px solid var(--line);cursor:pointer}
  .acc-folder:active,.acc-task:active{background:var(--bg-elev)}
  .acc-folder-color{width:10px;height:10px;border-radius:3px;flex-shrink:0}
  .acc-folder-name,.acc-task-name{flex:1;font-size:12.5px;color:var(--text-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .acc-folder-count{font-size:11px;color:var(--text-3);font-family:var(--mono)}
  .acc-task-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
  .acc-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;border-radius:9px;background:var(--bg-elev);border:1px dashed var(--line-strong);color:var(--text-2);font-family:var(--sans);font-size:12px;font-weight:600;cursor:pointer;margin:8px 0}
  .acc-add-btn svg{width:14px;height:14px}

  /* Главная: трекер компактнее (без даты), задачи скролл до низа */
  #page-home{padding-bottom:92px}
  .mh-tasks-scroll{max-height:none;overflow:visible}
  /* Трекер на главной чуть меньше — выровнять с финансами */
  .mh-midrow .mh-panel .mh-habits-scroll{max-height:176px}
}

/* ===== Задачи: сайдбар как в заметках (финал) ===== */
@media (max-width:820px){
  /* Убрать кнопку "Новая папка" из горизонтального скролла */
  #tasks-folders-panel .add-folder-card{display:none !important}

  /* Полоска-разделитель под папками */
  #tasks-folders-panel .folders-row{padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:4px}

  /* Папки в скролле — крупнее, красивее */
  #tasks-folders-panel .folder-card{flex:0 0 auto;min-width:135px;padding:14px 15px !important;border-radius:13px}
  #tasks-folders-panel .folder-name{font-size:13.5px}

  /* "Все папки" сверху, "Все задачи" — ВНИЗ (порядок через flex) */
  #tasks-folders-panel{display:flex;flex-direction:column}
  #tasks-folders-panel .tasks-folders-panel-title{order:0}
  #tasks-folders-panel .folders-row{order:1}
  #tasks-folders-panel #acc-btn-folders-wrap,
  #tasks-folders-panel [onclick*="'folders'"]{order:2}
  #tasks-folders-panel #acc-body-folders{order:3}
  /* Все задачи прижаты вниз */
  #tasks-folders-panel [onclick*="'tasks'"]{order:8;margin-top:auto}
  #tasks-folders-panel #acc-body-tasks{order:9}

  /* Кнопки-аккордеоны крупнее */
  .tasks-acc-btn{padding:13px 15px;font-size:13.5px;border-radius:13px}

  /* Окна папок/задач в аккордеоне крупнее */
  .acc-folder,.acc-task{padding:12px 14px;border-radius:11px}
  .acc-folder-name,.acc-task-name{font-size:13px}

  /* Вложенные задачи под папкой (при раскрытии папки) */
  .acc-folder-tasks{margin:6px 0 6px 18px;display:flex;flex-direction:column;gap:5px}
  .acc-subtask{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:9px;background:var(--bg-card-2);border:1px solid var(--line);cursor:grab;font-size:12px}
  .acc-subtask:active{cursor:grabbing;opacity:.6}
  .acc-subtask-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
  /* Папка как drop-зона при перетаскивании */
  .acc-folder.drop-target{border-color:var(--text-0);background:var(--bg-elev)}
}

/* ===== Задачи: панель = копия сайдбара заметок ===== */
@media (max-width:820px){
  /* Панель задач выезжает слева (как notes-list-panel) */
  #tasks-folders-panel.notes-list-panel{
    position:fixed;top:0;left:0;bottom:0;
    width:82%;max-width:340px;z-index:250;
    background:var(--bg-panel);border-right:1px solid var(--line-strong);
    box-shadow:6px 0 30px rgba(0,0,0,.5);
    transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;padding:16px 12px;
    display:flex;flex-direction:column;
  }
  #tasks-folders-panel.notes-list-panel.open{transform:translateX(0)}
}

/* ===== Задачи: окна компактнее, кнопки (финал) ===== */
@media (max-width:820px){
  /* Задачи в списке — с окном (карточка), компактнее */
  #page-tasks #tasks-list{gap:0 !important}
  #page-tasks #tasks-list .task-row-home{
    background:var(--bg-card);border:1px solid var(--line);border-radius:11px;
    margin-bottom:6px;overflow:hidden;
  }
  #page-tasks #tasks-list .task-row-main{padding:9px 13px !important;align-items:center}
  #page-tasks #tasks-list .task-row-name{font-size:13.5px;font-weight:600}
  #page-tasks #tasks-list .task-row-desc{font-size:11px;margin-top:1px}

  /* В строке убираем edit (он будет в раскрытой части снизу), закреп оставляем сверху */
  #page-tasks #tasks-list .task-row-main > .icon-btn{display:none !important}

  /* Раскрытая задача: закреп сверху уже есть в строке (pin-btn). 
     В expand — редактирование внизу справа, наравне с тегами */
  #page-tasks .task-expand-pin{display:none !important}  /* убираем старую кнопку "Закрепить" текстом */
  #page-tasks .task-expand-footer{display:flex;justify-content:flex-end;align-items:center;margin-top:10px}
  #page-tasks .task-expand-edit{width:32px;height:32px;border-radius:8px;background:var(--bg-elev);border:1px solid var(--line-strong);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
  #page-tasks .task-expand-edit svg{width:15px;height:15px}
  #page-tasks .task-expand-edit:active{transform:scale(.9)}
  /* Если есть теги — edit в той же строке справа от тегов */
  #page-tasks .task-expand-tagsrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}

  /* Сайдбар: задачи в списке с окном (как note-item) */
  #tasks-sidebar-list .notes-list-item{background:var(--bg-card);border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:8px;cursor:grab}
  #tasks-sidebar-list .notes-list-item:active{cursor:grabbing;opacity:.7}
  #tasks-sidebar-list .notes-list-item-title{font-size:13px;font-weight:600;color:var(--text-0)}
  #tasks-sidebar-list .notes-list-item-preview{font-size:11px;color:var(--text-3);margin-top:3px}
}

/* ============================================================ */
/* ===== ЗАДАЧИ + ЗАМЕТКИ финальная полировка (≤820px) ===== */
@media (max-width:820px){
  /* ---- Папки задач в раскрытом списке: карточки, крупный счётчик ---- */
  #tasks-folders-list-inner .notes-folder-item{
    background:var(--bg-card) !important;border:1px solid var(--line) !important;
    border-radius:10px !important;padding:10px 12px !important;margin-bottom:7px !important;
    display:flex;align-items:center;gap:9px;
  }
  #tasks-folders-list-inner .notes-folder-item.active{border-color:var(--text-2) !important;background:var(--bg-card-2) !important}
  #tasks-folders-list-inner .notes-folder-item-color{width:11px;height:11px;border-radius:4px;flex-shrink:0}
  #tasks-folders-list-inner .notes-folder-item-name{flex:1;font-size:13px;font-weight:600;color:var(--text-0)}
  /* Счётчик крупнее, в кружке, без белой линии */
  #tasks-folders-list-inner .notes-folder-item-count{
    font-size:13px !important;font-weight:700;font-family:var(--mono);
    color:var(--text-1) !important;background:var(--bg-elev);
    min-width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;
    border:none !important;padding:0 6px;
  }
  #tasks-folders-list-inner .notes-folder-item-edit{border:none;background:none;color:var(--text-3);width:24px;height:24px;cursor:pointer;flex-shrink:0}
  #tasks-folders-list-inner .notes-folder-item-edit svg{width:13px;height:13px}

  /* ---- ЗАДАЧИ сайдбар: закрепить шапку, скроллить только список ---- */
  #tasks-folders-panel.notes-list-panel{display:flex;flex-direction:column;overflow:hidden !important}
  #tasks-folders-panel .notes-list-header,
  #tasks-folders-panel #tasks-sidebar-search,
  #tasks-folders-panel .notes-folders-block{flex-shrink:0}
  #tasks-folders-panel #tasks-sidebar-list{flex:1;overflow-y:auto;min-height:0}

  /* ---- ГЛАВНОЕ окно задач: закрепить фильтры/заголовок, скроллить список ---- */
  #page-tasks .tasks-table-card{display:flex;flex-direction:column;overflow:hidden}
  #page-tasks .tasks-card-header-flex,
  #page-tasks .task-filters-top{flex-shrink:0}
  #page-tasks #tasks-list{flex:1;overflow-y:auto;min-height:0}
  #page-tasks .tasks-table-footer{flex-shrink:0}

  /* ---- ЗАМЕТКИ: скролл ТОЛЬКО текста, остальное закреплено ---- */
  #page-notes .note-editor{display:flex;flex-direction:column;overflow:hidden !important;height:calc(100vh - 150px) !important}
  #page-notes .note-title-row{flex-shrink:0}
  /* Только область текста скроллится */
  #page-notes .note-editor-live,#page-notes .note-preview-rendered{flex:1;min-height:0;overflow-y:auto}
  /* Тулбар (скрепка+стрелка), тег, привязка, фото — закреплены, не скроллятся */
  #page-notes .note-editor-toolbar,
  #page-notes .note-field-row,
  #page-notes .note-photos,
  #page-notes .note-divider,
  #page-notes .note-tag-suggest{flex-shrink:0}
  /* Скрепка+стрелка прямо над тегом (порядок уже в HTML) */
  #page-notes .note-editor-toolbar{margin:6px 0}
}

/* ===== Заметки: тулбар над тегом (фикс центрирования) ===== */
@media (max-width:820px){
  #page-notes #note-editor{display:flex !important;flex-direction:column !important;height:calc(100vh - 150px) !important;overflow:hidden !important;padding:14px !important}
  #page-notes .note-title-row{flex-shrink:0 !important;order:0}
  /* Текст растягивается и заполняет всё место до тулбара */
  #page-notes .note-editor-live{flex:1 1 auto !important;min-height:0 !important;order:1;display:flex;flex-direction:column}
  #page-notes .note-preview-rendered{flex:1 1 auto !important;min-height:0 !important;order:1;overflow-y:auto}
  #page-notes .note-content-overlay,#page-notes .note-content-input{flex:1 1 auto !important;min-height:0 !important;height:100% !important}
  #page-notes .note-editor-live-highlight{min-height:0 !important}
  /* Фото, разделитель, тулбар, тег, привязка — прижаты ВНИЗ, по порядку */
  #page-notes .note-photos{flex-shrink:0 !important;order:2}
  #page-notes .note-divider{flex-shrink:0 !important;order:3;margin:8px 0}
  #page-notes #note-toolbar{flex-shrink:0 !important;order:4;margin:0 0 8px}
  #page-notes .note-field-row{flex-shrink:0 !important;order:5}
  #page-notes .note-tag-suggest{flex-shrink:0 !important;order:6}
  /* input type=file скрыт */
  #page-notes #photo-upload-input{display:none}
}

/* ===== Главная: привычки выше (5 помещается) ===== */
@media (max-width:820px){
  .mh-midrow .mh-panel .mh-h{margin-bottom:6px !important}
  .mh-habit-row{padding:5px 0 !important}
  .mh-midrow .mh-panel .mh-habits-scroll{max-height:none !important}
  .mh-habit-box{width:22px !important;height:22px !important}
}

/* ============================================================ */
/* ===== ЗАМЕТКИ РЕДАКТОР — чистая переработка (≤820px) ===== */
/* Максимальная специфичность, переопределяет все блоки выше   */
/* ============================================================ */
@media (max-width:820px){
  /* Контейнер редактора — flex колонка, фикс высота */
  body #page-notes #note-editor{
    display:flex !important;flex-direction:column !important;
    height:calc(100dvh - 160px) !important;
    overflow:hidden !important;padding:16px !important;gap:0 !important;
  }
  /* Заголовок сверху */
  body #page-notes .note-title-row{flex-shrink:0 !important;order:0 !important;margin-bottom:10px}
  /* Текст — растягивается, скроллится */
  body #page-notes .note-editor-live{flex:1 1 auto !important;min-height:0 !important;order:1 !important;display:flex !important;flex-direction:column !important;overflow-y:auto !important}
  body #page-notes .note-preview-rendered{flex:1 1 auto !important;min-height:0 !important;order:1 !important;overflow-y:auto !important}
  body #page-notes .note-content-overlay,
  body #page-notes .note-content-input{flex:1 1 auto !important;min-height:0 !important;height:auto !important}

  /* Фото после текста */
  body #page-notes .note-photos{flex-shrink:0 !important;order:2 !important}
  /* Разделитель */
  body #page-notes .note-divider{flex-shrink:0 !important;order:3 !important;margin:10px 0 8px !important}

  /* ТУЛБАР (скрепка + стрелка) — прижат вниз, НАД тегом */
  body #page-notes #note-toolbar{
    flex-shrink:0 !important;order:4 !important;
    display:flex !important;align-items:center !important;gap:8px !important;
    margin:0 0 10px !important;overflow:visible !important;
  }
  /* Скрепка + стрелка — слева, одинаковые красивые кнопки */
  body #page-notes .note-toolbar-leftbtns{display:flex !important;align-items:center !important;gap:7px !important;flex-shrink:0}
  body #page-notes .note-attach-icon-btn,
  body #page-notes .note-toolbar-trigger{
    width:34px !important;height:34px !important;border-radius:9px !important;
    background:var(--bg-card-2) !important;border:1px solid var(--line-strong) !important;
    color:var(--text-1) !important;display:flex !important;align-items:center !important;justify-content:center !important;
    cursor:pointer;transition:all .15s;flex-shrink:0;padding:0 !important;
  }
  body #page-notes .note-attach-icon-btn:active,
  body #page-notes .note-toolbar-trigger:active{transform:scale(.9);background:var(--bg-elev) !important}
  body #page-notes .note-attach-icon-btn svg,
  body #page-notes .note-toolbar-trigger svg{width:17px !important;height:17px !important}
  /* Стрелка поворачивается когда раскрыто */
  body #page-notes .note-editor-toolbar:not(.collapsed) .note-toolbar-trigger svg{transform:rotate(90deg);transition:transform .25s}

  /* Кнопки форматирования H1/H2/H3 — красивые, разворачиваются вправо */
  body #page-notes .note-toolbar-content{
    display:flex !important;align-items:center !important;gap:4px !important;
    flex-wrap:nowrap !important;overflow-x:auto !important;overflow-y:hidden !important;
    max-width:0 !important;opacity:0 !important;flex:1 !important;
    transition:max-width .35s cubic-bezier(.4,0,.2,1),opacity .25s !important;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    background:transparent !important;border:none !important;padding:0 !important;margin:0 !important;
  }
  body #page-notes .note-toolbar-content::-webkit-scrollbar{display:none}
  body #page-notes .note-editor-toolbar:not(.collapsed) .note-toolbar-content{
    max-width:1000px !important;opacity:1 !important;
  }
  /* Каждая кнопка формата — аккуратная квадратная плашка */
  body #page-notes .note-toolbar-btn{
    min-width:34px !important;height:34px !important;padding:0 10px !important;
    background:var(--bg-card-2) !important;border:1px solid var(--line) !important;border-radius:9px !important;
    color:var(--text-1) !important;font-size:12px !important;font-weight:700 !important;
    display:inline-flex !important;align-items:center !important;justify-content:center !important;
    flex-shrink:0 !important;cursor:pointer;transition:all .15s;
  }
  body #page-notes .note-toolbar-btn:active{transform:scale(.9);background:var(--text-0) !important;color:#0a0a0a !important}
  body #page-notes .note-toolbar-btn.bold{font-weight:800}
  body #page-notes .note-toolbar-btn.italic{font-style:italic}
  body #page-notes .note-toolbar-divider{width:1px;height:20px;background:var(--line-strong);flex-shrink:0;margin:0 2px}

  /* Тег + привязка — внизу, закреплены */
  body #page-notes .note-field-row{flex-shrink:0 !important;order:5 !important}
  body #page-notes .note-tag-suggest{flex-shrink:0 !important;order:6 !important}
  body #page-notes #photo-upload-input{display:none !important}
}

/* ===== Главная: ровно 5 привычек + скролл, заголовки выше ===== */
@media (max-width:820px){
  /* Заголовки Трекер/Финансы — выше к краю окна */
  .mh-midrow .mh-panel{padding-top:11px !important}
  .mh-midrow .mh-panel .mh-h{margin-bottom:4px !important;margin-top:0 !important}
  /* Ровно 5 привычек видно, дальше скролл */
  .mh-midrow .mh-panel .mh-habits-scroll{max-height:175px !important;overflow-y:auto !important;scrollbar-width:none}
  .mh-midrow .mh-panel .mh-habits-scroll::-webkit-scrollbar{display:none}
  .mh-habit-row{padding:6px 0 !important}
}


/* ============================================================ */
/* ===== МОБИЛЬНЫЙ СКРОЛЛ — единый чистый блок (≤820px) ======= */
/* nav: fixed bottom:12px, кнопки 58px → занято ~82px снизу    */
/* ============================================================ */
@media (max-width:820px){
  /* Экран фиксирован */
  html,body{height:100dvh !important;overflow:hidden !important}
  .sleep-section{display:none !important}
  .notes-folder-item{padding:6px 10px !important;font-size:12px !important}
  .notes-folders-list-inner{gap:3px !important}
  .app{display:flex !important;flex-direction:column !important;height:100dvh !important;min-height:0 !important;overflow:hidden !important;padding-bottom:0 !important}
  .main{flex:1 !important;height:auto !important;min-height:0 !important;overflow:hidden !important;display:flex !important;flex-direction:column !important;padding:14px !important}

  /* Каждая страница: занимает место, ВНИЗУ отступ 90px под меню */
  .page.active{
    flex:1 !important;min-height:0 !important;
    display:flex !important;flex-direction:column !important;
    overflow:hidden !important;
    padding-bottom:76px !important;   /* место под плавающее меню */
  }
  .page-header{flex-shrink:0 !important;margin-bottom:12px}

  /* ===== ГЛАВНАЯ — скроллится целиком до задач ===== */
  body #page-home.active{display:block !important;overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch;padding-bottom:calc(72px + env(safe-area-inset-bottom)) !important}
  body #page-home #mobile-home{min-height:0;height:auto;padding-bottom:0}

  /* ===== ТРЕКЕР — список скроллится внутри, аналитика закреплена ===== */
  body #page-tracker .tracker-page{flex:1 !important;min-height:0 !important;display:flex !important;flex-direction:column !important;overflow:hidden !important;gap:10px !important}
  body #page-tracker .tracker-top-bar{flex-shrink:0 !important}
  body #page-tracker .tracker-grid-card{flex:1 1 auto !important;min-height:0 !important;display:flex !important;flex-direction:column !important;overflow:hidden !important}
  body #page-tracker .tracker-card-head{flex-shrink:0 !important}
  body #page-tracker #tracker-view-habits{flex:1 !important;min-height:0 !important;display:flex !important;flex-direction:column !important;overflow:hidden !important}
  body #page-tracker .tracker-grid-scroll{flex:1 !important;min-height:0 !important;overflow:auto !important;-webkit-overflow-scrolling:touch}
  body #page-tracker .tracker-bottom{flex-shrink:0 !important}

  /* ===== ЗАДАЧИ — список скроллится внутри ===== */
  body #page-tasks .tasks-page{flex:1 !important;min-height:0 !important;display:flex !important;flex-direction:column !important;overflow:hidden !important}
  body #page-tasks .tasks-table-card{flex:1 1 auto !important;min-height:0 !important;display:flex !important;flex-direction:column !important;overflow:hidden !important}
  body #page-tasks .tasks-card-header-flex,body #page-tasks .task-filters-top{flex-shrink:0 !important}
  body #page-tasks #tasks-list{flex:1 !important;min-height:0 !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch}
  body #page-tasks .tasks-table-footer{flex-shrink:0 !important}

  /* ===== ФИНАНСЫ — операции скроллятся внутри (правильные классы) ===== */
  body #page-finance .finance-page{flex:1 !important;min-height:0 !important;display:flex !important;flex-direction:column !important;overflow:hidden !important;gap:10px !important}
  body #page-finance .finance-circles-card,
  body #page-finance #middle-finance-card{flex-shrink:0 !important}
  /* План-факт / Долги — компактнее, 3 помещается, остальное скролл */
  body #page-finance #middle-finance-card .finance-chart-body{max-height:168px !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch}
  body #page-finance #middle-finance-card .plan-fact-item,
  body #page-finance #middle-finance-card .debt-item{padding:9px 11px !important}
  /* Окно "Все операции" — занимает остаток, операции скроллятся внутри */
  body #page-finance .finance-feed-card{flex:1 1 auto !important;min-height:0 !important;display:flex !important;flex-direction:column !important;overflow:hidden !important}
  body #page-finance .finance-feed-header,
  body #page-finance .finance-feed-filters{flex-shrink:0 !important}
  body #page-finance .finance-feed-list{flex:1 !important;min-height:0 !important;overflow-y:auto !important;max-height:none !important;-webkit-overflow-scrolling:touch}

  /* ===== ЗАМЕТКИ — скролл только текста ===== */
  body #page-notes .notes-page{min-height:0 !important;overflow:hidden !important}
  body #page-notes .notes-layout{display:flex !important;flex-direction:column !important;min-height:0 !important;overflow:hidden !important;height:100% !important}
  body #page-notes #note-editor{flex:1 !important;min-height:0 !important;height:auto !important;max-height:none !important;display:flex !important;flex-direction:column !important;overflow:hidden !important}
  body #page-notes .note-title-row{flex-shrink:0 !important}
  body #page-notes #live-editor,body #page-notes .note-editor-live,body #page-notes .note-preview-rendered{flex:1 1 auto !important;min-height:0 !important;overflow-y:auto !important}
  body #page-notes .note-photos,body #page-notes .note-divider,
  body #page-notes #note-toolbar,body #page-notes .note-field-row,
  body #page-notes .note-tag-suggest{flex-shrink:0 !important}

  /* ===== ГРАФ / ХОЛСT ===== */
  body #page-graph,body #page-canvas{overflow:hidden !important}
  body #page-graph .graph-page,body #page-canvas .canvas-page{flex:1 !important;min-height:0 !important;display:flex !important;flex-direction:column !important;overflow:hidden !important}

  /* Раскрытая задача: закреп над полоской, edit под */
  .task-expand-actions{display:flex;flex-direction:column;margin-top:10px}
  .task-expand-line{height:1px;background:var(--line-strong);margin:9px 0}
  .task-expand-pinbtn,.task-expand-editbtn{display:flex;align-items:center;gap:8px;padding:9px 2px;background:none;border:none;color:var(--text-2);font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer;text-align:left}
  .task-expand-pinbtn svg,.task-expand-editbtn svg{width:15px;height:15px;flex-shrink:0}
  .task-expand-pinbtn.pinned{color:var(--text-0)}
  .task-expand-editbtn{color:var(--text-1)}
  body #page-tasks #tasks-list .task-row-main > .pin-btn,
  body #page-tasks #tasks-list .task-row-main > .icon-btn{display:none !important}
}

/* Раскрытая задача — больше места под кнопки закреп/редактирование */
@media (max-width:820px){
  body #page-tasks .task-row-home.expanded .task-expand{max-height:1100px !important}
}

/* ============================================================ */
/* ===== ДЕСКТОП: скрыть мобильные гамбургеры (≥821px) ======== */
/* ============================================================ */
@media (min-width:821px){
  /* Кнопки-гамбургеры не нужны на десктопе */
  #page-tasks .notes-mobile-sidebar-btn,
  #page-tracker .notes-mobile-sidebar-btn,
  #page-notes .notes-mobile-sidebar-btn,
  #page-canvas .notes-mobile-sidebar-btn{display:none !important}
  /* "Мои привычки" — обычная карточка снизу (не выезжающая) */
  #page-tracker #tracker-habits-panel{position:static !important;transform:none !important;width:auto !important;max-width:none !important;box-shadow:none !important;z-index:auto !important}
  #page-graph .graph-controls{position:static}
}

/* ============================================================ */
/* ===== Трекер десктоп: ровно 8 строк (фикс. скролл), низ заполняет остаток ===== */
@media (min-width:821px){
  #page-tracker .tracker-page{display:flex !important;flex-direction:column;gap:14px;flex:1;min-height:0;overflow:hidden}
  /* Окно трекера: высота = ровно 8 строк + шапка дат. НЕ зависит от числа привычек. */
  #page-tracker .tracker-grid-card{flex:none !important;height:auto !important;max-height:none !important;min-height:0 !important;display:flex;flex-direction:column}
  #page-tracker .tracker-card-head{flex-shrink:0}
  #page-tracker #tracker-view-habits{flex:none !important;min-height:0;display:flex;flex-direction:column}
  #page-tracker .tracker-grid-scroll{flex:none !important;height:352px !important;min-height:0;overflow-y:auto !important;padding-bottom:0 !important}
  /* Низ (Мои привычки + Аналитика) заполняет оставшееся место — крупнее, 5-я привычка видна */
  #page-tracker .tracker-bottom{flex:1 1 auto !important;min-height:0 !important;align-items:stretch}
  #page-tracker .tracker-row{height:38px !important}
  #page-tracker .tracker-header{padding-bottom:4px !important;margin-bottom:2px !important}
  #page-tracker .tracker-grid{padding-top:0 !important}
}

/* ============================================================ */
/* ===== ЗАДАЧА 2: Задачи десктоп — папки сверху, нет лев. окна = */
@media (min-width:821px){
  /* Левую панель "Мои задачи" убираем на десктопе */
  #page-tasks #tasks-folders-panel{display:none !important}
  /* Список задач — на всю ширину */
  #page-tasks .tasks-page{display:flex !important;flex-direction:column !important;gap:0 !important}
  #page-tasks .tasks-table-card{width:100% !important;height:100% !important;display:flex;flex-direction:column;min-height:0;overflow:hidden}
  /* Папки квадратиками сверху (как было) */
  #page-tasks .folders-row-desktop{display:flex !important;flex-wrap:wrap;gap:10px;margin:14px 0}
  #page-tasks #tasks-list{flex:1;min-height:0;overflow-y:auto}
  #page-tasks .task-filters-top{display:flex !important;flex-wrap:wrap;gap:8px;margin-bottom:14px}
}
/* На мобиле folders-row-desktop скрыт (используется выезжающая панель) */
@media (max-width:820px){
  #page-tasks .folders-row-desktop{display:none !important}
}

/* ============================================================ */
/* ===== ЗАДАЧА 3: Заметки — скрепка+стрелка над тегами ======= */
/* Десктоп И мобайл: текст растягивается, тулбар прижат вниз    */
@media (min-width:821px){
  /* Раскладка редактора заметок задаётся inline-стилями в renderNoteEditor().
     Здесь только лёгкая подстраховка для нижнего блока. */
  #page-notes .note-editor-footer{flex-shrink:0}
}

/* ===== Obsidian-подобный рендер заметки: блоки, чекбоксы, цитаты, ссылки ===== */
.note-rendered{padding:6px 2px 6px 0}
.note-rendered-empty{color:var(--text-3);font-style:italic;padding:8px 4px}
.note-rblock{position:relative;padding:1px 0 1px 26px;border-radius:6px;transition:background var(--transition)}
.note-rblock:hover{background:rgba(255,255,255,.02)}
.note-rblock.blank{min-height:12px}
.note-rblock.dragging{opacity:.4}
.note-rblock.drop-target{box-shadow:inset 0 2px 0 0 var(--text-2)}
.note-bhandle{position:absolute;left:0;top:3px;width:20px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--text-3);opacity:0;cursor:grab;border-radius:5px;transition:opacity var(--transition),background var(--transition),color var(--transition)}
.note-bhandle:hover{background:var(--bg-elev);color:var(--text-1)}
.note-bhandle:active{cursor:grabbing}
.note-rblock:hover .note-bhandle{opacity:.65}
.note-bhandle svg{width:16px;height:16px}
.note-bcontent{min-width:0}
.note-rendered .md-h{font-weight:800;color:var(--text-0);line-height:1.25;margin:2px 0}
.note-rendered .md-h1{font-size:20px;margin-top:10px}
.note-rendered .md-h2{font-size:17px;margin-top:8px}
.note-rendered .md-h3{font-size:15px;margin-top:6px}
.note-rendered .md-p{margin:4px 0;color:var(--text-1);line-height:1.65}
.note-rendered .md-li{display:flex;gap:8px;margin:2px 0;color:var(--text-1);line-height:1.6}
.note-rendered .md-bullet{color:var(--text-3);flex-shrink:0}
.note-rendered .md-num{color:var(--text-3);flex-shrink:0;min-width:18px}
.note-rendered .md-task{display:flex;align-items:flex-start;gap:9px;margin:3px 0;line-height:1.6}
.note-rendered .md-check{flex-shrink:0;width:18px;height:18px;margin-top:1px;border:2px solid var(--text-3);border-radius:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:all var(--transition)}
.note-rendered .md-check:hover{border-color:var(--text-1)}
.note-rendered .md-check.on{background:var(--text-2);border-color:var(--text-2)}
.note-rendered .md-check svg{width:12px;height:12px}
.note-rendered .md-task.done .md-task-text{text-decoration:line-through;color:var(--text-3)}
.note-rendered .md-quote{border-left:3px solid var(--text-3);background:rgba(255,255,255,.035);border-radius:0 8px 8px 0;padding:8px 14px;margin:6px 0;color:var(--text-2);font-style:italic}
.note-rendered .md-code{background:var(--bg-elev);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:6px 0;overflow-x:auto}
.note-rendered .md-code code{font-family:var(--mono);font-size:12.5px;color:var(--text-1);white-space:pre}
.note-rendered strong{color:var(--text-0);font-weight:800}
.note-rendered em{font-style:italic}
.note-rendered s{color:var(--text-3)}
.note-rendered code{background:var(--bg-elev);padding:2px 6px;border-radius:4px;font-family:var(--mono);font-size:12px;color:var(--text-1)}
.note-rendered .md-link{color:#7bb0ff;text-decoration:none;border-bottom:1px solid rgba(123,176,255,.4)}
.note-rendered .md-link:hover{color:#a9ccff;border-bottom-color:#a9ccff}
.note-rendered .md-wikilink{color:#8fb0d6;text-decoration:none;border-bottom:1px dashed rgba(143,176,214,.5);cursor:pointer;font-weight:600}
.note-rendered .md-wikilink:hover{color:#fff;border-bottom-color:#fff}
.note-rendered .md-wikilink.broken{color:#a89880;border-bottom-color:rgba(168,152,128,.4);font-style:italic}

/* ===== Нижняя строка: селекты поменьше + кнопка удаления ===== */
.note-bottom-row{align-items:center}
.note-selects-wrap{display:flex;gap:8px;flex:1;min-width:0;flex-wrap:nowrap}
.note-bottom-row .note-link-select{flex:1 1 0;min-width:90px;max-width:210px;font-size:11.5px;padding:5px 8px}
.note-delete-btn{flex-shrink:0;width:38px;height:32px;border-radius:8px;border:1px solid rgba(229,115,115,.45);background:rgba(229,115,115,.12);color:#e57373;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);margin-left:6px}
.note-delete-btn:hover{background:#e57373;color:#fff;border-color:#e57373;transform:scale(1.06)}
.note-delete-btn svg{width:17px;height:17px}

/* ===== Подсветка режима редактирования (выровнена с textarea, символы приглушены) ===== */
.md-syn{color:var(--text-3);opacity:.45}
.md-hl-h{font-weight:800;color:var(--text-0)}
.md-hl-quote{font-style:italic;color:var(--text-2)}
.md-hl-task.done{color:var(--text-3)}
.md-il-b{font-weight:800;color:var(--text-0)}
.md-il-i{font-style:italic;color:var(--text-0)}
.md-il-s{color:var(--text-3)}
.md-il-c{color:var(--text-1)}
.md-il-w{color:#8fb0d6}

/* ===== Селекты шире (до корзины) ===== */
.note-bottom-row .note-link-select{flex:1 1 0;min-width:120px;max-width:none;font-size:12px;padding:6px 10px}

/* ===== Модалка подтверждения удаления ===== */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:4000;animation:confirmFade .15s ease}
@keyframes confirmFade{from{opacity:0}to{opacity:1}}
.confirm-box{background:var(--bg-card);border:1px solid var(--line-strong);border-radius:16px;padding:24px;max-width:380px;width:calc(100% - 48px);box-shadow:0 24px 60px rgba(0,0,0,.5);text-align:center;animation:confirmPop .18s cubic-bezier(.2,.9,.3,1.2)}
@keyframes confirmPop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.confirm-icon{width:48px;height:48px;border-radius:50%;background:rgba(229,115,115,.14);color:#e57373;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.confirm-icon svg{width:24px;height:24px}
.confirm-title{font-size:18px;font-weight:800;color:var(--text-0);margin-bottom:8px}
.confirm-text{font-size:13.5px;color:var(--text-2);line-height:1.55;margin-bottom:16px}
.confirm-text b{color:#e57373;font-weight:700}
.confirm-skip{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--text-2);cursor:pointer;margin-bottom:18px;user-select:none}
.confirm-skip input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.confirm-actions{display:flex;gap:10px}
.confirm-btn{flex:1;padding:11px 16px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:all var(--transition);border:1px solid transparent}
.confirm-btn.no{background:var(--bg-elev);border-color:var(--line-strong);color:var(--text-1)}
.confirm-btn.no:hover{background:var(--bg-card-2);color:var(--text-0)}
.confirm-btn.yes{background:#e57373;color:#fff}
.confirm-btn.yes:hover{background:#d65f5f;transform:translateY(-1px)}

/* ===== Живой редактор заметок (символы скрыты при наборе) ===== */
.note-live{outline:none;padding:8px 4px 8px 2px;font-size:14px;line-height:1.65;color:var(--text-1);caret-color:var(--text-0);tab-size:2}
.le-line{position:relative;padding:1px 0;min-height:1.5em;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}
.le-empty{min-height:1.65em}
.le-h{font-weight:800;color:var(--text-0);margin:3px 0 2px}
.le-h1{font-size:20px;line-height:1.3}
.le-h2{font-size:17px;line-height:1.3}
.le-h3{font-size:15px;line-height:1.35}
.le-quote{border-left:3px solid var(--text-3);background:rgba(255,255,255,.035);border-radius:0 6px 6px 0;padding:2px 0 2px 12px;color:var(--text-2);font-style:italic}
.le-task{padding-left:26px}
.le-task.done .le-task-text{text-decoration:line-through;color:var(--text-3)}
.le-check{position:absolute;left:2px;top:3px;width:17px;height:17px;border:2px solid var(--text-3);border-radius:5px;cursor:pointer;box-sizing:border-box}
.le-check.on{background:var(--text-2);border-color:var(--text-2)}
.le-check.on::after{content:"";position:absolute;left:4px;top:0;width:5px;height:9px;border:solid var(--bg-card);border-width:0 2px 2px 0;transform:rotate(45deg)}
.le-ul{padding-left:18px}
.le-bullet{position:absolute;left:5px;top:0;color:var(--text-3)}
.le-bullet::before{content:"•"}
.le-ol{padding-left:26px}
.le-num{position:absolute;left:2px;top:0;color:var(--text-3)}
.le-num::before{content:attr(data-n)}
.note-live code{background:var(--bg-elev);padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:12.5px;color:var(--text-1)}
.note-live strong{font-weight:800;color:var(--text-0)}
.note-live em{font-style:italic}
.note-live s{color:var(--text-3)}
.le-wiki{color:#a9c9f2;border-bottom:1px solid rgba(169,201,242,.45);cursor:pointer}
.le-wiki.broken{color:rgba(143,176,214,.5);border-bottom:1px dashed rgba(143,176,214,.35)}
.note-live .le-syn{display:inline-block;width:0;overflow:hidden;visibility:hidden;font-size:0;letter-spacing:0;color:var(--text-3);line-height:0;}
.note-live.show-syntax .le-syn{display:inline;width:auto;visibility:visible;font-size:.9em;opacity:.55;letter-spacing:normal;line-height:normal;}
.note-live.show-syntax .le-deco{display:none}

/* ===== Заголовки H4/H5 в живом редакторе ===== */
.le-h4{font-size:14px;line-height:1.4}
.le-h5{font-size:13px;line-height:1.4;color:var(--text-1)}

/* ===== Мультивыбор задач ===== */
.note-multi-select{position:relative;flex:1 1 0;min-width:120px}
.note-ms-field{display:flex;align-items:center;gap:6px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:7px;color:var(--text-3);font-size:12px;padding:6px 10px;cursor:pointer;height:100%;box-sizing:border-box;user-select:none}
.note-ms-field:hover{border-color:var(--line-strong)}
.note-ms-field.has{color:var(--text-1)}
.note-ms-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-ms-chev{width:14px;height:14px;flex-shrink:0;opacity:.6;transition:transform var(--transition)}
.note-ms-dropdown{display:none;position:absolute;left:0;right:0;bottom:calc(100% + 5px);background:var(--bg-card);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.45);padding:5px;max-height:220px;overflow-y:auto;z-index:200}
.note-ms-dropdown.open{display:block;animation:msPop .14s ease}
@keyframes msPop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.note-ms-option{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--text-1);transition:background var(--transition)}
.note-ms-option:hover{background:var(--bg-elev)}
.note-ms-option input{width:16px;height:16px;accent-color:#8fb0d6;cursor:pointer;flex-shrink:0}
.note-ms-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-ms-empty{padding:10px;color:var(--text-3);font-size:12.5px;text-align:center}

/* ===== Медиа-блоки в заметках (фото/видео) ===== */
.le-media{padding:5px 0 5px 4px;min-height:0}
.le-media-box{position:relative;display:inline-block;max-width:100%;min-width:90px;width:70%;border-radius:10px;overflow:hidden;vertical-align:top;line-height:0;border:1px solid var(--line);background:var(--bg-elev)}
.le-media-el{display:block;width:100%;height:auto;border-radius:10px}
video.le-media-el{background:#000;max-height:62vh}
.le-media-box.missing{min-height:64px;line-height:normal}
.le-media-box.missing::after{content:"Файл не найден";display:block;padding:20px;color:var(--text-3);font-size:12px;text-align:center}
.le-media-handle{position:absolute;left:7px;top:7px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);border-radius:7px;color:#fff;cursor:grab;opacity:0;transition:opacity var(--transition);z-index:4}
.le-media-handle:active{cursor:grabbing}
.le-media-box:hover .le-media-handle{opacity:1}
.le-media-handle svg{width:16px;height:16px}
.le-media-del{position:absolute;right:7px;top:7px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);border-radius:7px;color:#fff;cursor:pointer;opacity:0;transition:opacity var(--transition),background var(--transition);z-index:4}
.le-media-del:hover{background:#e57373}
.le-media-box:hover .le-media-del{opacity:1}
.le-media-del svg{width:14px;height:14px}
.le-media-resize{position:absolute;right:3px;bottom:3px;width:20px;height:20px;cursor:nwse-resize;z-index:4;border-right:3px solid rgba(255,255,255,.7);border-bottom:3px solid rgba(255,255,255,.7);border-radius:0 0 6px 0;opacity:0;transition:opacity var(--transition)}
.le-media-box:hover .le-media-resize{opacity:.9}
.le-line.drop-target{box-shadow:inset 0 3px 0 0 #8fb0d6}
.note-live.show-syntax .le-media-box{display:none}

/* ===== Единая ручка перетаскивания блоков (текст + медиа) ===== */
.le-line-handle{position:absolute;width:20px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--text-3);border-radius:5px;cursor:grab;opacity:0;pointer-events:none;transition:opacity .12s ease,background .12s ease,color .12s ease;z-index:60}
.le-line-handle.show{opacity:.5;pointer-events:auto}
.le-line-handle.show:hover{opacity:1;background:var(--bg-elev);color:var(--text-1)}
.le-line-handle:active{cursor:grabbing}
.le-line-handle svg{width:15px;height:15px}

/* ===== Колонки (блоки рядом, как в Notion) ===== */
.le-cols{display:flex;gap:26px;align-items:flex-start;margin:5px 0;width:100%}
.le-col{min-width:0;flex:1 1 0}
.le-col > .le-line:first-child{padding-top:0}
/* индикаторы места вставки при перетаскивании */
.le-line.drop-above{box-shadow:inset 0 3px 0 0 #8fb0d6}
.le-line.drop-below{box-shadow:inset 0 -3px 0 0 #8fb0d6}
.le-line.drop-left{box-shadow:inset 3px 0 0 0 #8fb0d6;border-radius:3px}
.le-line.drop-right{box-shadow:inset -3px 0 0 0 #8fb0d6;border-radius:3px}

/* ===== Трекер: надпись в строке дат + плавающий переключатель ===== */
.tracker-grid-title{font-size:14px;font-weight:800;color:var(--text-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:center;padding-right:6px;letter-spacing:.01em}
/* прокрутка привычек заполняет окно — высота окна задаёт число видимых строк */
#tracker-view-habits.active{display:flex;flex-direction:column;flex:1;min-height:0}
#tracker-view-habits .tracker-grid-scroll{flex:1;min-height:0;overflow-y:auto}
.tracker-view-toggle-float{position:absolute;top:9px;right:14px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--bg-card);border:1px solid var(--line-strong);border-radius:7px;color:var(--text-1);cursor:pointer;transition:all var(--transition);z-index:12}
.tracker-view-toggle-float:hover{color:var(--text-0);background:var(--bg-elev);border-color:var(--text-3)}
.tracker-view-toggle-float svg{width:15px;height:15px}
/* шапка вида «Сон» — освобождаем место под кнопку */
.sleep-fullhead{padding-right:40px}
/* нижние окна (Мои привычки / Аналитика) */
.tracker-bottom > .bottom-card{min-height:0}
.habit-item{min-height:40px;padding:7px 11px}
.habits-list{padding-bottom:4px}
/* аналитика: график активности за 7 дней + чипы */
.stats-week{display:flex;flex-direction:column;gap:9px;flex:1;min-height:0}
.stats-week-head{display:flex;align-items:baseline;justify-content:space-between}
.stats-week-title{font-size:10px;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.stats-week-prod{font-size:18px;font-weight:800;font-family:var(--mono);color:var(--text-0)}
.stats-week-bars{flex:1;min-height:70px;display:flex;align-items:flex-end;gap:7px}
.stats-week-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.stats-week-track{width:100%;flex:1;min-height:0;background:var(--bg-elev);border-radius:6px;display:flex;align-items:flex-end;overflow:hidden}
.stats-week-fill{width:100%;background:#fff;opacity:.22;border-radius:6px;min-height:3px;transition:height .6s cubic-bezier(.4,0,.2,1)}
.stats-week-fill.today{opacity:.9}
.stats-week-day{font-size:9px;color:var(--text-3);font-weight:700}
.stats-week-day.today{color:var(--text-0)}
.stats-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex-shrink:0}
.stats-chip{background:var(--bg-card-2);border:1px solid var(--line);border-radius:11px;padding:10px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px;transition:border-color var(--transition),background var(--transition)}
.stats-chip:hover{border-color:var(--line-strong);background:var(--bg-elev)}
.stats-chip-value{font-size:19px;font-weight:800;font-family:var(--mono);color:var(--text-0);line-height:1}
.stats-chip-label{font-size:9px;color:var(--text-2);text-transform:uppercase;letter-spacing:.02em;font-weight:700;text-align:right;line-height:1.2}

/* ===== Подзадачи обычных задач ===== */
.task-subtask-badge{display:inline-flex;align-items:center;margin-left:8px;font-size:10.5px;font-weight:600;color:var(--text-3);background:var(--bg-elev);padding:1px 7px;border-radius:10px;vertical-align:middle}
.subtask-count-inline{color:var(--text-3);font-weight:600;margin-left:4px}
.task-subtasks-list{display:block;margin-bottom:8px;max-height:180px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
body #page-home .task-subtasks-list{max-height:calc(3 * 36px);}
.task-subtask{display:flex;align-items:center;gap:9px;padding:5px 8px;background:var(--bg-elev);border-radius:8px;transition:background var(--transition);margin-bottom:5px}
.task-subtask:last-child{margin-bottom:0}
.task-subtask:hover{background:var(--bg-card-2)}
.task-subtask-check{width:18px;height:18px;flex-shrink:0;border:1.5px solid var(--line-strong);border-radius:5px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:all var(--transition)}
.task-subtask-check:hover{border-color:var(--text-2)}
.task-subtask-check svg{width:12px;height:12px}
.task-subtask.done .task-subtask-check{background:var(--text-2);border-color:var(--text-2);color:var(--bg-card)}
.task-subtask-text{flex:1;font-size:13px;color:var(--text-1)}
.task-subtask.done .task-subtask-text{text-decoration:line-through;color:var(--text-3)}
.task-subtask-del{width:22px;height:22px;flex-shrink:0;border:none;background:transparent;color:var(--text-3);font-size:17px;line-height:1;cursor:pointer;border-radius:5px;transition:all var(--transition)}
.task-subtask-del:hover{background:rgba(229,115,115,.15);color:#e57373}
.task-subtask-empty{font-size:12.5px;color:var(--text-3);padding:4px 2px}
.task-subtask-add{display:flex;gap:8px;align-items:center}
.task-subtask-input{flex:1;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;color:var(--text-0);font-size:13px;padding:7px 11px;outline:none;transition:border var(--transition)}
.task-subtask-input:focus{border-color:var(--text-3)}
.task-subtask-addbtn{width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:8px;color:var(--text-1);cursor:pointer;transition:all var(--transition)}
.task-subtask-addbtn:hover{background:var(--bg-card-2);color:var(--text-0)}
.task-subtask-addbtn svg{width:16px;height:16px}

/* ============================================================ */
/* ===== Задачи: подзадачи в модалке + 2-колоночное раскрытие = */
/* ============================================================ */

/* галочки задач крупнее */
.task-checkbox{width:22px;height:22px;border-radius:6px}
.task-checkbox.checked::after{width:10px;height:5px;border-left-width:2px;border-bottom-width:2px}
.task-subtask-check{width:20px;height:20px}
.task-subtask-check svg{width:13px;height:13px}

/* раскрытая задача: подзадачи скроллятся внутри своего блока */
.task-row-home.expanded .task-expand{max-height:1100px}

/* раскрытая задача в 2 колонки: слева описание+подзадачи, справа кнопки + папка/приоритет/срок/теги */
.task-expand-2col{display:flex;gap:20px;align-items:stretch}
.task-expand-left{flex:1;min-width:0;display:block}
.task-expand-left > .task-expand-row{margin-bottom:14px}
.task-expand-left > .task-expand-row:last-child{margin-bottom:0}
.task-expand-right{flex:0 1 auto;max-width:52%;display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--line-strong);padding-left:18px;align-items:flex-end;text-align:right}
.task-expand-right .task-expand-tags{justify-content:flex-end}
.task-expand-2col .task-expand-row{margin-bottom:0}
.task-expand-left .task-subtasks-list{margin-bottom:0}
/* кнопки закреп/редактировать в правой колонке (на десктопе раньше не было стилей) */
.task-expand-right .task-expand-actions{display:flex;flex-direction:column;gap:0;margin:0}
.task-expand-right .task-expand-line{height:1px;background:var(--line);margin:5px 0}
.task-expand-right .task-expand-pinbtn,
.task-expand-right .task-expand-editbtn{display:flex;align-items:center;gap:9px;padding:7px 5px;background:none;border:none;color:var(--text-2);font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;border-radius:6px;transition:background var(--transition),color var(--transition)}
.task-expand-right .task-expand-pinbtn:hover,
.task-expand-right .task-expand-editbtn:hover{background:var(--bg-card-2);color:var(--text-0)}
.task-expand-right .task-expand-pinbtn svg,
.task-expand-right .task-expand-editbtn svg{width:15px;height:15px;flex-shrink:0}
.task-expand-right .task-expand-pinbtn.pinned{color:var(--text-0)}
.task-expand-right .task-expand-editbtn{color:var(--text-1)}

/* подзадачи в модалке создания/редактирования задачи */
.modal-subtasks-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.modal-subtasks-list:empty{margin-bottom:0}
.modal-subtask-item{display:flex;align-items:center;gap:9px;background:var(--bg-card-2);border:1px solid var(--line);border-radius:8px;padding:6px 9px;transition:border var(--transition)}
.modal-subtask-item.done{opacity:.7}
.modal-subtask-check{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--line-strong);border-radius:5px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:all var(--transition)}
.modal-subtask-check:hover{border-color:var(--text-2)}
.modal-subtask-check svg{width:13px;height:13px}
.modal-subtask-item.done .modal-subtask-check{background:var(--text-2);border-color:var(--text-2);color:var(--bg-card)}
.modal-subtask-text{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text-0);font-size:13.5px;font-family:var(--sans);padding:2px 0}
.modal-subtask-item.done .modal-subtask-text{text-decoration:line-through;color:var(--text-3)}
.modal-subtask-del{width:24px;height:24px;flex-shrink:0;border:none;background:transparent;color:var(--text-3);font-size:18px;line-height:1;cursor:pointer;border-radius:5px;transition:all var(--transition)}
.modal-subtask-del:hover{background:rgba(229,115,115,.15);color:#e57373}
.modal-subtask-add{display:flex;gap:8px;align-items:center}
.modal-subtask-addbtn{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:8px;color:var(--text-1);cursor:pointer;transition:all var(--transition)}
.modal-subtask-addbtn:hover{background:var(--bg-card-2);color:var(--text-0)}
.modal-subtask-addbtn svg{width:17px;height:17px}

/* мобайл: раскрытая задача — колонки в стопку */
@media (max-width:820px){
  .task-expand-2col{flex-direction:column;gap:12px}
  .task-expand-right{flex:1 1 auto;border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:10px}
}

/* ===== Задачи: финальная полировка карточек (≤820px) ===== */
@media (max-width:820px){
  /* строки чуть компактнее */
  #page-tasks #tasks-list .task-row-main{padding:10px 12px !important;gap:9px}
  #page-tasks #tasks-list .task-row-home{margin-bottom:8px}
  /* имя обрезается многоточием, бейдж рядом не режется; описание тоже обрезается */
  #page-tasks #tasks-list .task-row-name{display:flex;align-items:center;gap:6px;min-width:0}
  #page-tasks #tasks-list .task-row-name .trn-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  #page-tasks #tasks-list .task-row-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;line-height:1.4;max-width:100%;word-break:break-word;overflow-wrap:anywhere;min-width:0}
  /* счётчик подзадач рядом с именем — компактный бейдж */
  #page-tasks #tasks-list .task-subtask-badge{flex-shrink:0;font-size:10px;font-weight:700;color:var(--text-2);background:var(--bg-elev);border-radius:6px;padding:1px 6px}
  /* разделительная чёрточка перед сроком */
  #page-tasks #tasks-list .task-row-main > .task-status{border-left:1px solid var(--line-strong);padding-left:10px;margin-left:4px;align-self:center}
  /* раскрытые подзадачи: фон темнее, видно ~4, остальное скроллится */
  #page-tasks .task-expand-left .task-subtasks-list{max-height:228px !important}
  #page-tasks .task-subtask{background:var(--bg-card) !important;border:1px solid var(--line)}
  /* нижняя строка: папка·приоритет·срок слева | разделитель | теги справа, на одной строке */
  #page-tasks .task-expand-2col{flex-direction:column !important;gap:10px !important}
  #page-tasks .task-expand-right{flex-direction:row !important;align-items:stretch !important;gap:0 !important;border-left:none !important;border-top:1px solid var(--line-strong) !important;padding:10px 0 0 !important;text-align:left !important;max-width:none !important}
  #page-tasks .task-expand-right .task-expand-row{margin:0 !important;flex:1 1 0;min-width:0}
  #page-tasks .task-expand-right .task-expand-row + .task-expand-row{flex:0 1 auto;border-left:1px solid var(--line-strong);padding-left:12px;margin-left:12px}
  #page-tasks .task-expand-right .task-expand-tags{justify-content:flex-start !important}
}

/* ===== Совместная заметка — живой редактор разметки ===== */
.shared-note-editor-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
#shared-live-editor{padding:12px 14px;min-height:160px;max-height:300px;overflow-y:auto;font-size:14px;line-height:1.65}
.shared-note-editor #shared-live-editor + .shared-note-toolbar{border-bottom:none;border-top:1px solid var(--line)}

/* ===== Аналитика: 4 кубика + график сна ===== */
.stats-cubes{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;flex-shrink:0}
.stat-cube{background:var(--bg-card-2);border:1px solid var(--line);border-radius:10px;padding:9px 5px;text-align:center;transition:border-color var(--transition),background var(--transition)}
.stat-cube:hover{border-color:var(--line-strong);background:var(--bg-elev)}
.stat-cube-value{font-size:18px;font-weight:800;font-family:var(--mono);color:var(--text-0);line-height:1}
.stat-cube-label{font-size:8px;color:var(--text-2);text-transform:uppercase;letter-spacing:.02em;font-weight:700;margin-top:4px;line-height:1.15}
.sleep-section{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;position:relative}
.sleep-add-btn{display:flex;align-items:center;gap:5px;padding:5px 11px;background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:8px;color:var(--text-1);font-family:var(--sans);font-size:11px;font-weight:700;cursor:pointer;transition:all var(--transition)}
.sleep-add-btn:hover{background:var(--bg-card-2);color:var(--text-0)}
.sleep-add-btn svg{width:13px;height:13px}
.sleep-tooltip{position:absolute;transform:translate(-50%,-100%);background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:9px;padding:6px 11px;pointer-events:none;opacity:0;transition:opacity var(--transition);z-index:20;white-space:nowrap;box-shadow:0 6px 22px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:2px}
.sleep-tooltip.show{opacity:1}
.sleep-tooltip .stt-date{font-size:10px;color:var(--text-2);font-weight:700;font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em}
.sleep-tooltip .stt-row{display:flex;align-items:center;gap:8px}
.sleep-tooltip .stt-type{font-size:11px;color:var(--text-1);font-weight:600}
.sleep-tooltip .stt-time{font-size:13px;color:var(--text-0);font-weight:800;font-family:var(--mono)}

/* Совместный редактор: символы разметки скрыты, показываются только по кнопке < > */
#shared-live-editor .le-syn{display:inline-block !important;width:0 !important;overflow:hidden !important;visibility:hidden !important;font-size:0 !important;letter-spacing:0 !important;color:var(--text-3) !important;line-height:0 !important;}
#shared-live-editor.show-syntax .le-syn{display:inline !important;width:auto !important;visibility:visible !important;font-size:.9em !important;letter-spacing:normal !important;opacity:.55 !important;line-height:normal !important;}

/* ===== Доп. мобильная полировка ===== */
@media (max-width:820px){
  .global-search-modal{padding-top:46px !important}
}
.tracker-participant-edit-emoji,.tracker-detail-participant-emoji{flex-shrink:0;aspect-ratio:1}

.shared-note-view{min-height:200px;max-height:62vh;overflow-y:auto;word-break:break-word;overflow-wrap:anywhere;background:var(--bg-card-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.shared-note-view-linkrow{margin-top:10px;margin-bottom:0}

/* Трекер-карточка: название по центру в шапке, описание 2 строки */
.shared-tracker-header.tracker-head-titled{align-items:center;position:relative;min-height:24px}
.shared-tracker-title-top{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:58%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
.shared-tracker-sub-2l{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left;font-size:11.5px;line-height:1.35;margin-top:6px;white-space:normal}

/* Трекер: название слева над описанием; описание в сером окне */
.shared-tracker-titlewrap{position:relative;z-index:1}
.shared-tracker-sub-box{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06);border-radius:7px;padding:5px 9px;margin-top:6px;text-align:left;font-size:11px;line-height:1.35;color:rgba(255,255,255,.62);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}

.fin-ops-toggle{margin-top:8px;width:100%;padding:8px;border-radius:8px;background:transparent;border:1px solid var(--line-strong);color:var(--text-1);font-family:var(--sans);font-size:12px;font-weight:600;cursor:pointer;transition:all var(--transition)}
.fin-ops-toggle:hover{background:var(--bg-elev)}

/* Квадратные иконочные кнопки не должны растягиваться правилом button{min-height:38px} */
.task-subtask-addbtn,.notes-folder-add-btn,.tracker-emoji-btn{min-height:0}

/* Совместная задача — описание: фиксированное окно со скроллом, без растягивания */
#detail-task-content{resize:none !important;height:108px !important;overflow-y:auto !important;line-height:1.5}

.shared-detail-task-item .icon-btn-tiny{min-height:0;width:20px;height:20px}

#mobile-home > .mh-sec:last-child{margin-bottom:0}

.mh-tasks-scroll .mh-task:last-child{margin-bottom:0}

/* ============================================ */
/* ===== ХОЛСТ НА ТЕЛЕФОНЕ: фуллскрин + плавающие кнопки + pinch-zoom ===== */
.canvas-fab-menu,.canvas-fab-add{display:none}
@media (max-width:820px){
  /* Прячем шапку — холст занимает весь экран */
  body #page-canvas > .page-header{display:none !important}
  body #page-canvas .canvas-page{padding:0 !important;height:calc(100vh - 70px) !important;height:calc(100dvh - 70px) !important;position:relative;overflow:hidden;gap:0 !important}
  body #page-canvas .canvas-area{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100vw !important;height:100vh !important;height:100dvh !important;min-height:0 !important;border:none !important;border-radius:0 !important;background:var(--bg-page) !important;touch-action:none;z-index:5}
  /* Кнопки зума убраны — приближение двумя пальцами */
  body #page-canvas .canvas-zoom-controls{display:none !important}
  body #page-canvas .canvas-zoom-info{display:none !important}
  body #page-canvas .canvas-mobile-add{display:none !important}
  body #page-canvas .canvas-mobile-btns{display:none !important}
  /* Плавающая кнопка меню (список холстов) — слева сверху */
  body #page-canvas .canvas-fab-menu{
    display:flex;align-items:center;justify-content:center;
    position:absolute;left:12px;top:12px;width:42px;height:42px;border-radius:12px;
    background:rgba(30,30,30,.82);color:var(--text-0);border:1px solid var(--line-strong);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:0 4px 16px rgba(0,0,0,.4);z-index:30;cursor:pointer;
  }
  body #page-canvas .canvas-fab-menu svg{width:20px;height:20px}
  /* Плавающая кнопка «Создать карточку» — справа сверху */
  body #page-canvas .canvas-fab-add{
    display:flex;align-items:center;justify-content:center;
    position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:13px;
    background:var(--text-0);color:var(--bg-page);border:none;
    box-shadow:0 4px 18px rgba(0,0,0,.5);z-index:30;cursor:pointer;
  }
  body #page-canvas .canvas-fab-add svg{width:23px;height:23px}
  body #page-canvas .canvas-fab-add:active,body #page-canvas .canvas-fab-menu:active{transform:scale(.93)}
  /* Точки-связи всегда видимы и крупнее под палец */
  body #page-canvas .canvas-link-handle{opacity:.55;width:16px;height:16px}
  body #page-canvas .canvas-card.dragging .canvas-link-handle{opacity:0}
}

/* ============================================ */
/* ===== ХОЛСТ + ГРАФ: доработки телефона ===== */
@media (max-width:820px){
  /* --- Холст: серый фон вместо чёрного --- */
  body #page-canvas .canvas-area{background:var(--bg-card) !important}
  /* Кнопка "+" — как кнопка меню (тёмное стекло, не белая) */
  body #page-canvas .canvas-fab-add{
    background:rgba(30,30,30,.82) !important;color:var(--text-0) !important;
    border:1px solid var(--line-strong) !important;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    width:42px !important;height:42px !important;border-radius:12px !important;
    box-shadow:0 4px 16px rgba(0,0,0,.4) !important;
  }
  body #page-canvas .canvas-fab-add svg{width:20px !important;height:20px !important}

  /* --- Холст: новая боковая панель (меню слева) --- */
  body #page-canvas .canvas-top-bar .canvas-toolbar{display:none !important}
  .canvas-sb-search,.canvas-sb-head,.canvas-sb-add{display:none}
  body #page-canvas .canvas-sb-search{
    display:block;width:100%;box-sizing:border-box;margin-bottom:10px;
    padding:10px 12px;border-radius:10px;background:var(--bg-input);
    border:1px solid var(--line);color:var(--text-0);font-family:var(--sans);font-size:13px;
  }
  body #page-canvas .canvas-sb-head{
    display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;
    padding:10px 12px;border-radius:10px;background:var(--bg-card-2);
    border:1px solid var(--line);color:var(--text-0);font-family:var(--sans);
    font-size:13px;font-weight:700;cursor:pointer;margin-bottom:8px;
  }
  body #page-canvas .canvas-sb-head svg{width:15px;height:15px;transition:transform var(--transition-slow);stroke:currentColor;fill:none;stroke-width:2.4}
  body #page-canvas .canvas-top-bar.list-open .canvas-sb-head svg{transform:rotate(180deg)}
  body #page-canvas .canvas-top-bar .canvas-selector{display:none;flex-direction:column;gap:6px;overflow-y:auto;flex:1;min-height:0}
  body #page-canvas .canvas-top-bar.list-open .canvas-selector{display:flex}
  body #page-canvas .canvas-sb-add{
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:100%;box-sizing:border-box;margin-top:auto;padding:12px;
    border-radius:11px;background:var(--text-0);color:var(--bg-page);
    border:none;font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;
  }
  body #page-canvas .canvas-sb-add svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4}

  /* --- Граф: полный экран как холст --- */
  body #page-graph > .page-header{display:none !important}
  body #page-graph .graph-page{position:fixed !important;inset:0 !important;width:100vw !important;height:100vh !important;height:100dvh !important;padding:0 !important;gap:0 !important}
  body #page-graph .graph-area{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;min-height:0 !important;border:none !important;border-radius:0 !important;background:var(--bg-card) !important;touch-action:none}
  /* Фильтры — компактно, слева сверху */
  body #page-graph .graph-controls{
    position:absolute !important;top:10px !important;left:10px !important;right:auto !important;
    width:auto !important;max-width:70% !important;z-index:20;background:transparent !important;
    border:none !important;padding:0 !important;margin:0 !important;display:flex !important;
  }
  body #page-graph .graph-toggles{
    display:flex !important;flex-wrap:wrap;gap:4px;width:auto !important;
    background:rgba(26,26,26,.8) !important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border:1px solid var(--line) !important;border-radius:10px;padding:4px;
  }
  body #page-graph .graph-toggle{
    flex:0 0 auto !important;padding:5px 9px !important;font-size:10.5px !important;
    border-radius:7px;opacity:1;background:transparent;border:none;color:var(--text-2);font-weight:600;text-align:center;
  }
  body #page-graph .graph-toggle.active{background:var(--bg-elev);color:var(--text-0)}
  /* Легенда — справа сверху, раскрывается вниз */
  body #page-graph .graph-legend{
    display:flex !important;top:10px !important;right:10px !important;left:auto !important;bottom:auto !important;
    flex-direction:column-reverse;z-index:20;
  }
  body #page-graph .graph-legend .graph-legend-row{justify-content:flex-end}
  body #page-graph .graph-legend .graph-zoom-btn{display:none !important}
  body #page-graph .graph-legend.open .graph-legend-panel{max-height:220px;margin-bottom:0;margin-top:8px}
  /* Зум — справа снизу, над нижним меню */
  .graph-zoom-m{display:none}
  body #page-graph .graph-zoom-m{display:flex;flex-direction:column;gap:6px;position:absolute;right:12px;bottom:88px;z-index:20}
  body #page-graph .graph-zoom-m button{
    width:42px;height:42px;border-radius:11px;background:rgba(26,26,26,.82);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border:1px solid var(--line-strong);color:var(--text-0);font-size:18px;font-weight:700;
    font-family:var(--mono);cursor:pointer;display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.4);line-height:1;
  }
  body #page-graph .graph-zoom-m button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2}
}

/* ============================================ */
/* ===== ХОЛСТ + ГРАФ: доработки (2) ===== */
@media (max-width:820px){
  /* Граф: фильтры — отдельные прямоугольные кнопки, текст виден */
  body #page-graph .graph-toggles{background:transparent !important;border:none !important;padding:0 !important;gap:5px !important}
  body #page-graph .graph-toggle{
    background:rgba(26,26,26,.82) !important;border:1px solid var(--line-strong) !important;
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-radius:7px !important;padding:6px 10px !important;font-size:11px !important;color:var(--text-1) !important;
  }
  body #page-graph .graph-toggle.active{background:var(--bg-elev) !important;color:var(--text-0) !important;border-color:var(--text-3) !important}
  /* Легенда-кнопка — строго круглая */
  body #page-graph .graph-legend-toggle{width:34px !important;height:34px !important;border-radius:50% !important;flex-shrink:0;padding:0}
  body #page-graph .graph-legend-toggle svg{width:13px;height:13px}
  /* Зум-кнопки — чуть меньше */
  body #page-graph .graph-zoom-m{bottom:84px !important}
  body #page-graph .graph-zoom-m button{width:36px !important;height:36px !important;border-radius:10px !important;font-size:16px !important}
  body #page-graph .graph-zoom-m button svg{width:15px !important;height:15px !important}

  /* Холст: точки-связи крупнее под палец */
  body #page-canvas .canvas-link-handle{opacity:.6 !important;width:20px !important;height:20px !important}
  body #page-canvas .canvas-link-handle.top{top:-10px !important}
  body #page-canvas .canvas-link-handle.bottom{bottom:-10px !important}
  body #page-canvas .canvas-link-handle.left{left:-10px !important}
  body #page-canvas .canvas-link-handle.right{right:-10px !important}
  body #page-canvas .canvas-card.dragging .canvas-link-handle{opacity:0 !important}

  /* Холст: пункт холста в меню — крупнее, кнопка-править справа */
  body #page-canvas #canvas-selector .canvas-tab{padding:11px 12px !important;border-radius:10px !important;font-size:13.5px !important;display:flex;align-items:center;gap:9px}
  body #page-canvas #canvas-selector .canvas-tab-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body #page-canvas #canvas-selector .canvas-tab-edit{margin-left:auto;flex-shrink:0}
  body #page-canvas #canvas-selector .canvas-tab-pin{flex-shrink:0}

  /* Холст: "Новый холст" — серый, не белый */
  body #page-canvas .canvas-sb-add{background:var(--bg-elev) !important;color:var(--text-0) !important;border:1px solid var(--line-strong) !important}
}