:root{--main-bg:#fff;--main-color:#22303a;--alt-bg:#f4f7f7;--line:#d7e0e0;--red:#c20f07;--blue:#047973;--blue-dark:#035c58;--warning:#a30404;--warning-bg:#fdf2f1;--success:#1d6b3a;--success-bg:#eef7f0;--radius:6px;--gap:14px;} body{background:var(--main-bg);color:var(--main-color);margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.45;} header{margin:0;padding:0;text-align:center;} header img{max-width:300px;height:auto;} header nav ul{margin:10px 0 0;padding:0;} header nav li{display:inline-block;margin:0 10px;list-style-type:none;} header nav a{color:var(--blue);font-weight:bold;text-decoration:none;} header nav a:hover{text-decoration:underline;} header nav .site-search{display:flex;justify-content:center;gap:8px;width:100%;max-width:420px;margin:12px auto 0;} header nav .site-search input[type='search']{flex:1;min-width:0;background:var(--main-bg);color:var(--main-color);border:1px solid var(--line);border-radius:var(--radius);padding:7px 10px;} header nav .site-search input[type='search']:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(4,121,115,0.14);} header nav ul.tools{margin-top:16px;font-size:0.9em;} header nav ul.tools a{font-weight:normal;} header.shell .who{margin:6px 0 0;font-size:13px;color:var(--main-color);overflow-wrap:anywhere;} header.shell .who a{margin-left:12px;} header.shell .print{margin-left:12px;padding:4px 10px;font-size:12px;} header.shell nav ul.tools{margin-top:10px;} .login{max-width:420px;margin-top:40px;} .login form label{display:block;margin:0 0 14px;font-weight:600;} .login form label input{display:block;width:100%;margin:5px 0 0;} .wrap{max-width:1200px;margin:0 auto;display:block;} main{padding:0 16px 60px;} h1,h2{margin:28px 0 12px;line-height:1.25;} h1{color:#101a1e;font-size:24px;border-bottom:1px solid var(--line);padding-bottom:8px;} h2{color:var(--main-color);font-size:17px;} h4{margin:12px 0;font-size:15px;} a{color:var(--blue);} .btn{background:var(--blue);color:var(--main-bg);font-family:inherit;font-size:13px;font-weight:600;padding:8px 16px;border:1px solid var(--blue);border-radius:var(--radius);cursor:pointer;} .btn:hover{background:var(--blue-dark);border-color:var(--blue-dark);} .btn:active{transform:translateY(1px);} .btn:focus-visible{outline:2px solid var(--blue-dark);outline-offset:2px;} .btn.ghost,.a8b-table .btn{background:var(--main-bg);color:var(--blue);border-color:var(--line);padding:6px 12px;} .btn.ghost:hover,.a8b-table .btn:hover{background:var(--alt-bg);border-color:var(--blue);} .a8b-table .btn.primary,.btn.ghost.primary{background:var(--blue);color:var(--main-bg);border-color:var(--blue);} .a8b-table .btn.danger,.btn.danger{background:var(--main-bg);color:var(--warning);border-color:var(--line);} .a8b-table .btn.danger:hover,.btn.danger:hover{background:var(--warning-bg);border-color:var(--warning);} input,select,textarea,button{font-family:inherit;font-size:14px;} main input[type='text'],main input[type='password'],main input[type='email'],main input[type='search'],main input[type='date'],main input[type='number'],main select{background:var(--main-bg);color:var(--main-color);border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px;} main input[type='text']:focus,main input[type='password']:focus,main input[type='email']:focus,main input[type='search']:focus,main input[type='date']:focus,main input[type='number']:focus,main select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(4,121,115,0.14);} main input[type='checkbox']{width:auto;margin:0 6px 0 0;vertical-align:middle;} main input[type='file']{font-size:13px;} main input[type='file']::file-selector-button{background:var(--main-bg);color:var(--blue);border:1px solid var(--line);border-radius:var(--radius);padding:7px 12px;margin-right:10px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;} main input[type='file']::file-selector-button:hover{border-color:var(--blue);background:var(--alt-bg);} main form label,.formSongArtist label,.addNewArtist label{display:block;color:var(--main-color);font-size:13px;font-weight:600;margin:0 0 14px;} main form label input[type='text'],main form label input[type='password'],main form label input[type='date'],main form label input[type='number'],main form label select,.formSongArtist label input,.formSongArtist label select,.addNewArtist label input,.addNewArtist label select{display:block;width:100%;max-width:420px;margin:5px 0 0;font-weight:normal;} #entryfilters span,#freezefilters span{display:inline-block;margin:0 18px 10px 0;} #spins select[name='station']{display:block;min-width:260px;} #spins label{font-weight:600;} main form label.flag{display:inline-block;margin:0 18px 8px 0;font-weight:normal;} section.table{overflow-x:auto;} .toolbar{display:flex;gap:12px;align-items:center;margin:16px 0 0;} .toolbar input[type='search']{max-width:320px;} .empty{color:var(--main-color);font-style:italic;padding:12px 0;} .a8b-table thead th{position:sticky;top:0;z-index:1;} .subscriber h1{overflow-wrap:anywhere;} .move{font-weight:700;font-variant-numeric:tabular-nums;} .move.up{color:var(--success);} .move.down{color:var(--warning);} .move.flat{color:var(--main-color);} .new{font-size:0.85em;letter-spacing:0.03em;} .chart{width:100%;height:auto;margin:12px 0;} .chart-line{stroke:var(--blue);stroke-width:2;} .chart-dot{fill:var(--red);} .chart-title{fill:var(--main-color);font-size:14px;font-weight:600;} .chart-axis{fill:var(--main-color);font-size:11px;} ul.subnav{display:flex;gap:14px;list-style:none;margin:10px 0 0;padding:0;} ul.subnav a.here{font-weight:700;text-decoration:none;color:var(--main-color);} .print-title{display:none;} @media (max-width:600px){header.shell nav ul.lists{display:flex;gap:14px;overflow-x:auto;white-space:nowrap;padding-bottom:4px;} header.shell nav ul.lists li{margin:0;} .subscriber .a8b-table.cards thead{display:none;} .subscriber .a8b-table.cards,.subscriber .a8b-table.cards tbody,.subscriber .a8b-table.cards tr,.subscriber .a8b-table.cards td{display:block;width:auto;} .subscriber .a8b-table.cards tr{border:1px solid var(--line);border-radius:var(--radius);margin:0 0 10px;padding:6px 0;} .subscriber .a8b-table.cards td{border:none;padding:4px 10px;} .subscriber .a8b-table.cards td:empty{display:none;} .subscriber .a8b-table.cards td::before{content:attr(data-label) ':';margin-right:6px;color:var(--red);font-weight:600;}} .a8b-table{width:100%;margin:16px 0;border:1px solid var(--line);border-radius:8px;border-collapse:separate;border-spacing:0;overflow:hidden;} .a8b-table th,.a8b-table td{text-align:left;border:none;border-bottom:1px solid var(--line);} .a8b-table th{background:var(--alt-bg);color:var(--red);font-size:12px;font-weight:700;letter-spacing:0.02em;padding:12px 10px;white-space:nowrap;} .a8b-table td{background:var(--main-bg);color:var(--main-color);font-size:13px;font-weight:normal;padding:9px 10px;font-variant-numeric:tabular-nums;} .a8b-table tbody tr:nth-of-type(odd) td{background:#fbfdfd;} .a8b-table tbody tr:hover td{background:var(--alt-bg);} .a8b-table tr:last-child td{border-bottom:none;} .a8b-table th:last-child,.a8b-table td:last-child{width:1%;white-space:nowrap;} .a8b-table td a{color:var(--blue);font-weight:600;} .a8b-table td a:hover{text-decoration-style:dotted;} .a8b-table input,.a8b-table select{width:100%;min-width:70px;padding:6px 8px;font-size:13px;} .a8b-table input[type='checkbox']{width:auto;min-width:0;} .a8b-table + .paging ul{display:grid;grid-template-columns:40px 40px 40px 1fr 40px 40px 40px;gap:6px;align-items:center;text-align:center;margin:0 0 40px;padding:0;} .a8b-table + .paging ul li{list-style-type:none;} .paging button{background:var(--main-bg);color:var(--blue);border:1px solid var(--line);border-radius:var(--radius);padding:6px 0;width:100%;cursor:pointer;} .paging button:hover{background:var(--alt-bg);border-color:var(--blue);} .paging input[type='number']{width:80px;justify-self:center;text-align:center;padding:6px 4px;} .table>label:first-child{display:inline-block;width:30%;} .table>label:nth-of-type(2){display:inline-block;text-align:right;width:70%;} .table>label:first-child span{margin-right:6px;} .table>label:nth-of-type(2) input[type='search']{width:260px;max-width:60%;} #errorHandler{margin:16px 0 0;} .error,.success{font-size:15px;font-weight:600;border-radius:var(--radius);padding:10px 14px;} .error{color:var(--warning);background:var(--warning-bg);border:1px solid #f0d5d2;} .success{color:var(--success);background:var(--success-bg);border:1px solid #cfe6d6;} .error:empty,.success:empty{display:none;} .loader{margin:auto;width:40px;padding:8px;aspect-ratio:1;border-radius:50%;background:var(--blue);--_m:conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear;} @keyframes l3{to{transform:rotate(1turn);}} .grid{display:grid;} .grid.half{grid-template-columns:repeat(2,1fr);} .grid.third{grid-template-columns:repeat(3,1fr);} .grid.fourth{grid-template-columns:repeat(4,1fr);} .formSongArtist{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--alt-bg);} .formSongArtist .btn,.addNewArtist .btn{margin-top:10px;} .hide{display:none;} #album-to-songs label,#album-to-songs select,#album-to-songs button{display:block;margin:10px 0;} #artistNameInput{font-size:1.6em;font-weight:600;color:var(--main-color);width:100%;max-width:620px;padding:10px 12px;} #artistName{margin-bottom:28px;} #artistName p{margin:0 0 12px;} #artistName label{font-size:12px;} @media (prefers-reduced-motion:reduce){.loader{animation-duration:3s;}}