.container{position:relative;width:100%;max-width:960px;margin:0 auto;padding:0 20px;box-sizing:border-box}.column,.columns{width:100%;float:left;box-sizing:border-box}@media (min-width: 400px){.container{width:85%;padding:0}}@media (min-width: 550px){.container{width:80%}.column,.columns{margin-left:4%}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66666666667%}.two.columns{width:13.3333333333%}.three.columns{width:22%}.four.columns{width:30.6666666667%}.five.columns{width:39.3333333333%}.six.columns{width:48%}.seven.columns{width:56.6666666667%}.eight.columns{width:65.3333333333%}.nine.columns{width:74.0%}.ten.columns{width:82.6666666667%}.eleven.columns{width:91.3333333333%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.6666666667%}.two-thirds.column{width:65.3333333333%}.one-half.column{width:48%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.66666666667%}.offset-by-two.column,.offset-by-two.columns{margin-left:17.3333333333%}.offset-by-three.column,.offset-by-three.columns{margin-left:26%}.offset-by-four.column,.offset-by-four.columns{margin-left:34.6666666667%}.offset-by-five.column,.offset-by-five.columns{margin-left:43.3333333333%}.offset-by-six.column,.offset-by-six.columns{margin-left:52%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.6666666667%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.3333333333%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:78.0%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.6666666667%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.3333333333%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.6666666667%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.3333333333%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}}html{font-size:62.5%}body{font-size:1.5em;line-height:1.6;font-weight:400;font-family:"Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;color:#222}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300}h1{font-size:4.0rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3.0rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}@media (min-width: 550px){h1{font-size:5.0rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3.0rem}h5{font-size:2.4rem}h6{font-size:1.5rem}}p{margin-top:0}a{color:#1EAEDB}a:hover{color:#0FA0CE}.button,button,input[type="submit"],input[type="reset"],input[type="button"]{display:inline-block;height:38px;padding:0 30px;color:#555;text-align:center;font-size:11px;font-weight:600;line-height:38px;letter-spacing:0.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;background-color:transparent;border-radius:4px;border:1px solid #bbb;cursor:pointer;box-sizing:border-box}.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,.button:focus,button:focus,input[type="submit"]:focus,input[type="reset"]:focus,input[type="button"]:focus{color:#333;border-color:#888;outline:0}.button.button-primary,button.button-primary,input[type="submit"].button-primary,input[type="reset"].button-primary,input[type="button"].button-primary{color:#FFF;background-color:#33C3F0;border-color:#33C3F0}.button.button-primary:hover,button.button-primary:hover,input[type="submit"].button-primary:hover,input[type="reset"].button-primary:hover,input[type="button"].button-primary:hover,.button.button-primary:focus,button.button-primary:focus,input[type="submit"].button-primary:focus,input[type="reset"].button-primary:focus,input[type="button"].button-primary:focus{color:#FFF;background-color:#1EAEDB;border-color:#1EAEDB}input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea,select{height:38px;padding:6px 10px;background-color:#fff;border:1px solid #D1D1D1;border-radius:4px;box-shadow:none;box-sizing:border-box}input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{min-height:65px;padding-top:6px;padding-bottom:6px}input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus{border:1px solid #33C3F0;outline:0}label,legend{display:block;margin-bottom:0.5rem;font-weight:600}fieldset{padding:0;border-width:0}input[type="checkbox"],input[type="radio"]{display:inline}label > .label-body{display:inline-block;margin-left:0.5rem;font-weight:normal}ul{list-style:circle inside}ol{list-style:decimal inside}ol,ul{padding-left:0;margin-top:0}ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 3rem;font-size:90%}li{margin-bottom:1rem}code{padding:0.2rem 0.5rem;margin:0 0.2rem;font-size:90%;white-space:nowrap;background:#F1F1F1;border:1px solid #E1E1E1;border-radius:4px}pre > code{display:block;padding:1rem 1.5rem;white-space:pre}td,th{padding:12px 15px;text-align:left;border-bottom:1px solid #E1E1E1}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}.button,button{margin-bottom:1rem}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.5rem}.u-full-width{width:100%;box-sizing:border-box}.u-max-full-width{max-width:100%;box-sizing:border-box}.u-pull-right{float:right}.u-pull-left{float:left}hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #E1E1E1}.container:after,.row:after,.u-cf{content:"";display:table;clear:both}@media (min-width: 400px){}@media (min-width: 550px){}@media (min-width: 750px){}@media (min-width: 1000px){}@media (min-width: 1200px){}

/* === PLAYLIST CUSTOM STYLES === */
.playlist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 4px;
  background: #f9f9f9;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
}
.playlist-item:hover { background: #f0f8ff; }
.playlist-item .item-info { flex: 1; }
.playlist-item .item-name { font-weight: 600; }
.playlist-item .item-time { color: #888; margin-left: 8px; }
.playlist-item .item-actions { display: flex; gap: 4px; }
.playlist-item .item-actions button {
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
  font-size: 10px;
  margin-bottom: 0;
}
.btn-small {
  height: 30px !important;
  line-height: 30px !important;
  padding: 0 14px !important;
  font-size: 10px !important;
  margin-bottom: 0 !important;
}
.btn-danger {
  color: #FFF !important;
  background-color: #E74C3C !important;
  border-color: #E74C3C !important;
}
.btn-danger:hover {
  background-color: #C0392B !important;
  border-color: #C0392B !important;
}
.btn-success {
  color: #FFF !important;
  background-color: #2ECC71 !important;
  border-color: #2ECC71 !important;
}
.btn-success:hover {
  background-color: #27AE60 !important;
  border-color: #27AE60 !important;
}
.freq-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
  min-width: 0;
}
.freq-row:hover { background: #fafafa; }
.freq-row input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.freq-row label { margin: 0; cursor: pointer; flex: 1; min-width: 0; line-height: 1.3; }
.freq-row select {
  height: 26px;
  padding: 0 4px;
  font-size: 11px;
  margin: 0;
  width: auto;
  min-width: 58px;
  flex-shrink: 0;
}
.playlist-container {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 15px;
}
.playlist-empty {
  text-align: center;
  color: #aaa;
  padding: 30px;
}
#currentlyPlaying {
  font-size: 1.6rem;
  min-height: 24px;
}
.section-title {
  font-weight: 600;
  margin-bottom: 10px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-size: 1.2rem;
}
.freq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 12px;
  margin-bottom: 15px;
}
.freq-grid > * {
  min-width: 0;
  overflow: hidden;
}
@media (min-width: 550px) {
  .freq-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 750px) {
  .freq-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Pagination */
.pagination { margin: 10px 0; }
.pagination button {
  height: 30px;
  line-height: 30px;
  padding: 0 14px;
  font-size: 10px;
  margin: 0 4px;
}
.pagination .page-info {
  display: inline-block;
  margin: 0 10px;
  font-size: 1.2rem;
  color: #888;
}

/* Dialog box */
.dialog-box {
  background: white;
  padding: 30px;
  border-radius: 8px;
  min-width: 350px;
  text-align: center;
  max-width: 90vw;
}

/* Combo box (searchable select) */
.combo-box {
  position: relative;
}
.combo-box input {
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  font-size: 1.2rem;
  margin-bottom: 0;
}
.combo-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #D1D1D1;
  border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: 100;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.combo-dropdown.open { display: block; }
.combo-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 1.3rem;
}
.combo-option:hover { background: #f0f8ff; }
.combo-option.combo-active { background: #e8f4fd; font-weight: 600; }
.combo-option.combo-empty {
  color: #aaa;
  cursor: default;
  justify-content: center;
}
.combo-name { flex: 1; }
.combo-count { color: #888; font-size: 1.1rem; margin-left: 8px; }

/* Search inputs */
#freqSearch {
  height: 34px;
  font-size: 1.2rem;
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 550px) {
  body { font-size: 1.3em; }
  h2 { font-size: 3.2rem; }
  #timer { font-size: 4rem !important; }
  .container { padding: 0 12px; }
  .playlist-mgmt-col { margin-bottom: 15px; }

  .playlist-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .playlist-item .item-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .playlist-item .item-actions button {
    min-width: 36px;
    min-height: 36px;
    font-size: 12px;
  }

  button, .button {
    width: 100%;
    margin-bottom: 8px;
  }
  .btn-small { width: auto; }

  #startBtn, #stopBtn, #clearBtn {
    width: auto;
    min-width: 80px;
  }

  .freq-row {
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 6px;
    margin-bottom: 4px;
  }
  .freq-row label {
    font-size: 1.2rem;
  }
  .freq-row select {
    height: 32px;
    font-size: 12px;
    min-width: 60px;
  }

  .dialog-box {
    padding: 20px;
    min-width: auto;
    width: 90vw;
  }
  .dialog-box input[type="text"] { font-size: 16px; }

  #playlistSearch, #freqSearch { font-size: 14px; }
  .combo-box input { font-size: 14px; height: 42px; }
  .combo-option { padding: 10px 12px; font-size: 1.4rem; }

  .playlist-container { max-height: 250px; }
}

@media (max-width: 400px) {
  #timer { font-size: 3rem !important; }
  .freq-grid { grid-template-columns: 1fr; }
  .freq-row select { min-width: 58px; }
}