:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#0b2544;background:#f4f7f8;font-synthesis:none;text-rendering:optimizeLegibility;--navy: #062b55;--navy-2: #0d3f72;--green: #18833f;--green-2: #26a653;--yellow: #f5bf16;--orange: #e87517;--ink: #10243d;--muted: #68788c;--line: #dfe7eb;--surface: #ffffff;--shadow: 0 18px 50px rgba(7, 38, 70, .1);--topbar-height: 88px}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#f5f8f9}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.full-loader,.config-page,.login-page{min-height:100vh;display:grid;place-items:center}.spinner{width:22px;height:22px;border:3px solid #d8e5df;border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.config-page{text-align:center;padding:32px;background:#fff}.config-page img{width:min(560px,82vw)}.config-page h1{margin:24px 0 8px}.config-page p{color:var(--muted)}.login-page{padding:24px;background:radial-gradient(circle at 12% 18%,rgba(245,191,22,.12),transparent 25%),radial-gradient(circle at 86% 80%,rgba(24,131,63,.14),transparent 30%),linear-gradient(135deg,#f9fbfb,#edf4f0)}.login-card{width:min(1040px,100%);background:#fffffff5;border:1px solid rgba(13,63,114,.08);border-radius:28px;box-shadow:var(--shadow);padding:42px;display:grid;grid-template-columns:1.1fr .9fr;gap:32px 56px;align-items:center}.login-logo{grid-column:1 / -1;width:min(570px,78%);height:140px;object-fit:contain;object-position:left center}.login-copy h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.02;margin:12px 0 14px;letter-spacing:-.045em}.login-copy p{color:var(--muted);font-size:1.04rem;line-height:1.6;margin:0}.eyebrow{color:var(--green);font-size:.72rem;letter-spacing:.18em;font-weight:800}.login-form,.stack-form{display:grid;gap:16px}label{display:grid;gap:8px;font-size:.84rem;font-weight:700;color:#29445f}input,textarea,select{width:100%;border:1px solid #d5e0e5;border-radius:12px;background:#fff;color:var(--ink);outline:none;transition:border-color .18s,box-shadow .18s}input,select{height:48px;padding:0 14px}textarea{padding:15px;resize:vertical}input:focus,textarea:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 4px #18833f1a}.primary-button,.secondary-button{min-height:46px;border-radius:12px;padding:0 20px;border:0;font-weight:800}.primary-button{background:linear-gradient(135deg,var(--green),#0f6e35);color:#fff;box-shadow:0 10px 24px #18833f2e}.secondary-button{background:#eef3f5;color:var(--navy)}.app-shell{min-height:100vh;padding-top:var(--topbar-height)}.topbar{position:fixed;inset:0 0 auto;z-index:40;width:100%;height:var(--topbar-height);background:#fffffff5;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:grid;grid-template-columns:220px minmax(260px,720px) auto;align-items:center;gap:24px;padding:0 4vw}.brand{border:0;background:transparent;padding:0;text-align:left}.brand img{width:196px;height:60px;object-fit:contain;object-position:left center;display:block}.search-wrap{height:50px;border:1px solid #d7e3e7;background:#f7f9fa;border-radius:16px;display:flex;align-items:center;gap:12px;padding:0 15px;color:#6e8092}.search-wrap:focus-within{border-color:var(--green);background:#fff;box-shadow:0 0 0 4px #18833f17}.search-wrap input{height:auto;padding:0;border:0;box-shadow:none;background:transparent}.search-wrap input:focus{box-shadow:none}.clear-search{border:0;background:#e9eff1;color:#55697b;border-radius:50%;width:25px;height:25px;line-height:1}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}.add-button{width:48px;height:48px;border-radius:50%;border:0;color:#fff;background:linear-gradient(135deg,var(--green-2),var(--green));display:grid;place-items:center;box-shadow:0 8px 22px #18833f3b}.profile-button{height:52px;max-width:250px;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--navy);padding:4px 6px;border-radius:14px}.profile-button:hover{background:#f2f6f6}.avatar{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:900}.profile-copy{display:grid;text-align:left;min-width:0}.profile-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}.profile-copy small{color:var(--muted);font-size:.72rem}.menu-anchor{position:relative}.popover{position:absolute;top:calc(100% + 10px);right:0;min-width:190px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 18px 45px #07264626;padding:7px;z-index:60}.popover button{width:100%;border:0;background:transparent;padding:11px 12px;border-radius:10px;color:var(--navy);display:flex;align-items:center;gap:10px;text-align:left;font-weight:700}.popover button:hover:not(:disabled){background:#f0f6f2;color:var(--green)}.home-page,.song-page{width:min(1220px,92vw);margin:0 auto;padding:46px 0 120px}.hero{position:relative;min-height:250px;border-radius:28px;overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:46px 54px;background:linear-gradient(125deg,#062b55,#0c4679 68%,#14713e 140%);color:#fff;box-shadow:0 20px 50px #062b5529}.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 20%,rgba(245,191,22,.28),transparent 18%),repeating-linear-gradient(120deg,transparent 0 28px,rgba(255,255,255,.025) 29px 30px)}.hero>*{position:relative;z-index:1}.hero .eyebrow{color:#ffd44f}.hero h1{max-width:760px;margin:12px 0 14px;font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;letter-spacing:-.04em}.hero p{max-width:720px;margin:0;color:#ffffffc2;line-height:1.65}.hero-mark{font-size:7.5rem;color:var(--yellow);opacity:.88;transform:rotate(-8deg);padding:0 16px}.results-section{margin-top:42px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}.section-heading h2{margin:6px 0 0;font-size:clamp(1.5rem,3vw,2.15rem);letter-spacing:-.03em}.result-count{color:var(--muted);font-size:.86rem;font-weight:700}.results-list{display:grid;gap:10px}.result-card{width:100%;border:1px solid var(--line);background:#fff;border-radius:16px;padding:17px 18px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;color:var(--ink);text-align:left;transition:transform .16s,box-shadow .16s,border-color .16s}.result-card:hover{transform:translateY(-2px);border-color:#b9d7c5;box-shadow:0 12px 30px #07264614}.match-badge{padding:7px 10px;border-radius:999px;background:#e9f6ed;color:var(--green);font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.match-badge.lyrics-match{background:#fff4dc;color:#a95a0c}.result-main{min-width:0;display:grid;gap:3px}.result-main strong{font-size:1.02rem}.result-main small{color:var(--muted)}.result-excerpt{margin-top:6px;color:#5e6e80;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.88rem}.result-arrow{color:#9aa9b6;font-size:1.8rem}.results-state,.empty-state{border:1px dashed #cbd9de;background:#fff9;border-radius:20px;min-height:220px;display:grid;place-items:center;align-content:center;gap:12px;text-align:center;padding:30px;color:var(--muted)}.empty-state h3{margin:4px 0 0;color:var(--navy)}.empty-state p{margin:0}.empty-icon{width:62px;height:62px;border-radius:20px;background:#e8f4ec;color:var(--green);display:grid;place-items:center}.song-page{padding-top:24px}.song-toolbar{position:sticky;top:104px;z-index:25;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;padding:10px;border:1px solid var(--line);background:#fffffff0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:17px;box-shadow:0 10px 28px #07264612}.back-button,.tool-button{border:0;background:transparent;min-height:42px;padding:0 13px;border-radius:11px;display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:800}.back-button:hover,.tool-button:hover{background:#eff5f2}.tool-button.active{background:#e8f5ec;color:var(--green)}.tool-button strong{color:var(--green)}.song-tools{display:flex;align-items:center;gap:4px}.text-tool{min-width:46px;justify-content:center}.danger-tool{color:#b93838}.tone-popover{display:grid;grid-template-columns:42px 92px 42px;min-width:190px}.tone-popover button{justify-content:center;font-size:1.05rem}.tone-popover .tone-value{font-size:.78rem}.song-sheet{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 18px 50px #07264612;padding:clamp(28px,6vw,70px);min-height:70vh}.song-heading{display:flex;justify-content:space-between;align-items:start;gap:24px;padding-bottom:28px;margin-bottom:32px;border-bottom:1px solid var(--line)}.song-heading h1{margin:8px 0 5px;font-size:clamp(2rem,4.2vw,3.7rem);line-height:1.02;letter-spacing:-.045em}.song-heading p{margin:0;color:var(--muted);font-size:1.05rem}.key-card{width:82px;min-width:82px;height:82px;border-radius:20px;background:linear-gradient(145deg,var(--navy),var(--navy-2));color:#fff;display:grid;place-items:center;align-content:center;gap:2px}.key-card span{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;opacity:.72}.key-card strong{font-size:1.5rem}.song-chart{max-width:100%;font-family:Courier New,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:calc(1.15rem * var(--font-scale));line-height:1.72;overflow-x:hidden;color:#16273a}.chart-line{min-height:1.72em;max-width:100%;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal}.chord{color:var(--orange);font-weight:900}.lyric{color:#172a3e;font-weight:500}.speed-dock{position:fixed;z-index:35;bottom:20px;left:50%;transform:translate(-50%);width:min(700px,calc(100vw - 32px));min-height:76px;background:#062b55f5;color:#fff;border-radius:20px;box-shadow:0 18px 45px #062b5547;display:flex;align-items:center;gap:18px;padding:13px 18px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.dock-play{width:48px;height:48px;min-width:48px;border:0;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--navy)}.dock-play.active{background:var(--yellow)}.speed-control{width:100%}.speed-label{display:flex;justify-content:space-between;gap:16px;margin-bottom:9px;font-size:.78rem;color:#ffffffc2}.speed-label strong{color:#fff}.speed-control input[type=range]{appearance:none;height:5px;padding:0;border:0;border-radius:999px;background:linear-gradient(to right,var(--yellow) 0 var(--range-progress),rgba(255,255,255,.2) var(--range-progress) 100%);box-shadow:none}.speed-control input[type=range]::-webkit-slider-thumb{appearance:none;width:19px;height:19px;border-radius:50%;background:var(--yellow);border:3px solid white;box-shadow:0 3px 9px #00000040}.speed-control input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--yellow);border:3px solid white}.modal-backdrop{position:fixed;inset:0;z-index:100;background:#051b3494;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px}.modal{width:min(1080px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:24px;box-shadow:0 30px 90px #051b3459}.compact-modal{width:min(520px,100%)}.modal-header{position:sticky;top:0;z-index:2;background:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 28px 18px;border-bottom:1px solid var(--line)}.modal-header h2{margin:5px 0 0;letter-spacing:-.025em}.icon-button{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:12px;background:#edf2f4;color:var(--navy)}.editor-form,.stack-form{padding:24px 28px 28px}.editor-fields{display:grid;grid-template-columns:1fr 1fr 130px;gap:14px}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.content-field textarea{min-height:470px;font-family:Courier New,monospace;line-height:1.55}.field-label{font-size:.84rem;font-weight:700;color:#29445f}.preview-panel{min-width:0;display:grid;gap:8px}.preview-scroll{border:1px solid #d5e0e5;border-radius:12px;min-height:470px;max-height:470px;overflow:auto;padding:18px;background:#fbfcfc}.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.form-error,.form-success{margin-top:16px;border-radius:11px;padding:12px 14px;font-size:.86rem;font-weight:700}.form-error{color:#9c2f2f;background:#fff0f0;border:1px solid #f2cccc}.form-success{color:#146a36;background:#eaf7ee;border:1px solid #cbe9d5;display:flex;align-items:center;gap:8px}.toast{position:fixed;z-index:120;right:22px;bottom:22px;max-width:min(430px,calc(100vw - 44px));border:0;border-radius:13px;padding:14px 18px;box-shadow:0 14px 40px #07264638;font-weight:700;text-align:left}.error-toast{background:#922f35;color:#fff}@media(max-width:980px){.topbar{grid-template-columns:160px 1fr auto;padding:0 3vw;gap:14px}.brand img{width:150px}.profile-copy,.profile-button>svg{display:none}.hero-mark{display:none}.editor-fields{grid-template-columns:1fr 1fr}.key-field{grid-column:1 / -1}.editor-grid{grid-template-columns:1fr}}@media(max-width:720px){:root{--topbar-height: 144px}.login-card{grid-template-columns:1fr;padding:26px;border-radius:22px}.login-logo{height:100px;width:100%}.topbar{height:auto;min-height:78px;grid-template-columns:1fr auto;padding:10px 16px}.brand img{width:140px;height:48px}.search-wrap{grid-column:1 / -1;grid-row:2;height:46px}.header-actions{grid-column:2;grid-row:1}.home-page,.song-page{width:min(94vw,1220px);padding-top:24px}.hero{padding:30px 26px;min-height:230px;border-radius:22px}.hero h1{font-size:2rem}.section-heading{align-items:start}.result-card{grid-template-columns:1fr auto;gap:10px}.match-badge{grid-column:1 / -1;width:fit-content}.result-excerpt{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.song-toolbar{top:calc(var(--topbar-height) + 8px);overflow-x:auto;padding:8px}.back-button{padding:0 9px}.song-tools{min-width:max-content}.desktop-edit{display:none}.song-sheet{padding:28px 20px 150px;border-radius:20px}.song-heading{align-items:start}.song-chart{font-size:calc(1rem * var(--font-scale));line-height:1.65}.chart-line{min-height:1.65em;white-space:pre-wrap;overflow-wrap:anywhere}.speed-dock{bottom:10px;border-radius:17px}.editor-fields{grid-template-columns:1fr}.key-field{grid-column:auto}.modal-backdrop{padding:0}.modal{max-height:100vh;height:100vh;border-radius:0}.modal-header,.editor-form,.stack-form{padding-left:18px;padding-right:18px}}@media(max-width:430px){.add-button{width:42px;height:42px}.avatar{width:38px;height:38px}.profile-button{padding:0}.song-toolbar{top:calc(var(--topbar-height) + 6px)}.tool-button{padding:0 9px}.speed-label span{max-width:180px}}.app-shell.song-open{padding-top:0}.song-open .topbar{position:relative;inset:auto}.song-open .song-toolbar{position:relative;top:auto}.chord-lyric-row{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:1ch;row-gap:.35em;min-height:3.05em;margin:0 0 .24em}.chord-word{display:inline-grid;grid-template-rows:1.25em 1.45em;min-width:var(--word-width);vertical-align:top}.chord-layer{position:relative;display:block;height:1.25em;min-width:var(--word-width);white-space:nowrap}.chord-layer .chord{position:absolute;top:0;left:var(--chord-offset);line-height:1.2;white-space:nowrap}.lyric-word{display:block;line-height:1.45;white-space:nowrap}.chord-only-line{display:flex;flex-wrap:wrap;gap:0 2ch}@media(max-width:720px){.chord-lyric-row{column-gap:.8ch;row-gap:.26em}.chord-word{grid-template-rows:1.18em 1.38em}.chord-layer{height:1.18em}.lyric-word{line-height:1.38}}