:root[data-heard-shell="1"]{--heard-header-height:66px}
html[data-heard-shell="1"],html[data-heard-shell="1"] body{overflow-x:clip!important}
html[data-heard-shell="1"] body{background:#08120f}
html[data-heard-shell="1"] #application{width:min(1180px,100%);padding-top:calc(var(--heard-header-height) + 14px)}
html[data-heard-shell="1"] #application>header{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(1180px,100%);box-sizing:border-box;z-index:80;margin:0;padding:10px 12px;border-bottom:1px solid #355044;background:rgba(8,18,15,.96);box-shadow:0 8px 24px #0006;backdrop-filter:blur(14px)}
html[data-heard-shell="1"] #application>header nav{position:relative;align-items:center}
html[data-heard-shell="1"] .header-listen{display:grid;place-items:center;width:50px;height:46px;min-height:46px;padding:0;border-radius:8px;border:1px solid transparent;box-shadow:none}
html[data-heard-shell="1"] .header-listen svg{width:25px;height:25px;fill:currentColor}
html[data-heard-shell="1"] .header-start{background:#2f8b58;color:#fff;border-color:#62bb82}
html[data-heard-shell="1"] .header-start:disabled{background:#183b29;color:#789487;border-color:#315440;opacity:.62}
html[data-heard-shell="1"] .header-stop{background:#4a2723;color:#d6a7a1;border-color:#70413b}
html[data-heard-shell="1"] .header-stop:not(:disabled){background:#a52e26;color:#fff;border-color:#eb6d62}
html[data-heard-shell="1"] .header-stop .stop-icon{font-size:19px;line-height:1}
html[data-heard-shell="1"] #heardDesktopSearch svg,html[data-heard-shell="1"] #heardMoreButton svg{display:block;width:21px;height:21px;margin:auto;fill:currentColor}
.heard-more-shell{position:relative;display:grid;place-items:center}
.heard-more-panel{position:absolute;top:calc(100% + 9px);right:0;z-index:1200;display:grid;gap:4px;width:210px;padding:7px;border:1px solid #496554;border-radius:12px;background:#101d17;box-shadow:0 16px 38px #000a;color:#eff9f3}
.heard-more-panel[hidden]{display:none!important}
#heardMorePanel .heard-more-action{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:9px;width:100%;min-width:0;min-height:42px;margin:0;padding:6px 9px;border:1px solid transparent;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:left;box-shadow:none;cursor:pointer}
#heardMorePanel .heard-more-action:hover{border-color:#486353;background:#1a3024}
#heardMorePanel .heard-more-action-icon{display:grid;place-items:center;width:30px;height:28px;font-size:20px;line-height:1}
#heardMorePanel .heard-more-action-icon svg{display:block;width:20px;height:20px;margin:auto;fill:currentColor}
#heardMorePanel .heard-more-action-label{overflow:hidden;font-size:12px;font-weight:750;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
html[data-heard-shell="1"] #controller{max-width:820px;margin:0 auto 12px;padding:6px 10px}
html[data-heard-shell="1"] #controller .listener-line{min-height:16px;margin:0;gap:.35rem;line-height:1.15}
html[data-heard-shell="1"] #controller #status{overflow:hidden;margin:0;font-size:12px;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
html[data-heard-shell="1"] #controller #detail{overflow:hidden;margin:0;font-size:11px;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
html[data-heard-shell="1"] #controller .progress{height:4px;margin:4px 2px 0}
html[data-heard-shell="1"] #history{width:100%;max-width:none}
html[data-heard-shell="1"] .day-group{display:block;position:relative}
html[data-heard-shell="1"] .day-group>.day-head{display:block;position:relative;top:auto;inset-inline:auto;z-index:1;width:100%;box-sizing:border-box;margin:0}
html[data-heard-shell="1"] .day-group>.day-head+.swipe-shell,html[data-heard-shell="1"] .day-group>.day-head+.row{margin-top:0}
html[data-heard-shell="1"] .swipe-shell{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:4px;align-items:stretch;overflow:visible;box-sizing:border-box;padding-right:8px;background:transparent}
html[data-heard-shell="1"] .swipe-shell>.row{grid-column:1;grid-row:1;min-width:0;transform:none!important}
html[data-heard-shell="1"] .swipe-shell>.delete-action{position:relative;inset:auto;grid-column:2;grid-row:1;align-self:center;justify-self:end;display:grid;place-items:center;width:26px;min-width:26px;height:26px;padding:0!important;border:1px solid #496555;border-radius:50%;background:transparent;color:#86a394;font-size:0!important;font-weight:400;line-height:1;opacity:.72;z-index:2;cursor:pointer}
html[data-heard-shell="1"] .swipe-shell>.delete-action::before{content:"×";font-size:17px;line-height:1;font-weight:500}
html[data-heard-shell="1"] .swipe-shell>.delete-action:hover{border-color:#b96b65;background:#351b19;color:#e3aaa5;opacity:1}
html[data-heard-shell="1"] .session,html[data-heard-shell="1"] .day-group{width:100%;max-width:none}
html[data-heard-shell="1"] .row{grid-template-columns:64px minmax(0,1fr) minmax(100px,auto);padding-left:16px;padding-right:16px}
html[data-test-theme] .heard-more-panel{border-color:var(--lab-border)!important;border-radius:var(--lab-control-radius)!important;background:var(--lab-panel)!important;color:var(--lab-text)!important;box-shadow:var(--lab-shadow)!important}
html[data-test-theme] #heardMorePanel .heard-more-action:hover{border-color:var(--lab-border)!important;background:var(--lab-panel-2)!important}
@media(max-width:720px){html[data-heard-shell="1"] #application>header{padding:8px 8px}html[data-heard-shell="1"] #application>header nav{gap:4px}html[data-heard-shell="1"] .round{width:36px;height:36px;font-size:17px}html[data-heard-shell="1"] .header-listen{width:40px;height:38px;min-height:38px}html[data-heard-shell="1"] .header-listen svg{width:21px;height:21px}html[data-heard-shell="1"] .theme-lab-trigger{padding:4px 6px;font-size:8px}html[data-heard-shell="1"] .swipe-shell{grid-template-columns:minmax(0,1fr) 24px;gap:3px;padding-right:6px}html[data-heard-shell="1"] .swipe-shell>.delete-action{width:24px;min-width:24px;height:24px}html[data-heard-shell="1"] .row{grid-template-columns:54px minmax(0,1fr) 68px;padding-left:10px;padding-right:10px}}
@media(max-width:430px){html[data-heard-shell="1"] #application>header{gap:5px}html[data-heard-shell="1"] #application>header nav{gap:3px}html[data-heard-shell="1"] .round{width:33px;height:33px}html[data-heard-shell="1"] .header-listen{width:37px;height:35px;min-height:35px}html[data-heard-shell="1"] h1{font-size:22px}}