:root{
  --cn-bg:#0c0c0c;
  --cn-panel:#141414;
  --cn-panel-hover:#181818;
  --cn-line:#292929;
  --cn-text:#f5f5f5;
  --cn-muted:#8d8d8d;
  --cn-accent:#ffffff;
  --cn-accent-text:#111111;
  --cn-radius:14px;
  --cn-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cn-bg);color:var(--cn-text);font-family:var(--cn-font)}
button,input,select,textarea{font:inherit}
.cn-shell{max-width:1450px;margin:0 auto;padding:42px 28px 120px}
.cn-kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cn-muted);margin-bottom:12px;font-weight:700}
.cn-hero{display:flex;justify-content:space-between;gap:32px;align-items:flex-end;margin-bottom:30px}
.cn-hero h1{margin:0;font-size:clamp(36px,6vw,74px);letter-spacing:-.045em;line-height:.96;max-width:800px}
.cn-hero p{max-width:520px;margin:0 0 6px;color:var(--cn-muted);line-height:1.55}
.cn-search{position:relative;margin:30px 0 16px}
.cn-search input{width:100%;background:var(--cn-panel);border:1px solid var(--cn-line);color:var(--cn-text);padding:18px 20px 18px 50px;border-radius:999px;outline:none}
.cn-search input:focus{border-color:#666}
.cn-search span{position:absolute;left:19px;top:50%;transform:translateY(-50%);color:var(--cn-muted)}
.cn-filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:18px}
.cn-filter{background:var(--cn-panel);color:var(--cn-text);border:1px solid var(--cn-line);border-radius:999px;padding:12px 14px;min-width:0}
.cn-library-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 6px 12px}
.cn-count{color:var(--cn-muted);font-size:12px}
.cn-favorites-filter{border:1px solid var(--cn-line);background:transparent;color:#cfcfcf;border-radius:999px;padding:8px 13px;cursor:pointer;font-size:12px}
.cn-favorites-filter.active{background:#fff;color:#111;border-color:#fff}
.cn-favorites-filter span{opacity:.7;margin-left:4px}
.cn-list{border-top:1px solid var(--cn-line)}
.cn-track{
  display:grid;
  grid-template-columns:64px 50px 230px minmax(260px,1fr) 62px 74px 42px 116px;
  gap:13px;
  align-items:center;
  padding:15px 10px;
  border-bottom:1px solid var(--cn-line);
  transition:.18s ease;
}
.cn-track:hover{background:var(--cn-panel-hover)}
.cn-cover{
  width:58px;height:58px;border-radius:7px;overflow:hidden;background:#1d1d1d;
  display:grid;place-items:center;border:1px solid #282828;color:#666;font-size:10px;
}
.cn-cover img{width:100%;height:100%;object-fit:cover;display:block}
.cn-cover-placeholder{
  width:100%;height:100%;display:grid;place-items:center;
  background:linear-gradient(135deg,#232323,#121212);font-size:18px;font-weight:800;color:#5c5c5c
}
.cn-play{width:44px;height:44px;border-radius:50%;border:1px solid #3c3c3c;background:#222;color:white;cursor:pointer;display:grid;place-items:center;transition:.18s ease}
.cn-play:hover{transform:scale(1.04);background:#2a2a2a}
.cn-title{font-size:15px;font-weight:700;line-height:1.25}
.cn-artist{color:var(--cn-muted);font-size:12px;margin-top:5px}
.cn-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.cn-tag{color:#aaa;border:1px solid #333;border-radius:999px;font-size:10px;padding:4px 7px}
.cn-wave{position:relative;height:58px;cursor:pointer;overflow:hidden;border-radius:8px}
.cn-wave svg{position:absolute;inset:0;width:100%;height:100%}
.cn-wave-base rect{fill:#3b3b3b}
.cn-wave-played rect{fill:#d7d7d7}
.cn-time,.cn-bpm{font-size:12px;color:#cfcfcf;white-space:nowrap}
.cn-favorite{
  border:0;background:transparent;color:#a8a8a8;font-size:25px;line-height:1;cursor:pointer;
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;transition:.15s ease
}
.cn-favorite:hover{background:#252525;color:#fff}
.cn-favorite.active{color:#fff}
.cn-license{display:inline-flex;justify-content:center;align-items:center;min-height:42px;border-radius:8px;padding:0 15px;background:var(--cn-accent);color:var(--cn-accent-text);text-decoration:none;font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.cn-license:hover{opacity:.84}
.cn-license.disabled{opacity:.35;pointer-events:none}
.cn-empty{padding:70px 20px;text-align:center;color:var(--cn-muted)}
.cn-sticky{
  position:fixed;left:50%;transform:translateX(-50%);bottom:18px;width:min(1160px,calc(100% - 28px));
  background:rgba(20,20,20,.96);backdrop-filter:blur(18px);border:1px solid #333;border-radius:14px;
  padding:10px 14px;display:none;grid-template-columns:46px 42px minmax(150px,220px) minmax(180px,1fr) 42px auto;
  gap:12px;align-items:center;z-index:9999;box-shadow:0 20px 60px rgba(0,0,0,.45)
}
.cn-sticky.show{display:grid}
.cn-sticky-cover{width:44px;height:44px;border-radius:6px;background:#222;overflow:hidden;display:grid;place-items:center}
.cn-sticky-cover img{width:100%;height:100%;object-fit:cover}
.cn-sticky-meta strong{display:block;font-size:13px}
.cn-sticky-meta span{display:block;color:var(--cn-muted);font-size:11px;margin-top:3px}
.cn-sticky-progress{display:grid;grid-template-columns:35px 1fr 35px;align-items:center;gap:8px;font-size:10px;color:var(--cn-muted)}
.cn-sticky-progress input{width:100%}
.cn-sticky-favorite{font-size:23px}
.cn-admin-shell{max-width:1250px;margin:0 auto;padding:32px 24px 80px}
.cn-admin-card{background:#fff;color:#161616;border:1px solid #dedede;border-radius:14px;padding:22px;margin-bottom:18px}
.cn-admin-card h1,.cn-admin-card h2{margin-top:0}
.cn-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cn-field{display:flex;flex-direction:column;gap:6px}
.cn-field.full{grid-column:1/-1}
.cn-field label{font-size:12px;font-weight:700;color:#555}
.cn-field input,.cn-field select,.cn-field textarea{width:100%;padding:11px 12px;border:1px solid #ccc;border-radius:8px;background:#fff;color:#111}
.cn-field textarea{min-height:82px;resize:vertical}
.cn-btn{border:0;border-radius:8px;padding:11px 15px;font-weight:800;cursor:pointer;background:#111;color:#fff}
.cn-btn.secondary{background:#ececec;color:#111}
.cn-btn.danger{background:#9c1f1f}
.cn-upload-drop{border:2px dashed #bbb;border-radius:12px;padding:34px;text-align:center;background:#fafafa;cursor:pointer}
.cn-upload-drop.drag{border-color:#111;background:#f0f0f0}
.cn-queue{display:grid;gap:12px;margin-top:16px}
.cn-queue-item{border:1px solid #ddd;border-radius:10px;padding:14px;background:#fff}
.cn-queue-heading{display:flex;align-items:center;gap:12px}
.cn-queue-cover{width:58px;height:58px;border-radius:7px;background:#eee;overflow:hidden;display:grid;place-items:center;color:#888;font-size:10px;border:1px solid #ddd}
.cn-queue-cover img{width:100%;height:100%;object-fit:cover}
.cn-cover-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}
.cn-existing{width:100%;border-collapse:collapse}
.cn-existing th,.cn-existing td{padding:10px;border-bottom:1px solid #eee;text-align:left;font-size:12px}
.cn-existing-cover{width:38px;height:38px;border-radius:5px;object-fit:cover;background:#eee}
.cn-edit-cover-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.cn-admin-cover-preview{width:76px;height:76px;border-radius:8px;border:1px solid #ddd;background:#f3f3f3;display:grid;place-items:center;color:#888;font-size:11px;overflow:hidden}
.cn-admin-cover-preview img{width:100%;height:100%;object-fit:cover}
.cn-login{max-width:420px;margin:80px auto}
.cn-status{font-size:12px;color:#666;margin-top:8px}
.cn-status.error{color:#9c1f1f}
.cn-status.ok{color:#1f6b37}

@media(max-width:1180px){
  .cn-track{grid-template-columns:58px 46px 210px minmax(220px,1fr) 60px 42px 108px}
  .cn-bpm{display:none}
}
@media(max-width:820px){
  .cn-shell{padding:28px 16px 120px}
  .cn-hero{display:block}.cn-hero p{margin-top:18px}
  .cn-filters{grid-template-columns:1fr 1fr}.cn-filter:last-child{grid-column:1/-1}
  .cn-track{
    grid-template-columns:58px 44px 1fr 42px;
    gap:10px;padding:15px 4px
  }
  .cn-cover{grid-column:1;grid-row:1/3}
  .cn-play{grid-column:2;grid-row:1}
  .cn-track-info{grid-column:3;grid-row:1/3}
  .cn-favorite{grid-column:4;grid-row:1}
  .cn-wave{grid-column:2/5;grid-row:3;height:48px}
  .cn-time{grid-column:2;grid-row:4}
  .cn-bpm{display:block;grid-column:3;grid-row:4}
  .cn-license{grid-column:4;grid-row:4}
  .cn-sticky{grid-template-columns:42px 40px 1fr 42px auto}
  .cn-sticky-progress{grid-column:1/-1;grid-row:2}
  .cn-form-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .cn-library-toolbar{align-items:flex-start}
  .cn-track{grid-template-columns:54px 42px 1fr 38px}
  .cn-cover{width:54px;height:54px}
  .cn-license{padding:0 10px;min-height:38px}
  .cn-sticky{grid-template-columns:38px 1fr 38px auto}
  .cn-sticky-cover{display:none}
  .cn-sticky .cn-play{grid-column:1}
  .cn-sticky-meta{grid-column:2}
  .cn-sticky-favorite{grid-column:3}
  .cn-sticky-license{grid-column:4}
}