.musiclic-cycle-page{
  max-width:980px;
  margin:0 auto;
  padding:24px 14px;
  color:#222;
  font-family:Arial,Helvetica,sans-serif;
}

.musiclic-cycle-widget{
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  padding:18px;
}

.musiclic-cycle-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:14px;
}

.musiclic-cycle-controls label{font-weight:bold;}

.musiclic-cycle-controls select,
.musiclic-cycle-controls button{
  padding:8px 10px;
  font-size:16px;
  border:1px solid #bbb;
  background:#fff;
}

.musiclic-cycle-controls button{
  background:#2f6fb5;
  color:#fff;
  border-color:#2f6fb5;
  cursor:pointer;
  border-radius:4px;
}

.musiclic-cycle-controls button:hover,
.notation-btn:hover,
.cycle-tab-btn:hover,
.cycle-guide-actions button:hover{opacity:.9;}

.musiclic-cycle-stage{
  max-width:780px;
  margin:0 auto;
}

#cycleSvg{
  width:100%;
  height:auto;
  display:block;
  touch-action:pan-y;
}

.cycle-notation-switch{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  width:100%;
  margin-bottom:12px;
}

.cycle-notation-switch span{
  font-weight:bold;
  margin-right:4px;
}

.notation-btn{
  border:1px solid #2f6fb5;
  background:#fff;
  color:#2f6fb5;
  border-radius:20px;
  padding:8px 16px;
  font-weight:bold;
  cursor:pointer;
}

.notation-btn.active{
  background:#2f6fb5;
  color:#fff;
}

.cycle-guide-intro{
  text-align:center;
  margin:6px 0 14px 0;
}

.cycle-guide-toggle{
  border:1px solid #e67e22;
  background:#e67e22;
  color:#fff;
  border-radius:22px;
  padding:9px 18px;
  font-weight:bold;
  cursor:pointer;
  font-size:15px;
  margin-left:8px;
}

.cycle-guide-toggle:hover{
  background:#cf6d17;
  border-color:#cf6d17;
}

.cycle-guide-box{
  background:#f7f9fc;
  border:1px solid #d8e1ee;
  border-left:4px solid #2f6fb5;
  border-radius:0 10px 10px 0;
  padding:14px 16px;
  margin:0 0 18px 0;
  line-height:1.5;
}

.cycle-guide-step h3{
  margin:0 0 6px 0;
  color:#2f6fb5;
  font-size:19px;
}

.cycle-guide-step p{margin:6px 0;}

.cycle-guide-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.cycle-guide-actions button{
  border:1px solid #ccd6e6;
  background:#fff;
  color:#2f3b4a;
  border-radius:18px;
  padding:7px 13px;
  font-weight:bold;
  cursor:pointer;
}

.cycle-guide-count{
  font-size:14px;
  font-weight:bold;
  color:#555;
}

.cycle-clickable{cursor:pointer;}
.cycle-locked{cursor:not-allowed;opacity:.58;}

