/* ============ Notes (lyrics) — iOS / macOS Notes look. Prefix nt-. Light mode comes from scripts/build-light.mjs ============ */
.ap-nt{--nt:#ffd60a;background:#000}
.ap-nt .nt-sp{flex:1}
.ap-nt .p-back,.ap-nt .nt-back{color:var(--nt)!important;font-size:17px;display:flex;align-items:center;padding:6px 4px}.ap-nt .nt-back span{margin-left:-1px}
.nt-top{flex:none;display:flex;align-items:center;gap:2px;height:calc(env(safe-area-inset-top,0px) + var(--fake,0px) + 44px);padding:calc(env(safe-area-inset-top,0px) + var(--fake,0px)) 8px 0 6px}
.nt-tb,.nt-new{color:var(--nt)!important;display:grid;place-items:center;min-width:40px;height:40px}
.nt-tb:active,.nt-new:active,.nt-back:active{opacity:.45}
.nt-scroll{flex:1;overflow:auto;padding:0 16px 24px;-webkit-overflow-scrolling:touch}
.nt-scroll h1{font-size:34px;font-weight:700;margin:2px 0 10px;letter-spacing:.01em}
.nt-sw{position:relative;margin-bottom:6px}.nt-si{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:#8e8e93;display:flex}
.nt-sw input{width:100%;height:36px;border:0;outline:0;border-radius:10px;background:rgba(118,118,128,.24);color:#fff;font:17px -apple-system,BlinkMacSystemFont,sans-serif;padding:0 10px 0 32px;-webkit-appearance:none;appearance:none}
.nt-sw input::placeholder{color:#8e8e93}.nt-sw input::-webkit-search-cancel-button{filter:grayscale(1)}
.nt-sec{font-size:20px;font-weight:700;margin:20px 2px 8px;color:#fff}
.nt-grp{background:#1c1c1e;border-radius:11px;overflow:hidden}
.nt-r{position:relative;overflow:hidden}
.nt-r+.nt-r::before{content:'';position:absolute;left:16px;right:0;top:0;height:.5px;background:#38383a;z-index:2}
.nt-r-in{position:relative;z-index:1;background:#1c1c1e;padding:10px 16px 11px;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:default}
.nt-r-in:active{background:#2c2c2e}
.nt-r-acts{position:absolute;top:0;right:0;bottom:0;display:flex}.nt-r-acts button{width:74px;display:grid;place-items:center;color:#fff!important}.nt-r-acts .pin{background:#ff9f0a}.nt-r-acts .del{background:#ff3b30}
.nt-r-t{font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.nt-r-s{display:flex;gap:7px;font-size:15px;margin-top:2px;min-width:0}.nt-r-d{flex:none;color:#fff}.nt-r-p{color:#8e8e93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nt-r-b{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--nt);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-trashrow{margin-top:24px}.nt-trashrow button{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;font-size:17px;text-align:left}.nt-trashrow button>.ic:first-child{color:var(--nt)}.nt-trashrow span{flex:1}.nt-trashrow small{color:#8e8e93;font-size:17px}.nt-trashrow button>.ic:last-child{color:#5a5a5e}
.nt-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:#8e8e93;font-size:15px;padding:22vh 30px 0;line-height:1.35}.nt-empty b{color:#fff;font-size:22px}
.nt-none{text-align:center;color:#8e8e93;padding:40px 0}.nt-fine{color:#8e8e93;font-size:13px;text-align:center;margin:6px 10px 0}
.nt-bot{flex:none;display:flex;align-items:center;gap:6px;padding:0 10px calc(var(--bot,env(safe-area-inset-bottom,0px)));height:calc(var(--bot,env(safe-area-inset-bottom,0px)) + 46px);background:rgba(18,18,20,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:.5px solid rgba(255,255,255,.1)}
.nt-count,.nt-stat{font-size:11px;color:#8e8e93;text-align:center}.nt-bot .nt-stat{flex:1}

/* ---- editor (phone) ---- */
.nt-edscreen{position:absolute;inset:0;z-index:20;background:#000;display:flex;flex-direction:column}
.nt-done{display:none;color:var(--nt)!important;font-size:17px;font-weight:600;padding:6px 8px}.typing .nt-done{display:block}.typing .nt-more{display:none}
.nt-escroll{flex:1;overflow:auto;padding:0 20px;-webkit-overflow-scrolling:touch;cursor:text}
.nt-date{text-align:center;color:#8e8e93;font-size:13px;margin:4px 0 12px}
.nt-ed{outline:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:17px;line-height:1.4;color:#fff;caret-color:var(--nt);-webkit-user-select:text;user-select:text;min-height:1.4em}
.nt-ed::first-line{font-size:28px;font-weight:700;line-height:1.3}
.nt-ed:empty::before{content:'Title';color:#5a5a5e;font-size:28px;font-weight:700}
.nt-pad{height:45vh}
.nt-bcw:empty{display:none}.nt-bcw{margin:0 0 14px}
.nt-bc{display:inline-flex;align-items:center;gap:9px;max-width:100%;padding:5px 6px 5px 5px;border-radius:20px;background:rgba(255,214,10,.15);cursor:pointer;-webkit-user-select:none;user-select:none}
.nt-bc-p{width:28px;height:28px;border-radius:50%;background:var(--nt);color:#000;display:grid;place-items:center;flex:none}
.nt-bc-t{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:#fff}.nt-bc-t b{font-weight:600}.nt-bc-t small{font-size:13px;color:#8e8e93}
.nt-bc-x{color:#8e8e93!important;display:grid;place-items:center;width:26px;height:26px;flex:none}

/* ---- sheets ---- */
.nt-asw{width:100%;max-width:440px;padding:8px 8px calc(env(safe-area-inset-bottom,0px) + 8px);display:flex;flex-direction:column;gap:8px;animation:ntup .28s cubic-bezier(.2,.9,.3,1)}
@keyframes ntup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.nt-as{background:rgba(44,44,46,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:14px;overflow:hidden}
.nt-as-h{padding:14px 16px;text-align:center;color:#8e8e93;font-size:13px;line-height:1.35}
.nt-as button{display:block;width:100%;height:57px;font-size:20px;color:#0a84ff!important;border-top:.5px solid #38383a}.nt-as button:first-child{border-top:0}.nt-as button.red{color:#ff453a!important}.nt-as button:active{background:#3a3a3c}
.nt-as-x{height:57px;border-radius:14px;background:#2c2c2e;font-size:20px;font-weight:600;color:#0a84ff!important}
.nt-pick{width:100%;max-width:520px;max-height:78%;display:flex;flex-direction:column;background:#1c1c1e;border-radius:14px 14px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:ntup .28s cubic-bezier(.2,.9,.3,1)}
.nt-pick-h{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 16px 4px;font-size:17px}.nt-pick-h button{justify-self:end;color:var(--nt)!important;font-weight:600;font-size:17px}
.nt-pick-s{text-align:center;color:#8e8e93;font-size:13px;padding:0 20px 10px}
.nt-pick-l{overflow:auto;flex:1;min-height:0}
.nt-bt{display:flex;align-items:center;gap:12px;width:100%;padding:9px 16px;text-align:left;border-top:.5px solid #38383a}.nt-bt:active{background:#2c2c2e}
.nt-bt-i{width:36px;height:36px;border-radius:8px;background:#2c2c2e;color:var(--nt);display:grid;place-items:center;flex:none}.nt-bt.on .nt-bt-i{background:var(--nt);color:#000}
.nt-bt-t{flex:1;min-width:0;display:flex;flex-direction:column}.nt-bt-t b{font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nt-bt-t small{font-size:13px;color:#8e8e93}.nt-bt>.ic{color:var(--nt)}
.nt-pick-rm{color:#ff453a!important;font-size:17px;padding:15px;border-top:.5px solid #38383a}

/* ---- laptop: sidebar list + editor ---- */
.ap-nt.mac{flex-direction:row;background:#1e1e20}
.ap-nt.mac .nt-side{width:280px;flex:none;display:flex;flex-direction:column;padding-bottom:0}
.ap-nt.mac .nt-sbar{justify-content:flex-end}.ap-nt.mac .nt-new{color:#c7c7cc!important;min-width:32px;height:28px;border-radius:6px}.ap-nt.mac .nt-new:hover{background:rgba(255,255,255,.08)}
.ap-nt.mac .nt-sw{margin:0 10px 8px}.ap-nt.mac .nt-sw input{height:28px;border-radius:7px;font-size:13px;padding-left:26px;background:rgba(118,118,128,.2)}.ap-nt.mac .nt-si{left:8px}
.nt-side-h{display:flex;align-items:baseline;gap:8px;padding:6px 16px 2px}.nt-side-h b{font-size:15px}.nt-side-h .nt-count{margin-left:auto;font-size:12px}
.nt-bk{display:flex;align-items:center;color:var(--nt)!important;font-size:13px;margin-left:-4px}
.ap-nt.mac .nt-list{flex:1;overflow:auto;padding:0 8px 12px}
.ap-nt.mac .nt-sec{font-size:12px;color:#8e8e93;margin:14px 8px 4px}
.ap-nt.mac .nt-r-acts{display:none}.ap-nt.mac .nt-grp{background:none;border-radius:0}.ap-nt.mac .nt-r-in{background:none;padding:8px 10px;border-radius:7px}.ap-nt.mac .nt-r-in:active{background:rgba(255,255,255,.06)}
.ap-nt.mac .nt-r+.nt-r::before{left:10px;right:10px;background:rgba(255,255,255,.09)}
.ap-nt.mac .nt-r.sel .nt-r-in{background:#a8850a}.ap-nt.mac .nt-r.sel+.nt-r::before,.ap-nt.mac .nt-r.sel::before{opacity:0}
.ap-nt.mac .nt-r.sel .nt-r-p,.ap-nt.mac .nt-r.sel .nt-r-b{color:rgba(255,255,255,.82)}
.ap-nt.mac .nt-r-t{font-size:13px;font-weight:700}.ap-nt.mac .nt-r-s{font-size:12px}.ap-nt.mac .nt-r-b{font-size:11px}
.ap-nt.mac .nt-trashrow{margin:16px 2px 0;background:none}.ap-nt.mac .nt-trashrow button{font-size:13px;padding:7px 8px;gap:8px;border-radius:7px}.ap-nt.mac .nt-trashrow button:hover{background:rgba(255,255,255,.06)}.ap-nt.mac .nt-trashrow small{font-size:12px}
.ap-nt.mac .nt-empty{padding-top:60px;font-size:12px}.ap-nt.mac .nt-empty b{font-size:15px}
.nt-panebox{flex:1;min-width:0;display:flex}
.nt-pane{flex:1;min-width:0;display:flex;flex-direction:column;background:#1e1e20}
.nt-mtb{height:52px;flex:none;display:flex;align-items:center;gap:2px;padding:0 10px;border-bottom:.5px solid rgba(255,255,255,.08)}
.ap-nt.mac .nt-tb{color:#c7c7cc!important;min-width:32px;height:28px;border-radius:6px}.ap-nt.mac .nt-tb:hover{background:rgba(255,255,255,.08)}.ap-nt.mac .nt-beatbtn{color:var(--nt)!important}
.ap-nt.mac .nt-stat{font-size:12px;margin-right:8px}
.ap-nt.mac .nt-escroll{padding:0 44px}.ap-nt.mac .nt-date{margin:14px 0 14px;font-size:12px}
.ap-nt.mac .nt-ed{font-size:15px;line-height:1.5}.ap-nt.mac .nt-ed::first-line,.ap-nt.mac .nt-ed:empty::before{font-size:24px}
.nt-blank-t{flex:1;display:grid;place-items:center;color:#8e8e93;font-size:15px}
.ap.mac.ap-nt .nt-asw{max-width:320px}.ap.mac.ap-nt .nt-pick{max-width:440px;border-radius:14px;max-height:70%}
/* beat part picker: scrub bar + loop a part */
.nt-part{margin:10px 0 0;padding:10px 12px 8px;border-radius:14px;background:rgba(255,214,10,.08)}
.nt-sb{position:relative;height:30px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
.nt-sb::before{content:'';position:absolute;left:0;right:0;top:13px;height:4px;border-radius:2px;background:rgba(255,255,255,.18)}
.nt-sb-t{position:absolute;left:0;right:0;top:9px;height:12px;background-image:linear-gradient(to right,rgba(255,255,255,.22) 1px,transparent 1px);pointer-events:none}
.nt-sb-f{position:absolute;left:0;top:13px;height:4px;border-radius:2px;background:#fff;pointer-events:none}
.nt-sb-r{position:absolute;top:7px;height:16px;border-radius:5px;background:rgba(255,214,10,.35);border:1.5px solid var(--nt);box-sizing:border-box;pointer-events:none}
.nt-sb-h{position:absolute;top:5px;width:3px;height:20px;margin-left:-1.5px;border-radius:2px;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.35);pointer-events:none}
.nt-sb-k{position:absolute;top:2px;width:14px;height:26px;margin-left:-7px;border-radius:5px;background:var(--nt);pointer-events:none}
.nt-sb-k::after{content:'';position:absolute;left:6px;top:7px;width:2px;height:12px;background:rgba(0,0,0,.45);border-radius:1px}
.nt-sb-tm{display:flex;justify-content:space-between;font-size:12px;color:#8e8e93;font-variant-numeric:tabular-nums;margin-top:2px}
.nt-lp{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:8px}
.nt-lp-l{font-size:13px;color:#8e8e93;margin-right:2px;flex:none}
.nt-lp button{flex:none;font-size:13px;font-weight:600;padding:6px 11px;border-radius:14px;background:rgba(255,255,255,.1);color:#fff!important}
.nt-lp button.on{background:var(--nt);color:#000!important}