/* Administrace: stejné tokeny jako web, jen věcnější. */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.form{display:grid;gap:16px;margin-top:20px}
.f{display:grid;gap:6px;min-width:0}
.f label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.f input,.f textarea,.f select{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:10px 12px;font-size:17px}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--ember)}
.f textarea{resize:vertical}
.row2{display:grid;grid-template-columns:1fr 2fr;gap:14px}
.row3{display:grid;grid-template-columns:2fr 2fr 1fr;gap:14px}
@media (max-width:640px){.row2,.row3{grid-template-columns:1fr}}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.alert{background:color-mix(in srgb, var(--danger) 14%, transparent);border:1px solid var(--danger);color:var(--ink);padding:12px 16px;border-radius:8px;margin:16px 0}
.ok{background:color-mix(in srgb, var(--ok) 14%, transparent);border:1px solid var(--ok);padding:12px 16px;border-radius:8px;margin:16px 0}
.sub-title{font-size:26px;margin-top:48px}
.nav-admin{flex-wrap:wrap;gap:2px}
.nav-admin a{font-size:16px;padding:6px 10px}
.nav-admin form{margin-left:8px}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:17px}
.tbl th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl a{text-decoration:none}
.num{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.right{text-align:right;white-space:nowrap}

.editor{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
.editor-main{display:grid;gap:16px}
.editor-preview{position:sticky;top:84px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;max-height:calc(100vh - 110px);overflow:auto}
.editor-preview .sheet{font-size:18px}
@media (max-width:900px){.editor{grid-template-columns:1fr}.editor-preview{position:static;max-height:none}}
#body{font-family:var(--mono);font-size:15px;line-height:1.6;min-height:420px}
.hint{font-size:15px;color:var(--muted);max-width:70ch}
.hint code{font-family:var(--mono);font-size:13.5px;color:var(--chord);background:var(--chord-soft);padding:1px 5px;border-radius:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--mono);font-size:14px;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:4px 9px;color:var(--chord);cursor:pointer}
.chip:hover{border-color:var(--chord)}
.chip-muted{color:var(--muted);font-family:var(--body)}
.del{display:inline-block;margin-left:auto}
.del summary{list-style:none}
.del summary::-webkit-details-marker{display:none}
.del[open] summary{display:none}
.confirm{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border:1px solid var(--danger);border-radius:8px;padding:10px 14px;background:var(--surface)}

.upload{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:20px 0 28px}
.upload-label{display:grid;gap:2px;flex:1 1 260px}
.upload-label .muted{font-size:15px}
.pf-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:14px}
.pf-item{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px}
.pf-item img{width:150px;height:150px;object-fit:cover;border-radius:6px}
.pf-fields{display:grid;gap:10px}
.pf-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.f-small{max-width:110px}
.sticky-actions{position:sticky;bottom:0;background:var(--bg);padding-block:14px calc(14px + env(safe-area-inset-bottom,0px));margin-top:14px;border-top:1px solid var(--line)}
@media (max-width:520px){.pf-item{grid-template-columns:1fr}.pf-item img{width:100%;height:200px}}

/* taháky */
.tool-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;margin:20px 0 28px;align-items:stretch}
.tool-row .upload{margin:0}
@media (max-width:820px){.tool-row{grid-template-columns:1fr}}
.side-tools{display:grid;gap:10px;align-content:start}
.check{display:flex;gap:8px;align-items:baseline;cursor:pointer}
.check input{accent-color:var(--ember);width:18px;height:18px;align-self:center}
.small-text{font-size:14px}
.tags-cell{font-family:var(--mono);font-size:13px;color:var(--chord)}
.note-form #content{font-family:var(--mono);font-size:14.5px;line-height:1.6;min-height:520px;tab-size:4}

/* 3D v portfoliu */
.found-3d{border-color:var(--ember)}
.pf-thumb{position:relative;width:150px;height:150px;border-radius:6px;overflow:hidden;background:var(--night)}
.pf-thumb img,.pf-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.pf-noimg{display:grid;place-items:center;height:100%;color:var(--muted);font-size:14px}
.pf-thumb .badge-3d{top:6px;left:6px;font-size:10px;padding:2px 7px}
.small-link{font-size:15px;margin-right:auto;margin-left:12px;align-self:center}
@media (max-width:520px){.pf-thumb{width:100%;height:200px}}

