/* Nová vizuální identita. Obsah, kontrast a ovládání mají přednost před dekoracemi. */
:root { --accent:#7444c6; --accent-dark:#552a9a; --accent-light:#f0e9fb; --background:#f8f7fa; --border:#e7e3ed; --radius:20px; }
body { background:var(--background); }
.site-header { background:#fbfafddd; border-bottom-color:var(--border); }
.brand img { object-fit:contain; width:48px; height:48px; }
.header-inner { gap:18px; }
.main-nav { background:#eeebf3; }
.nav-link { padding-inline:13px; }
.hero-art { background:#eeebf5; border-color:#e4dced; box-shadow:none; }
.hero-mascot { width:290px; height:290px; object-fit:contain; }
.art-circle { background:#e7dbf8; }
.art-tag { box-shadow:0 8px 20px #4a2e7210; }
.catalog-page .page-heading::after { background-image:url('../assets/logo.webp'); width:110px; height:135px; }
.worm-watermark { background:url('../assets/long-worm.svg') calc(100% + 115px) 24vh / 380px auto no-repeat; opacity:.085; }
.worm-watermark::after { content:''; position:absolute; top:calc(24vh - 50px); right:-22px; width:180px; height:180px; background:url('../assets/worm-head.webp') center/contain no-repeat; transform:rotate(-12deg); }
.catalog-song { box-shadow:0 3px 12px #36204f05; }
.song-category-label { border-radius:20px; font-size:.68rem; font-weight:650; letter-spacing:.02em; }
.song-body { padding:22px; }
.catalog-display-options { display:flex; flex-wrap:wrap; gap:18px; align-items:end; margin-bottom:12px; }
.catalog-display-options label,.stats-options label { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.82rem; }
select { background:#fff; border:1px solid var(--border); border-radius:10px; min-height:44px; padding:8px 12px; max-width:100%; }
.pagination { display:flex; gap:7px; align-items:center; justify-content:flex-end; margin-block:18px; }
.page-button,.icon-button { min-width:44px; min-height:44px; border:1px solid var(--border); border-radius:10px; background:white; color:var(--accent-dark); font-size:.9rem; }
.page-button[aria-current=page] { background:var(--accent); color:#fff; border-color:var(--accent); }
.page-button:disabled { cursor:default; opacity:.35; }
.page-ellipsis { color:var(--muted); }
.playlist-add { margin-left:auto; width:44px; height:44px; border:1px solid var(--border); border-radius:12px; background:white; color:var(--accent); font-size:1.5rem; }
.playlist-add:hover { background:var(--accent-light); }
.song-back { display:inline-flex; align-items:center; padding:12px 20px; min-height:50px; border:1px solid #baa2da; border-radius:12px; color:var(--accent-dark); font-weight:700; font-size:.95rem; background:var(--accent-light); text-decoration:none; }
.back-to-top { position:fixed; right:18px; bottom:calc(var(--player-space,0px) + 20px); z-index:25; width:46px; height:46px; border:1px solid #cebae5; border-radius:50%; background:#fff; color:var(--accent-dark); box-shadow:0 6px 18px #44246618; font-size:1.6rem; }
.worm-scroll { width:54px; right:0; background:transparent; top:10vh; bottom:max(90px,var(--player-space,0px)); }
.worm-thumb { width:54px; height:54px; background:none; box-shadow:none; z-index:2; }
.worm-thumb img { width:54px; height:54px; object-fit:contain; filter:drop-shadow(0 2px 2px #49206620); }
.scroll-tail { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
#scroll-notes { position:absolute; inset:0; pointer-events:none; }
#scroll-notes span { position:absolute; left:16px; color:#9988b1; font-size:24px; line-height:1; transition:opacity .18s,transform .18s; }
#scroll-notes .is-eaten { opacity:0; transform:scale(.1); }
.worm-thumb.is-munching img { animation:munch .3s; }
@keyframes munch { 40% { transform:scale(1.1,.9) rotate(7deg); } 70% {transform:scale(.95,1.05);} }
.worm-reaction { position:fixed; z-index:60; width:118px; pointer-events:none; text-align:center; }
.reaction-sprite { display:block; height:105px; background:url('../assets/worm-reactions.webp') 0 center/200% 100% no-repeat; }
.reaction-favorite .reaction-sprite { background-position:100% center; filter:drop-shadow(0 0 12px #f1a6c966); }
.reaction-learned .reaction-sprite { animation:laugh .18s 5 alternate; }
@keyframes laugh { to {transform:translateY(-3px) rotate(4deg);} }
.reaction-caption { display:inline-block; padding:3px 8px; border-radius:9px; background:white; box-shadow:0 2px 10px #40206015; font-size:.67rem; color:var(--accent-dark); }
dialog { border:1px solid var(--border); border-radius:22px; padding:30px; width:min(480px,calc(100% - 32px)); max-height:85vh; overflow:auto; color:var(--ink); background:#fff; box-shadow:0 24px 100px #22133435; }
dialog::backdrop { background:#21152f66; backdrop-filter:blur(3px); }
.dialog-close { display:block; margin-left:auto; margin-bottom:12px; }
.dialog-content h2 { font-size:1.4rem; }
.dialog-content p { margin-block:16px; }
.link-button { display:block; border:none; background:none; color:var(--accent-dark); text-decoration:underline; font-size:.78rem; margin-top:16px; padding:8px 0; }
.study-analytics { border:1px solid var(--border); border-radius:22px; background:white; padding:26px; margin:28px 0; }
.study-analytics .section-heading { margin:0 0 20px; align-items:center; }
.stats-options { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-block:20px; }
.stats-options .button { min-height:44px; padding:8px 16px; }
.stats-message { color:var(--muted); font-size:.82rem; margin-bottom:20px; }
.listening-totals,.admin-totals { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:20px 0; }
.listening-totals>div,.admin-totals>div { border-radius:14px; background:#f6f3fa; padding:16px; display:flex; flex-direction:column; }
.listening-totals strong,.admin-totals strong { color:var(--accent-dark); font-size:1.7rem; font-variant-numeric:tabular-nums; }
.listening-totals span,.admin-totals span { color:var(--muted); font-size:.8rem; }
.admin-totals { grid-template-columns:repeat(5,1fr); }
.charts-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:28px; }
.listening-chart { min-width:0; margin:0; }
.listening-chart figcaption { font-size:.9rem; font-weight:650; margin-bottom:20px; }
.daily-bars { height:150px; display:flex; align-items:end; gap:4px; border-bottom:1px solid var(--border); background:repeating-linear-gradient(to top,transparent 0 49px,#e9e4ee 49px 50px); }
.daily-column { height:100%; flex:1; display:flex; align-items:end; }
.daily-bar { display:block; width:100%; background:linear-gradient(#ba91ed,#7644bd); border-radius:4px 4px 0 0; }
.chart-axis { display:flex; justify-content:space-between; font-size:.68rem; color:var(--muted); margin-top:7px; }
.chart-data { margin-top:14px; font-size:.78rem; }
.chart-data summary { cursor:pointer; color:var(--accent-dark); }
.chart-data table { margin-top:12px; width:100%; }
.chart-data td,.chart-data th { padding:5px; text-align:left; }
.top-track { margin-bottom:16px; }
.top-track-label { display:flex; justify-content:space-between; gap:8px; font-size:.78rem; margin-bottom:7px; }
.top-track-label strong { white-space:nowrap; font-weight:600; }
.top-track-meter { height:7px; border-radius:6px; background:#eee9f3; overflow:hidden; }
.top-track-meter span { display:block; height:100%; border-radius:6px; background:#9771ca; }
.chart-empty { grid-column:1/-1; padding:26px; text-align:center; color:var(--muted); background:#faf9fc; border:1px dashed var(--border); border-radius:14px; }
.table-scroll { overflow:auto; margin-top:28px; border:1px solid var(--border); border-radius:16px; }
.admin-table { border-collapse:collapse; width:100%; text-align:left; font-size:.86rem; background:white; }
.admin-table th,.admin-table td { padding:15px; border-bottom:1px solid var(--border); }
.admin-table th { background:#f0ebf7; white-space:nowrap; }
.playlist-create,.playlist-rename,.playlist-add-form { display:flex; gap:12px; align-items:end; flex-wrap:wrap; margin:22px 0; }
.playlist-create label { display:flex; flex-direction:column; gap:8px; font-size:.85rem; }
.playlist-create input,.playlist-rename input { min-height:46px; border:1px solid var(--border); border-radius:10px; padding:10px 12px; min-width:0; }
.playlist-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:22px; margin-top:28px; }
.playlist-list-item { display:block; width:100%; text-align:left; padding:16px; min-height:48px; border:1px solid var(--border); border-radius:12px; background:#fff; margin-bottom:8px; overflow-wrap:anywhere; }
.playlist-list-item[aria-pressed=true] { background:var(--accent-light); border-color:#b498d9; color:var(--accent-dark); }
.playlist-settings { display:grid; gap:12px; margin-block:22px; }
.playlist-settings label { display:flex; align-items:center; gap:10px; font-size:.85rem; }
.playlist-settings input { width:19px; height:19px; accent-color:var(--accent); }
.playlist-tracks { list-style:none; padding:0; margin:24px 0; }
.playlist-tracks li { display:flex; align-items:center; gap:6px; padding-block:10px; border-bottom:1px solid var(--border); }
.playlist-tracks a { margin-right:auto; text-decoration:none; font-size:.9rem; }
.playlist-tracks .icon-button { flex:0 0 40px; min-width:40px; }
.delete-playlist { color:#934c61; background:transparent; border:0; padding:12px 0; text-decoration:underline; }
#playlist-editor h2 { overflow-wrap:anywhere; }
.player-queue { grid-column:1/-1; display:flex; align-items:center; gap:10px; padding-top:10px; border-top:1px solid var(--border); font-size:.78rem; }
#queue-caption { margin-right:auto; overflow-wrap:anywhere; }
.player-queue label { display:flex; align-items:center; gap:6px; }
.player-queue input { accent-color:var(--accent); }
.player-queue .icon-button { min-width:36px; min-height:36px; }
@media(max-width:900px){.admin-totals{grid-template-columns:repeat(3,1fr);} .playlist-layout{grid-template-columns:190px minmax(0,1fr);} .charts-grid{grid-template-columns:1fr;}}
@media(max-width:760px){.main-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;} .main-nav .nav-link{padding:9px 5px;font-size:.78rem;} .nav-link:last-child{grid-column:span 2;} .site-footer{gap:28px;}.hero-mascot{width:245px;height:245px;} .account-avatar{width:22px;height:22px;margin-left:4px;} .playlist-layout{grid-template-columns:1fr;} #playlist-list{display:flex;gap:8px;overflow:auto;} .playlist-list-item{min-width:160px;width:auto;flex-shrink:0;max-width:240px;} .study-analytics{padding:20px;} .study-analytics .section-heading{display:block;} .back-to-top{right:12px;bottom:calc(var(--player-space,0px) + 12px);}}
@media(max-width:600px){.catalog-display-options{display:grid;grid-template-columns:minmax(0,1fr) 125px;gap:10px;} .catalog-display-options label{display:flex;flex-direction:column;align-items:stretch;gap:5px;font-size:.72rem;} .catalog-display-options select{width:100%;min-width:0;font-size:.85rem;} .pagination{justify-content:center;gap:5px;} .page-button{min-width:40px;} .catalog-page .page-heading{padding-right:70px;} .catalog-page .page-heading::after{width:72px;height:95px;right:0;} .worm-watermark{background-size:300px;background-position:calc(100% + 170px) 26vh;opacity:.06;} .worm-watermark::after{right:-75px;width:150px;height:150px;} .playlist-create input,.playlist-rename input{width:100%;} .playlist-create label{width:100%;} .playlist-rename{display:grid;grid-template-columns:minmax(0,1fr) auto;} .playlist-rename .button{padding-inline:12px;font-size:.8rem;} .playlist-add-form{flex-direction:column;align-items:stretch;} .playlist-tracks{margin-inline:-8px;}.admin-totals{grid-template-columns:repeat(2,1fr);} .player-queue{flex-wrap:wrap;} .player-queue label{flex-basis:100%;}.player-queue .icon-button{min-width:44px;min-height:44px;} .study-stats{grid-template-columns:repeat(3,minmax(0,1fr));}.study-stats>div{display:block;padding:13px 9px;}.study-stats span{font-size:.7rem;}}
@media(prefers-reduced-motion:reduce){#scroll-notes span{transition:none;}.reaction-sprite,.worm-thumb img{animation:none!important;}}