.akordi-rhythm-generator{--rg-red:#cf2929;--rg-dark:#171717;--rg-border:#e3ded7;--rg-soft:#f7f4ef;max-width:1180px;margin:0 auto;padding:18px 0 42px;color:#222;font-family:inherit}.rhythm-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.rhythm-kicker,.rhythm-current-heading span,.rhythm-progression-heading span,.rhythm-pattern-heading span{display:block;margin:0 0 5px;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--rg-red)}.rhythm-header h2{font-size:34px;line-height:1.1;margin:0 0 8px}.rhythm-header p{margin:0;color:#6d6a66}.rhythm-controls,.rhythm-chord-builder,.rhythm-main-card{background:#fff;border:1px solid var(--rg-border);border-radius:12px;box-shadow:0 8px 24px rgba(32,25,18,.06)}.rhythm-controls{display:grid;grid-template-columns:150px 170px minmax(230px,1fr) 220px;gap:18px;padding:16px 18px;margin-bottom:14px}.rhythm-controls label,.rhythm-chord-selectors label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#555}.rhythm-controls select,.rhythm-controls input[type=number],.rhythm-chord-selectors select{width:100%;margin-top:7px;min-height:42px;border:1px solid #d8d4cf;border-radius:7px;background:#fff;padding:0 11px;font:inherit;color:#222;box-sizing:border-box}.rhythm-bpm-control span{display:flex;align-items:center;gap:8px}.rhythm-bpm-control span input{max-width:92px}.rhythm-bpm-control span b{font-size:12px;color:#777}.rhythm-bpm-control input[type=range]{width:100%;accent-color:var(--rg-red);margin-top:9px}.rhythm-chord-builder{padding:16px 18px;margin-bottom:14px}.rhythm-chord-selectors{display:grid;grid-template-columns:170px 210px auto;gap:14px;align-items:end}.rhythm-add-chord,.rhythm-transport button,.rhythm-progression-heading button{border:0;border-radius:7px;min-height:42px;padding:0 17px;font:inherit;font-weight:750;cursor:pointer}.rhythm-add-chord,.rhythm-transport .is-primary{background:var(--rg-red);color:#fff}.rhythm-progression-heading{display:flex;justify-content:space-between;align-items:end;margin-top:18px;padding-top:14px;border-top:1px solid #eee9e3}.rhythm-progression-heading strong{font-size:13px}.rhythm-progression-heading button{min-height:34px;background:#f3f0ec;color:#555}.rhythm-progression{display:flex;gap:9px;overflow-x:auto;padding:11px 1px 2px}.rhythm-chord-chip{flex:0 0 auto;display:grid;grid-template-columns:auto 24px;align-items:center;min-width:88px;border:1px solid #dcd7d1;border-radius:8px;background:#faf8f5;color:#222;padding:8px 7px 8px 12px;cursor:pointer}.rhythm-chord-chip strong{font-size:17px}.rhythm-chord-chip small{grid-column:1;color:#777}.rhythm-chord-chip button{grid-column:2;grid-row:1/3;border:0;background:transparent;color:#999;font-size:17px;cursor:pointer}.rhythm-chord-chip.is-active{border-color:var(--rg-red);box-shadow:inset 0 0 0 1px var(--rg-red);background:#fff5f4}.rhythm-main-card{padding:18px}.rhythm-current-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}.rhythm-current-heading h3{margin:0;font-size:34px;line-height:1;color:var(--rg-red)}.rhythm-current-heading p{margin:5px 0 0;color:#777}.rhythm-transport{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}.rhythm-transport button{background:#efede9;color:#333}.rhythm-loop,.rhythm-volume{display:flex;align-items:center;gap:7px;font-size:13px}.rhythm-volume input{width:100px;accent-color:var(--rg-red)}.rhythm-fretboard-wrap{margin:18px 0;overflow-x:auto;border-radius:10px}.rhythm-fretboard{min-width:820px}.rg-board{display:grid;grid-template-columns:74px 1fr;align-items:stretch}.rg-side{display:grid;grid-template-rows:repeat(6,36px);background:#161616;border-radius:8px 0 0 8px;padding:8px 5px}.rg-side-row{display:flex;align-items:center;justify-content:space-between;color:#fff;font-weight:800}.rg-side-row i{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-style:normal;border:2px solid #bbb;background:#fff;color:#222}.rg-side-row i.is-muted{background:#333;color:#fff;border-color:#333}.rg-neck{position:relative;height:232px;border-radius:0 9px 9px 0;overflow:hidden;background-color:#3a2116;background-image:linear-gradient(90deg,rgba(255,255,255,.03),rgba(0,0,0,.1)),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 2px,rgba(0,0,0,.035) 2px 5px)}.rg-neck:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(6.666% - 2px),rgba(220,220,220,.85) calc(6.666% - 2px) 6.666%);pointer-events:none}.rg-neck:after{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:#e7d4aa;box-shadow:2px 0 3px rgba(0,0,0,.5)}.rg-string-row{position:absolute;left:0;right:0;display:flex;align-items:center;pointer-events:none}.rg-string{display:block;width:100%;min-height:1px;background:linear-gradient(180deg,#ffffff 0%,#ececec 45%,#cfcfcf 100%);box-shadow:0 1px 1px rgba(0,0,0,.72),0 0 2px rgba(255,255,255,.9)}.rg-marker{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;display:grid;place-items:center;background:#111;color:#fff;font-weight:800;border:2px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,.5)}.rg-inlay{position:absolute;width:12px;height:12px;border-radius:50%;background:rgba(235,235,235,.72);transform:translate(-50%,-50%)}.rhythm-pattern-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;padding-top:15px;border-top:1px solid #eee9e3}.rhythm-pattern-heading p{margin:0;color:#777;font-size:13px}.rhythm-legend{display:flex;gap:13px;flex-wrap:wrap;font-size:12px;font-weight:700}.rhythm-pattern{display:grid;gap:5px;margin-top:12px;overflow-x:auto;padding-bottom:4px}.rhythm-step{min-width:50px;border:1px solid #d9d4ce!important;border-radius:7px!important;background:#f7f4ef!important;color:#333!important;padding:8px 4px!important;height:72px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;font:inherit!important;box-shadow:none!important;transform:none!important;cursor:pointer}.rhythm-step b{font-size:12px;color:#777}.rhythm-step strong{font-size:25px;line-height:1.05}.rhythm-step.is-down,.rhythm-step.is-up{background:#fff5f4!important;border-color:#e9a0a0!important;color:var(--rg-red)!important}.rhythm-step.is-muted{background:#242424!important;border-color:#242424!important;color:#fff!important}.rhythm-step.is-active{outline:3px solid rgba(207,41,41,.28);outline-offset:1px}.rhythm-step.is-accent b{color:var(--rg-red)}.rhythm-status{margin:12px 0 0;font-size:13px;color:#666}.rhythm-status.is-playing{color:var(--rg-red);font-weight:700}@media(max-width:900px){.rhythm-controls{grid-template-columns:1fr 1fr}.rhythm-current-heading{align-items:flex-start;flex-direction:column}.rhythm-transport{justify-content:flex-start}.rhythm-chord-selectors{grid-template-columns:1fr 1fr}.rhythm-add-chord{grid-column:1/-1}.rhythm-pattern-heading{align-items:flex-start;flex-direction:column}}@media(max-width:560px){.akordi-rhythm-generator{padding-left:10px;padding-right:10px}.rhythm-header h2{font-size:28px}.rhythm-controls{grid-template-columns:1fr}.rhythm-chord-selectors{grid-template-columns:1fr}.rhythm-main-card,.rhythm-controls,.rhythm-chord-builder{padding:13px}.rhythm-volume{width:100%}.rhythm-volume input{flex:1}}

.rhythm-step.is-group-start{border-left-width:3px!important;border-left-color:#8e8175!important}.rhythm-step.is-primary-accent{box-shadow:inset 0 3px 0 var(--rg-red)!important}.rhythm-step em{font-size:9px;line-height:1;color:#8e8175;font-style:normal;margin-top:3px}.rhythm-pattern[data-grouping]:before{content:'Grupacija: ' attr(data-grouping);grid-column:1/-1;font-size:11px;font-weight:800;color:#766b62;letter-spacing:.06em;margin-bottom:2px}.rg-string{opacity:.96}.rg-neck:before{z-index:1}.rg-string-row,.rg-marker,.rg-inlay{z-index:2}
.rhythm-meter-note{grid-column:1/-1;margin:0;padding-top:2px;color:#766f68;font-size:12px;line-height:1.45}

/* v6.5 – event-based prikaz artikulacije */
.rhythm-step small {
  display: block;
  min-height: 1.1em;
  margin-top: 2px;
  font-size: 9px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .62;
}
.rhythm-step.is-articulation-short strong { transform: scale(.92); }
.rhythm-step.is-articulation-ghost strong { opacity: .58; }
.rhythm-step.is-articulation-muted small { opacity: .8; }
.rhythm-step.is-active {
  transform: translateY(-3px);
  box-shadow: 0 7px 18px rgba(178, 28, 34, .28);
}

/* v6.6 – jasna bas-linija i čitljiviji događaji */
.rhythm-step.is-bass{background:#eef5ff!important;border-color:#8eb4df!important;color:#164f87!important}
.rhythm-step.is-bass strong{font-size:19px;line-height:1}
.rhythm-step.is-articulation-bass small{font-weight:900;letter-spacing:.08em;color:#164f87}
.rhythm-legend .is-bass-legend{color:#164f87}


/* v6.7 – sustain i vizuelna aktivnost vrata */
.rg-string-row,
.rg-marker,
.rg-side-row { transition: filter .09s ease, opacity .09s ease, background-color .09s ease, box-shadow .09s ease; }
.rg-string-row.is-bass-active .rg-string {
  background: linear-gradient(180deg,#dff3ff 0%,#7fd1ff 45%,#eaf8ff 100%);
  box-shadow: 0 0 5px rgba(91,190,255,.98),0 1px 1px rgba(0,0,0,.7);
  height: max(2px, inherit);
}
.rg-marker.is-bass-active {
  background:#0e6ca8;
  border-color:#dff4ff;
  box-shadow:0 0 0 4px rgba(74,180,244,.25),0 2px 8px rgba(0,0,0,.55);
}
.rg-side-row.is-bass-active { color:#8fd7ff; }
.rg-side-row.is-bass-active i {
  border-color:#79cfff;
  box-shadow:0 0 0 3px rgba(74,180,244,.2),0 0 8px rgba(74,180,244,.55);
}
.rg-neck.is-strum-down { box-shadow: inset 0 -16px 24px rgba(207,41,41,.12); }
.rg-neck.is-strum-up { box-shadow: inset 0 16px 24px rgba(207,41,41,.12); }
.rg-neck.is-muted-pulse { filter: brightness(.82); }