/* básně */
.poem-input{font-family:var(--poem)!important;font-size:19px!important;line-height:1.6!important;min-height:440px}
.poem-preview{display:grid;gap:18px}
.pp-title{font-family:var(--display);font-weight:800;font-size:28px;text-align:center}
.poem-preview .poem-body{font-size:18px}
.poem-img-row{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.poem-img-row img{width:110px;height:110px;object-fit:cover;border-radius:6px}

/* editor básně (Quill) */
.poem-editor{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start;margin-top:8px}
@media (max-width:960px){.poem-editor{grid-template-columns:1fr}}
.pe-main{min-width:0}
.poem-editor .pe-toolbar.ql-toolbar{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));z-index:5;display:flex;flex-wrap:wrap;gap:4px 10px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px 10px 0 0;padding:8px 10px;font-family:var(--body)}
.poem-editor .ql-toolbar .ql-formats{margin-right:0;display:flex;align-items:center;padding-right:10px;border-right:1px solid var(--line)}
.poem-editor .ql-toolbar .ql-formats:last-child{border-right:0}
.poem-editor .ql-toolbar button{width:34px;height:32px;padding:6px 7px;border-radius:6px}
.poem-editor .ql-toolbar button:hover,.poem-editor .ql-toolbar button:focus-visible{background:var(--chord-soft)}
.poem-editor .ql-snow .ql-stroke{stroke:var(--ink)}
.poem-editor .ql-snow .ql-fill,.poem-editor .ql-snow .ql-stroke.ql-fill{fill:var(--ink)}
.poem-editor .ql-snow .ql-picker{color:var(--ink);font-size:15px}
.poem-editor .ql-snow.ql-toolbar :is(button:hover,button.ql-active,.ql-picker-label:hover,.ql-picker-label.ql-active,.ql-picker-item:hover,.ql-picker-item.ql-selected) .ql-stroke{stroke:var(--ember)}
.poem-editor .ql-snow.ql-toolbar :is(button:hover,button.ql-active,.ql-picker-label:hover,.ql-picker-label.ql-active) .ql-fill{fill:var(--ember)}
.poem-editor .ql-snow.ql-toolbar :is(button:hover,button.ql-active,.ql-picker-label:hover,.ql-picker-label.ql-active,.ql-picker-item:hover,.ql-picker-item.ql-selected){color:var(--ember)}
.poem-editor .ql-toolbar button.ql-active{background:var(--chord-soft)}
.poem-editor .ql-divider span{font-size:15px;line-height:1;color:var(--ink)}
.poem-editor .ql-divider:hover span{color:var(--ember)}
.poem-editor .ql-snow .ql-picker.ql-header{width:122px}
.poem-editor .ql-snow .ql-picker-options{background:var(--surface);border-color:var(--line)!important;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.3)}
.poem-editor .ql-snow .ql-picker.ql-header .ql-picker-label::before,.poem-editor .ql-snow .ql-picker.ql-header .ql-picker-item::before{content:"Text"}
.poem-editor .ql-snow .ql-picker.ql-header :is(.ql-picker-label,.ql-picker-item)[data-value="2"]::before{content:"Nadpis"}
.poem-editor .ql-snow .ql-picker.ql-header :is(.ql-picker-label,.ql-picker-item)[data-value="3"]::before{content:"Podnadpis"}
.poem-editor .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-family:var(--display);font-weight:800;font-size:17px}
.poem-editor .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-family:var(--poem);font-style:italic;font-size:16px}
.poem-editor .ql-container.ql-snow{border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;background:var(--bg);font-family:var(--poem)}
.poem-editor .ql-editor{min-height:62vh;padding:clamp(24px,4vw,48px) clamp(20px,5vw,64px) 80px;font-family:var(--poem);font-size:20px;line-height:1.65;color:var(--ink);caret-color:var(--ember)}
.poem-editor .ql-editor.ql-blank::before{left:clamp(20px,5vw,64px);right:auto;color:var(--muted);font-style:italic}
.poem-editor .ql-editor ::selection{background:rgba(242,161,68,.32)}
.pe-side{display:grid;gap:16px;position:sticky;top:84px}
@media (max-width:960px){.pe-side{position:static}}
.pe-help{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.pe-help ul{margin:0;padding-left:1.1em;display:grid;gap:6px;font-size:15px;color:var(--muted)}
.pe-help b{color:var(--ink);font-weight:600}
.pe-secondary{padding-top:4px}
.pe-secondary .del{margin-left:0}
/* přebití výchozích stylů Quillu, aby editor vypadal přesně jako báseň na webu */
.poem-editor .ql-container .ql-editor p{padding-left:calc(1.6em + var(--qi,0) * 1.5em);text-indent:-1.6em}
.poem-editor .ql-container .ql-editor p:is(.ql-align-center,.ql-align-right,.ql-align-justify){padding-left:calc(var(--qi,0) * 1.5em);text-indent:0}
.poem-editor .ql-container .ql-editor [class*="ql-indent-"]:not(.ql-direction-rtl){padding-left:calc(1.6em + var(--qi,0) * 1.5em)}
.poem-editor .ql-container .ql-editor [class*="ql-indent-"]:is(.ql-align-center,.ql-align-right,.ql-align-justify,h2,h3):not(.ql-direction-rtl){padding-left:calc(var(--qi,0) * 1.5em)}
.poem-editor .ql-container .ql-editor h2{font-size:1.45em}
.poem-editor .ql-container .ql-editor h3{font-size:1em}
.poem-editor .ql-container .ql-editor blockquote{border-left:2px solid var(--ember);margin:1em 0 1.4em;padding-left:1em}
.poem-editor .ql-container .ql-editor hr{cursor:default}
.upload-msg{flex-basis:100%;margin:0;font-size:15px;color:var(--muted)}
.upload-msg.is-bad{color:var(--danger);font-weight:600}
.credits-input{font-size:15px!important;line-height:1.5}
.f .hint code{font-family:var(--mono);font-size:13px;color:var(--chord);background:var(--chord-soft);padding:1px 5px;border-radius:4px}
.tab-current{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:8px;margin-bottom:6px}
.tab-file{font-family:var(--mono);font-size:14px;overflow-wrap:anywhere}

/* návštěvnost */
.range{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px}
.range a{padding:6px 14px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:600;font-size:15px}
.range a[aria-current="page"]{background:var(--ember);color:var(--ember-ink)}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:8px 0 18px}
@media (max-width:700px){.kpis{grid-template-columns:1fr}}
.kpi{display:grid;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.kpi-l{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.kpi-v{font-family:var(--display);font-weight:800;font-size:40px;line-height:1.05;font-variant-numeric:tabular-nums}
.kpi-s{font-size:14px;color:var(--muted)}
.kpi-s .up{color:var(--ok);font-weight:700}.kpi-s .down{color:var(--danger);font-weight:700}
.chart-card{margin-bottom:18px}
.chart-wrap{overflow-x:auto}
.chart{width:100%;height:auto;display:block}
.chart-wide{min-width:560px}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--muted);font-size:11px;font-family:var(--body)}
.chart .bar-p{fill:var(--chord-soft)}
.chart .bar-v{fill:var(--ember);opacity:.85}
.chart .bar-v.is-today{opacity:1}
.chart-legend{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-bottom:8px}
.lg{display:inline-block;width:12px;height:12px;border-radius:3px}.lg-v{background:var(--ember)}.lg-p{background:var(--chord-soft);border:1px solid var(--line);margin-left:10px}
.stats-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:900px){.stats-grid{grid-template-columns:1fr}}
.stats-side{display:grid;gap:18px}
.card-h{font-size:20px;margin-bottom:10px}
.tbl-plain{border:0}
.tbl-plain td,.tbl-plain th{padding:8px 6px}
.bar-cell{position:relative;isolation:isolate;min-width:0;overflow-wrap:anywhere}
.cell-bar{position:absolute;left:0;top:4px;bottom:4px;background:var(--chord-soft);border-radius:4px;z-index:-1}
.devices{display:grid;gap:10px}
.dev{display:grid;grid-template-columns:7em minmax(0,1fr) 3.5em;align-items:center;gap:10px;font-size:15px}
.dev-bar{height:10px;background:var(--chord-soft);border-radius:999px;overflow:hidden}
.dev-bar span{display:block;height:100%;background:var(--ember)}
.dev-v{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.stats-empty{margin-bottom:18px}
.stats-note{margin-top:22px;max-width:75ch}

/* přihlášení a dvoufázové ověření */
.login-card{max-width:440px}
.login-step{margin:0;line-height:1.5}
.code-input{font-family:var(--mono)!important;font-size:24px!important;letter-spacing:.18em;text-align:center;max-width:12em}
.status{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.status .dot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--muted)}
.status.on .dot{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent)}
.status.off .dot{background:var(--danger)}
.security-card{display:grid;gap:10px;justify-items:start;margin-top:12px}
.twofa .card{margin-top:18px;display:grid;gap:12px}
.sub-h{font-size:22px}
.setup-steps{margin:0;padding-left:1.3em;display:grid;gap:22px}
.setup-steps li{line-height:1.55}
.qr-box{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;margin-top:12px}
.qr{width:220px;max-width:100%;aspect-ratio:1;background:#fff;border-radius:10px;padding:6px;flex:none}
.qr svg{width:100%;height:100%;display:block}
.qr-manual{flex:1 1 240px;min-width:0;display:grid;gap:6px}
.secret{font-family:var(--mono);font-size:17px;letter-spacing:.08em;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;overflow-wrap:anywhere;user-select:all}
.inline-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:10px}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin:0;padding:16px 18px 16px 2.4em;background:var(--bg);border:1px dashed var(--line);border-radius:8px}
.codes code{font-family:var(--mono);font-size:18px;letter-spacing:.06em}
@media (max-width:480px){.codes{grid-template-columns:1fr}}
.codes-card{border-color:var(--ok)}
.devices-list{margin:0;padding-left:1.1em;display:grid;gap:6px}
.danger-zone summary{cursor:pointer;font-weight:600;color:var(--danger)}

