:root{--teal:#138d95;--teal-dark:#087078;--purple:#740ba5;--ink:#20252d;--muted:#66717f;--line:#dce2e7;--paper:#fff;--bg:#f4f6f7;--danger:#b42318;--shadow:0 8px 30px rgba(29,44,52,.08)}
*{box-sizing:border-box}body{margin:0;font-family:"Noto Sans JP","Yu Gothic",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}[hidden]{display:none!important}
.site-header,.sub-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px max(24px,calc((100% - 1180px)/2));background:var(--paper);border-bottom:1px solid var(--line)}.site-header h1{margin:0;font-size:clamp(2rem,5vw,3.5rem);line-height:1;color:var(--teal)}.sub-header{padding-top:17px;padding-bottom:17px}.brand{font-size:1.35rem;font-weight:800;color:var(--teal);text-decoration:none}.back-link,.text-link{color:var(--purple);font-weight:700;text-decoration:none}.login-area{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}.user-info{color:var(--muted);font-size:.9rem}
.page-shell{width:min(1180px,calc(100% - 32px));margin:32px auto 64px}.page-shell.narrow{width:min(960px,calc(100% - 32px))}.page-title{margin:28px 0}.page-title h1{margin:0;color:var(--teal);font-size:clamp(1.8rem,4vw,2.6rem)}.page-title p:last-child{margin:.25rem 0 0;color:var(--muted)}.eyebrow{margin:0 0 4px;color:var(--purple);font-size:.72rem;font-weight:800;letter-spacing:.16em}
.quick-links{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:30px}.quick-links a{display:flex;align-items:center;gap:10px;min-height:72px;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--purple);border-radius:12px;color:var(--ink);font-weight:750;text-decoration:none;box-shadow:var(--shadow);transition:.18s}.quick-links a:hover{transform:translateY(-2px);border-top-color:var(--teal)}.quick-links span{font-size:1.35rem;color:var(--teal)}
.quick-links .archive-link{grid-column:1/-1;justify-content:center;min-height:58px;border-top-color:#e62117}.youtube-link{display:inline-block;padding:6px 10px;border-radius:6px;background:#e62117;color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}.youtube-link:hover{background:#bd1b13}
.field-note{display:block;margin-top:2px;color:var(--muted);font-size:.75rem;font-weight:500}
.panel{margin:22px 0;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.section-heading h2{margin:0;font-size:1.35rem}.count{padding:3px 10px;border-radius:999px;background:#e6f5f5;color:var(--teal-dark);font-size:.85rem;font-weight:700}.notice,.message{padding:12px 16px;border-radius:8px}.notice{background:#fff5df;border-left:4px solid #d89b22}.notice.loading{background:#edf6f7;border-left-color:var(--teal);color:var(--teal-dark)}.message:empty{display:none}.message.success{background:#e8f7f1;color:#176b4c}.message.error{background:#fff0ef;color:var(--danger)}
.toolbar{display:flex;justify-content:flex-end;gap:14px;margin-bottom:14px}.toolbar label{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}input,select,textarea{width:100%;margin-top:6px;padding:10px 12px;border:1px solid #bdc7ce;border-radius:7px;background:#fff;color:var(--ink)}input:focus,select:focus,textarea:focus{outline:3px solid rgba(19,141,149,.17);border-color:var(--teal)}textarea{resize:vertical}.toolbar input,.toolbar select{width:auto;min-width:190px;margin:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}.form-grid label{font-weight:700}.form-grid .full{grid-column:1/-1}.required{margin-left:7px;color:var(--danger);font-size:.72rem}.time-range{display:grid;grid-template-columns:1fr 1fr;gap:12px}.time-inputs{display:flex;align-items:center;gap:6px}.time-inputs input{text-align:center}.form-actions{display:flex;gap:10px;margin-top:22px}
button{border:0;border-radius:7px;padding:10px 18px;font-weight:750;cursor:pointer}.primary{background:var(--purple);color:#fff}.secondary{background:#e9edef;color:var(--ink)}.danger{background:#fee4e2;color:var(--danger)}button:hover{filter:brightness(.94)}button:disabled{cursor:not-allowed;opacity:.48}.small{padding:6px 10px;font-size:.82rem}.row-actions{display:flex;justify-content:center;gap:6px;white-space:nowrap}
.table-wrap{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:680px}th{padding:10px 12px;background:#e4f2f3;color:var(--teal-dark);font-size:.82rem;text-align:left;white-space:nowrap}td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}tbody tr:hover{background:#fafbfb}.empty{text-align:center!important;color:var(--muted);padding:28px}.memo-cell{min-width:150px;white-space:pre-wrap}.subtle{color:var(--muted);font-size:.85rem}
@media(max-width:760px){.site-header{align-items:flex-start;flex-direction:column}.login-area{justify-content:flex-start}.quick-links{grid-template-columns:1fr 1fr}.panel{padding:17px}.toolbar{align-items:stretch;flex-direction:column}.toolbar label{justify-content:space-between}.toolbar input,.toolbar select{width:65%;min-width:0}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.time-range{grid-column:1/-1}.page-shell{margin-top:20px}}
@media(max-width:430px){.quick-links{grid-template-columns:1fr}.time-range{grid-template-columns:1fr}.form-actions{flex-direction:column}.form-actions button{width:100%}}

/* Single-page navigation and compact multi-song display */
.site-header{position:sticky;top:0;z-index:20;padding-top:16px;padding-bottom:16px}.app-nav{display:flex;align-items:center;gap:4px}.app-nav a{padding:7px 10px;border-radius:7px;color:var(--muted);font-size:.9rem;font-weight:700;text-decoration:none}.app-nav a:hover,.app-nav a.active{background:#e6f5f5;color:var(--teal-dark)}.app-view[hidden]{display:none}.song-picker{margin:0;padding:0;border:0;min-width:0}.song-picker legend{font-weight:700}.check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:150px;margin-top:6px;padding:9px;border:1px solid #bdc7ce;border-radius:7px;overflow-y:auto}.check-list label{display:flex;align-items:center;gap:7px;padding:5px;border-radius:5px;font-weight:500}.check-list label:hover{background:#edf6f7}.check-list input{width:auto;margin:0}.check-list small{color:var(--muted)}.song-popover{position:relative;display:inline-block}.song-summary{padding:4px 9px;background:#e6f5f5;color:var(--teal-dark);font-size:.82rem}.song-detail{display:none;position:absolute;z-index:30;left:0;top:calc(100% + 5px);min-width:190px;max-width:280px;padding:9px 12px;background:#20252d;color:#fff;border-radius:7px;box-shadow:var(--shadow);white-space:normal}.song-detail span{display:block;padding:2px 0}.song-popover:hover .song-detail,.song-popover:focus-within .song-detail,.song-summary[aria-expanded="true"]+.song-detail{display:block}
@media(max-width:900px){.site-header{position:static;flex-wrap:wrap}.app-nav{order:3;width:100%;justify-content:space-between;overflow-x:auto}.app-nav a{white-space:nowrap}.login-area{margin-left:auto}}
@media(max-width:560px){.site-header{gap:10px}.user-info{display:none}.app-nav a{padding:7px 6px;font-size:.8rem}.check-list{grid-template-columns:1fr}.song-detail{left:auto;right:0}}
.public-mode .member-only,.public-mode .text-link{display:none!important}.demo-label{display:inline-block;margin:.5rem 0 0;padding:4px 10px;border-radius:999px;background:#fff5df;color:#8a5a00;font-size:.78rem;font-weight:700}

/* Excel-style column filters */
.filter-hint{margin:-8px 0 12px;color:var(--muted);font-size:.82rem}.filter-table th{position:relative}.filter-button{margin-left:4px;padding:2px 5px;background:transparent;color:var(--teal-dark);font-size:.7rem;vertical-align:middle}.filter-button:hover,.filter-button.sorted{background:rgba(255,255,255,.65)}.filter-button.filtered{background:var(--purple);color:#fff}.column-filter-menu{position:absolute;z-index:100;width:270px;padding:10px;background:#fff;border:1px solid #aeb9c0;border-radius:8px;box-shadow:0 12px 35px rgba(20,31,38,.24)}.filter-sort{display:grid;grid-template-columns:1fr 1fr;gap:6px}.filter-sort button,.filter-clear{padding:7px;background:#edf2f3;color:var(--ink);font-size:.82rem}.filter-search{margin:8px 0;padding:7px 9px}.filter-values{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:5px}.filter-values label{display:flex;align-items:center;gap:7px;padding:5px 8px;font-size:.84rem;font-weight:500}.filter-values label:hover{background:#edf6f7}.filter-values input{width:auto;margin:0}.filter-clear{width:100%;margin-top:8px;color:var(--purple)}