:root{
  --bg:#121212;
  --panel:#1E1E1E;
  --panel-2:#2C2C2C;
  --text:#F5F5F7;
  --text-dim:#aab2c5;
  --border:#38383A;

  --c-preset:#0A84FF;
  --c-play:#30D158;
  --c-seek:#FF9F0A;
  --c-system:#636366;
  --c-volume:#64D2FF;
  --c-danger:#FF453A;
}
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; width:100%; height:100%;
  overflow:hidden;
  background:var(--bg); color:var(--text);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  touch-action:manipulation;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
#app{
  width:100vw; height:100dvh; display:flex; flex-direction:column;
  min-height:0; overflow:hidden;
}

/* ===== 上部 動画エリア ===== */
#player-area{
  position:relative; width:100%;
  min-height:0; background:#000; flex:1 1 auto;
}
#player{ width:100%; height:100%; }
#player-area iframe{ width:100%!important; height:100%!important; }

#no-content-msg{
  position:absolute; inset:0; display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:14px; background:#000; color:var(--text-dim); text-align:center; padding:20px;
}
#no-content-msg.show{ display:flex; }
#no-content-msg button{
  padding:16px 28px; font-size:1.1rem; border-radius:14px;
  border:none; background:var(--c-preset); color:#fff; cursor:pointer;
}

#home-link{
  position:absolute; top:10px; left:10px; z-index:15;
  padding:8px 12px; border-radius:10px; background:rgba(18,21,28,.7);
  color:#fff; font-size:.8rem; font-weight:700; text-decoration:none;
  display:none;
}
#home-link.show{ display:inline-flex; align-items:center; }

#external-url-toast{
  position:absolute; left:50%; bottom:16px; transform:translate(-50%, 12px);
  max-width:92%; padding:10px 16px; border-radius:12px;
  background:rgba(18,21,28,.85); color:#fff; font-size:.85rem; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  word-break:break-all; z-index:16;
}
#external-url-toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ===== 下部 操作エリア ===== */
#controls{
  --layout-cols:3;
  --button-rows:1;
  --btn-size:80px;
  --btn-gap:6px;
  width:100%;
  flex:0 0 auto;
  min-height:0;
  background:var(--panel);
  display:grid;
  grid-template-columns:repeat(var(--layout-cols), var(--btn-size));
  grid-template-rows:repeat(var(--button-rows), var(--btn-size));
  gap:var(--btn-gap);
  padding:8px;
  overflow:hidden;
  touch-action:manipulation;
  border-top:2px solid var(--border);
  align-content:start;
  justify-content:center;
}
#controls.layout-two{ --layout-cols:2; }
#controls.layout-three{ --layout-cols:3; }
#controls.button-medium{ --btn-size:120px; --btn-label-size:1.7rem; }
#controls.button-large{ --btn-size:150px; --btn-label-size:1.8rem; }

.btn{
  position:relative;
  width:var(--btn-size); height:var(--btn-size);
  aspect-ratio:1/1;
  min-width:var(--btn-size); min-height:var(--btn-size);
  border-radius:16px; border:none;
  display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  box-shadow:0 4px 0 rgba(0,0,0,.25);
  transition:transform .05s ease;
  padding:10px;
  overflow:hidden;
  text-align:center;
}
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.25); }
.btn .label{
  display:block;
  font-size:var(--btn-label-size, 1.35rem);
  font-weight:900;
  line-height:1.08;
  letter-spacing:0.02em;
  white-space:normal;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:"Noto Sans JP",sans-serif;
}

.cat-preset{ background:var(--c-preset); }
.cat-play{ background:var(--c-play); }
.cat-seek{ background:var(--c-seek); }
.cat-system{ background:var(--c-system); }
.cat-volume{ background:var(--c-volume); }