/* Hmaty akordů v editoru písně */
.shapes-box{color:var(--ink)}
.shape-cards{display:flex;flex-wrap:wrap;gap:10px}
.shape-card{display:grid;justify-items:center;gap:2px;padding:8px 6px 6px;min-width:84px;background:var(--surface);color:inherit;
  border:1px solid var(--line);border-radius:12px;cursor:pointer;font:inherit;transition:border-color .15s,background .15s}
.shape-card:hover,.shape-card.is-open{border-color:var(--ember)}
.shape-card.is-open{background:var(--chord-soft)}
.shape-card .nm{font-family:var(--mono);font-weight:700;color:var(--chord);font-size:14px}
.shape-card .lb{font-size:11.5px;color:var(--muted);max-width:92px;line-height:1.2;text-align:center}
.shape-card.is-own .lb{color:var(--ember);font-weight:600}
.shape-card .na{width:70px;height:96px;display:grid;place-items:center;font-size:11px;color:var(--muted);border:1px dashed var(--line);border-radius:6px}
.shape-pop{margin-top:12px;padding:14px;border:1px solid var(--ember);border-radius:14px;background:var(--surface)}
.sp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.sp-variants{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.sp-var{display:grid;justify-items:center;gap:2px;padding:6px;background:transparent;color:inherit;border:1px solid var(--line);border-radius:10px;cursor:pointer;font:inherit}
.sp-var span{font-size:11.5px;color:var(--muted);max-width:110px;line-height:1.2}
.sp-var.on{border-color:var(--ember);background:var(--chord-soft)}
.sp-var.on span{color:var(--ember);font-weight:600}
.sp-custom{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;border-top:1px solid var(--line);padding-top:12px}
.sp-custom>div:first-child{flex:1 1 240px}
.sp-fret{display:flex;align-items:center;gap:8px;margin:8px 0 12px}
.sp-fret output{min-width:2.4em;text-align:center;font-weight:700}
.sp-grid .grid{display:block;color:var(--ink);touch-action:manipulation}
.sp-grid .hit{cursor:pointer}
.sp-grid .hit:hover rect{fill:var(--chord-soft)}

.head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Zveřejnění písně */
.visibility{border:1px solid var(--line);border-radius:14px;padding:12px 14px 6px;margin:6px 0 14px}
.visibility legend{padding:0 6px;font-weight:700}
.vis-opts{display:grid;gap:8px;margin-bottom:10px}
.vis-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-weight:400}
.vis-opt input{margin-top:4px;accent-color:var(--ember)}
.vis-opt:has(input:checked){border-color:var(--ember);background:var(--chord-soft)}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:13px;white-space:nowrap}
.pill-public{background:rgba(31,122,58,.16);color:var(--ok)}
.pill-private{background:var(--chord-soft);color:var(--ember)}
.rights{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.rights-unknown{font-style:italic}
.form .vis-opt,.visibility .vis-opt{display:flex;font-weight:400;text-transform:none;letter-spacing:0;font-size:15.5px;line-height:1.4;color:var(--ink);font-family:inherit}
.form .vis-opt input,.visibility .vis-opt input{width:auto;flex:none;height:auto;padding:0;margin:3px 0 0;box-shadow:none}
.vis-opt span{flex:1}
.visibility legend{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pill-friends{background:color-mix(in srgb, var(--chord) 14%, transparent);color:var(--chord)}
/* kamarádi */
.friends-admin .card{margin-bottom:24px}
.invite-box{border-color:var(--ember)}
.invite-link{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.invite-link input{flex:1 1 280px;min-width:0;font-family:var(--mono);font-size:14px}
.friends-tbl .small,.friends-tbl small{font-size:14px}
.friends-tbl .mono-s{font-family:var(--mono);font-size:13px}
.friends-tbl tr.is-off td{opacity:.6}
.note-form{margin-top:6px}
.note-form input{font-size:14px;padding:4px 8px;border:1px dashed var(--line);background:transparent;border-radius:6px;width:100%;max-width:240px;color:var(--ink)}
.friend-acts{display:flex;flex-wrap:wrap;gap:6px}
.friend-acts form{margin:0}
.friends-help{margin-top:20px}
@media (max-width:700px){
  .friends-tbl thead{display:none}
  .friends-tbl,.friends-tbl tbody,.friends-tbl tr,.friends-tbl td{display:block;width:100%}
  .friends-tbl tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .friends-tbl td{padding:4px 0;border:0}
  .friends-tbl td.friend-acts{display:flex;padding-top:10px}
  .note-form input{max-width:none}
}
.m-only{display:none}
@media (max-width:700px){.m-only{display:inline}}

/* tabulatury pro PDF zpěvník (assets/js/tab-print.js) */
.tabprint{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:2px 0 8px;font-size:15px;color:var(--muted)}
.tabprint::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.tabprint[data-state="ok"]::before{background:#5fb36b}
.tabprint[data-state="todo"]::before,.tabprint[data-state="busy"]::before{background:var(--ember)}
.tabprint[data-state="busy"]::before{animation:tp-pulse 1s ease-in-out infinite}
.tabprint[data-state="err"]{color:var(--danger)}
.tabprint[data-state="err"]::before{background:var(--danger)}
.tabprint-all{padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);margin:0 0 16px;color:var(--ink)}
@keyframes tp-pulse{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.tabprint[data-state="busy"]::before{animation:none}}

/* editor rytmu úderů (assets/js/strum-editor.js) */
.strum-ed .hint{font-weight:400;color:var(--muted);font-size:14px;text-transform:none;letter-spacing:0}
.strum-add{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:6px 0 0}
.se-item{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px 14px;margin:6px 0 10px}
.se-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end}
.se-f{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.se-f input,.se-f select{font:inherit;font-size:15px;text-transform:none;letter-spacing:0;padding:6px 8px;min-width:0}
.se-name{flex:1 1 180px}
.se-bpm input{width:5em}
.se-grid{display:flex;flex-wrap:wrap;gap:3px;margin:12px 0 6px}
.se-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;width:40px;height:52px;padding:0;border:1px solid var(--line);border-radius:8px;
  background:var(--bg2);color:var(--ink);cursor:pointer;font:inherit}
.se-cell b{font-family:var(--mono);font-size:18px;line-height:1.1}
.se-cell small{font-family:var(--mono);font-size:11px;color:var(--muted)}
.se-cell.is-beat{border-color:var(--muted)}
.se-cell.is-bar{margin-left:10px}
.se-cell.is-empty b{color:var(--muted);opacity:.6}
.se-cell:hover{border-color:var(--ember)}
.se-cell:focus-visible{outline:2px solid var(--ember);outline-offset:1px}
.se-cell.is-now{background:var(--ember);color:var(--ember-ink)}
.se-cell.is-now small{color:var(--ember-ink)}
.se-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px}
.se-prev{overflow-x:auto;max-width:100%}
.se-acts{display:flex;align-items:center;gap:12px}
.linkbtn.danger{color:var(--danger)}