.cycle-sector{fill:#f4f4f4;stroke:#222;stroke-width:1;}
.cycle-sector-inner{fill:#d9d9d9;stroke:#222;stroke-width:1;}
.cycle-ring-line{fill:none;stroke:#222;stroke-width:1;}
.cycle-ray{stroke:#222;stroke-width:1;}

#movingFrameLayer{
  transition:transform .55s ease;
  transform-origin:0 0;
}

.cycle-red-frame{
  fill:rgba(180,180,180,.22);
  stroke:#e00000;
  stroke-width:4;
  stroke-linejoin:round;
  stroke-linecap:round;
}

.cycle-text-acc{font-size:18px;font-weight:bold;}
.cycle-text-major{font-size:27px;font-weight:bold;}
.cycle-text-minor{font-size:21px;font-weight:bold;}
.cycle-text-dim{font-size:20px;font-weight:bold;fill:#7a3db8;}

.cycle-text-major-combined{font-size:25px;}
.cycle-text-minor-combined{font-size:21px;}
.cycle-text-acc-combined{font-size:18px;}

.cycle-text-neutral{fill:#111;}
.cycle-text-sharp{fill:#2f6fb5;}
.cycle-text-flat{fill:#254587;}

.degree-inline-major-bg{fill:#3d73bd;}
.degree-inline-major{font-size:13px;font-weight:bold;fill:#fff;}

.degree-inline-minor-bg{fill:#00a85a;}
.degree-inline-minor{font-size:13px;font-weight:bold;fill:#fff;}

.degree-inline-dim-bg{fill:#7a3db8;}
.degree-inline-dim{font-size:10px;font-weight:bold;fill:#fff;}

.cycle-center{fill:#fff;stroke:#222;stroke-width:1;}
.cycle-center-title{font-size:23px;font-weight:bold;fill:#2f6fb5;}
.cycle-center-sub{font-size:14px;}

.musiclic-cycle-info{
  margin-top:18px;
  padding:0;
}

.cycle-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  margin:14px 0;
}

.cycle-tab-btn{
  border:1px solid #ccd6e6;
  background:#f7f9fc;
  color:#2f3b4a;
  border-radius:20px;
  padding:8px 13px;
  font-weight:bold;
  cursor:pointer;
}

.cycle-tab-btn.active{
  background:#2f6fb5;
  border-color:#2f6fb5;
  color:#fff;
}

.cycle-panel{
  display:none;
  border:1px solid #d8e1ee;
  background:#fff;
  border-radius:10px;
  padding:16px;
  line-height:1.55;
}

.cycle-panel.active{display:block;}

.cycle-panel h4{
  margin:0 0 10px 0;
  font-size:19px;
  color:#2f6fb5;
}

.cycle-panel p{margin:8px 0;}

.cycle-info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:12px 0;
}

.cycle-info-card{
  border:1px solid #e0e0e0;
  border-radius:8px;
  padding:12px;
  background:#fbfbfb;
}

.cycle-info-card strong{
  display:block;
  color:#2f6fb5;
  margin-bottom:4px;
}

.cycle-pills{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:10px 0;
}

.cycle-pill{
  display:inline-block;
  border:1px solid #d5dce8;
  background:#f7f9fc;
  border-radius:18px;
  padding:6px 10px;
  font-weight:bold;
}

.cycle-degree-table{
  width:100%;
  border-collapse:collapse;
  margin:12px 0;
  font-size:15px;
}

.cycle-degree-table th,
.cycle-degree-table td{
  border:1px solid #ddd;
  padding:8px;
  vertical-align:top;
}

.cycle-degree-table th{
  background:#f1f5fa;
  color:#222;
  text-align:center;
}

.cycle-degree-table td:nth-child(1),
.cycle-degree-table td:nth-child(2),
.cycle-degree-table td:nth-child(3){text-align:center;}

.cycle-degree-table td:nth-child(4){text-align:left;}

.cycle-tip,
.cycle-lock-box{
  background:#fffdf5;
  border:1px solid #eadca6;
  border-left:4px solid #e0b500;
  border-radius:0 8px 8px 0;
  padding:12px 14px;
  margin:12px 0 0 0;
}

.cycle-tip strong,
.cycle-lock-box strong{color:#8a6400;}

.cycle-visitor-notice{
  background:#f7f9fc;
  border:1px solid #d8e1ee;
  border-left:4px solid #2f6fb5;
  border-radius:0 8px 8px 0;
  padding:12px 14px;
  margin:0 0 14px 0;
  line-height:1.45;
}

@media(max-width:760px){
  .musiclic-cycle-widget{padding:14px;}
  .musiclic-cycle-controls{align-items:stretch;}
  .musiclic-cycle-controls label{width:100%;}
  .musiclic-cycle-controls select{width:100%;}
  .cycle-info-grid{grid-template-columns:1fr;}
  .cycle-degree-table{font-size:14px;}
  .cycle-degree-table th,
  .cycle-degree-table td{padding:7px 6px;}
}