/* ===== 設定モーダル ===== */
#settings-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.72);
  display:none; align-items:center; justify-content:center; z-index:200; padding:16px;
}
#settings-overlay.show{ display:flex; }
#settings-panel{
  width:min(960px, 97vw); height:min(680px, 94vh);
  background:var(--panel); border-radius:24px; border:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
}
.settings-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.settings-header h2{ margin:0; font-size:1.3rem; }
#settings-close{
  display:flex; align-items:center; gap:10px;
  height:64px; padding:0 22px; border-radius:16px; border:none;
  background:var(--c-danger); color:#fff; font-size:1.15rem; font-weight:700; cursor:pointer;
}
.settings-body{
  padding:18px 20px; overflow-y:auto; flex:1;
  display:flex; flex-direction:column; gap:22px;
}
.settings-section{
  background:var(--panel-2);
  border-radius:18px; padding:16px 18px;
}
.settings-section h3{ margin:0 0 10px; font-size:1.05rem; }
.hint{ margin:4px 0 12px; font-size:.85rem; color:var(--text-dim); line-height:1.6; }

.toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 2px;
}
.toggle-row .label-text{ font-size:1rem; font-weight:700; }
.toggle-switch{
  position:relative; width:64px; height:36px; border:none; border-radius:999px;
  background:#445063; cursor:pointer; transition:background .2s ease; padding:4px;
}
.toggle-switch.on{ background:var(--c-play); }
.toggle-switch .switch-knob{
  position:absolute; top:4px; left:4px; width:28px; height:28px; border-radius:50%;
  background:#fff; transition:transform .2s ease; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.toggle-switch.on .switch-knob{ transform:translateX(28px); }

.preset-row{ display:flex; gap:10px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
.num-badge{
  width:34px; height:34px; border-radius:50%; background:var(--c-preset);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}
input[type=text]{
  padding:12px 10px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:.95rem;
}
.preset-row input[type=text]{ flex:1 1 160px; min-width:120px; }
.field-row{ display:flex; gap:10px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
.field-row label{ min-width:150px; font-size:.9rem; color:var(--text-dim); }
.field-row input[type=text]{ flex:1; min-width:200px; }

.big-btn{
  padding:14px 20px; border-radius:12px; border:none;
  background:var(--c-preset); color:#fff; font-size:1rem; font-weight:700; cursor:pointer;
}
.big-btn.secondary{ background:var(--c-system); }
.big-btn.confirm{ background:var(--c-play); }
.big-btn.danger{ background:var(--c-danger); }
.big-btn:disabled{ opacity:.5; cursor:default; }

.volume-controls{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.round-btn{
  width:64px; height:64px; border-radius:50%; border:none;
  background:var(--c-seek); color:#fff; font-size:1.6rem; font-weight:700; cursor:pointer; flex-shrink:0;
}
#volume-slider{ flex:1; min-width:160px; height:14px; }
#volume-value{ min-width:56px; text-align:center; font-size:1.1rem; font-weight:700; }

.choice-row{ display:flex; gap:10px; flex-wrap:wrap; }
.choice-btn{
  padding:14px 18px; border-radius:12px; border:2px solid var(--border);
  background:var(--bg); color:var(--text); font-size:.95rem; cursor:pointer;
}
.choice-btn.selected{ border-color:var(--c-play); background:#2f8a58; color:#fff; font-weight:700; }

/* 並び替えリスト */
#order-list{ display:flex; flex-direction:column; gap:8px; }
.order-item{
  display:flex; align-items:center; gap:10px;
  border-radius:12px; padding:8px 2px;
}
.order-item.hidden-item{ opacity:.45; }
.order-swatch{
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#fff;
}
.order-name{ flex:1; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.order-ctrl{
  width:48px; height:48px; border-radius:10px; border:none;
  background:var(--c-system); color:#fff; font-size:1.2rem; font-weight:700; cursor:pointer; flex-shrink:0;
}
.order-ctrl.toggle-on{ background:var(--c-play); }
.order-ctrl.toggle-off{ background:var(--c-danger); }
.order-ctrl:disabled{ opacity:.3; cursor:default; }

#sub-list{ margin-top:10px; max-height:200px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.sub-item{
  display:flex; align-items:center; gap:10px;
  border-radius:12px; padding:8px 2px;
}
.sub-item img{ width:36px; height:36px; border-radius:50%; flex-shrink:0; }
.sub-name{ flex:1; font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.slot-btn{
  width:36px; height:36px; border-radius:8px; border:none;
  background:var(--c-preset); color:#fff; font-weight:700; cursor:pointer; flex-shrink:0;
}
#oauth-status{ font-size:.85rem; color:var(--text-dim); margin-top:8px; line-height:1.6; }

.settings-footer{
  display:flex; justify-content:space-between; gap:12px;
  padding:14px 20px; border-top:1px solid var(--border); flex-shrink:0;
}

/* ===== ライセンス認証 ===== */
#license-overlay{
  position:fixed; inset:0; background:rgba(8,10,16,.92);
  display:none; align-items:center; justify-content:center; z-index:400; padding:20px;
}
#license-overlay.show{ display:flex; }
#license-panel{
  width:min(420px, 94vw); background:var(--panel); border:1px solid var(--border);
  border-radius:20px; padding:26px 22px; text-align:center;
}
#license-panel h2{ margin:0 0 8px; font-size:1.25rem; }
#license-panel p{ margin:0 0 16px; font-size:.9rem; color:var(--text-dim); line-height:1.6; }
#license-panel input[type=text]{ width:100%; text-align:center; letter-spacing:.06em; font-size:1.05rem; margin-bottom:10px; }
#license-panel .big-btn{ width:100%; }
.license-error{ color:var(--c-danger); font-size:.85rem; margin:8px 0; display:none; }

.license-status-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:4px 2px;
}
.license-status-row.stacked{ flex-direction:column; align-items:stretch; gap:10px; }
.license-status-text{ font-size:.95rem; font-weight:700; }
.license-status-sub{ font-size:.8rem; color:var(--text-dim); margin-top:2px; }
.license-action-group{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.license-badge{
  width:38px; height:38px; border-radius:50%;
  background:var(--c-play); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:900; flex-shrink:0;
}
.license-release-btn{
  padding:10px 16px; border-radius:10px; border:none;
  background:var(--c-danger); color:#fff; font-size:.9rem; font-weight:700; cursor:pointer;
}

/* ===== 配色カスタマイズ ===== */
.theme-preset-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.theme-color-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
}
.theme-color-item{
  display:flex; align-items:center; gap:10px;
  border-radius:10px; padding:8px 2px;
}
.theme-color-item input[type=color]{
  width:38px; height:38px; border:none; border-radius:8px; padding:0; background:none; cursor:pointer; flex-shrink:0;
}
.theme-color-item span{ font-size:.85rem; }

/* ===== 画面ロック ===== */
#lock-overlay{
  position:fixed; inset:0; background:rgba(10,12,18,.94);
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; z-index:300; color:#fff; text-align:center; padding:20px;
}
#lock-overlay.show{ display:flex; }
#lock-overlay .lock-icon{ font-size:5rem; }
#lock-overlay p{ font-size:1.3rem; margin:0; max-width:520px; line-height:1.6; }
#lock-progress-track{
  width:min(400px,80vw); height:22px; background:#2a3040;
  border-radius:12px; overflow:hidden; border:1px solid var(--border);
}
#lock-progress-fill{ width:0%; height:100%; background:var(--c-play); }
#lock-progress-fill.filling{ width:100%; transition:width 3s linear; }

#controls::-webkit-scrollbar, .settings-body::-webkit-scrollbar, #sub-list::-webkit-scrollbar{ height:10px; width:10px; }
#controls::-webkit-scrollbar-thumb, .settings-body::-webkit-scrollbar-thumb, #sub-list::-webkit-scrollbar-thumb{
  background:var(--border); border-radius:6px;
}