/* DrumBlocx web — iOS Theme.swift 1:1 port（木紋美術 tokens）*/
:root{
  --bg:#141518; --panel:#2D1E0E; --panel2:#3A2716; --line:#5C4730;
  --txt:#F2E7D5; --dim:#A08D74; --accent:#E8A057;
  --rcol:#7A9CC4; --lcol:#D96A5A; --kcol:#6FA97A;
  --wood-hi:#F7C98B; --wood1:#EFAF6B; --wood2:#E29A4E; --wood3:#C97E35;
  --wood-dk:#7E4A1E; --wood-ink:#4A2C12; --wal1:#3A2716; --wal2:#261809;
  --paper:#F6EFDF; --paper-dk:#EDE2CC; --ink:#26201A;
  --g0:#D9A441; --g1:#5E9E97; --g2:#A3789F; --g3:#86A05F;
  color-scheme: dark;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; min-height:100%;}
body{background:var(--bg); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro","Segoe UI",system-ui,sans-serif;
  overflow-x:hidden; user-select:none; -webkit-user-select:none; touch-action:manipulation;}

/* ===== 木紋材質（WoodStyle.swift port）===== */
.wood-tile{
  background:linear-gradient(135deg,var(--wood1),var(--wood2) 55%,var(--wood3));
  border-radius:9px;
  box-shadow:inset 1.5px 1.5px 0 rgba(247,201,139,.9), inset -1.5px -1.5px 0 rgba(126,74,30,.85),
             0 2px 4px rgba(0,0,0,.4);
}
.walnut{
  background:linear-gradient(135deg,var(--wal1),var(--wal2));
  border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(247,201,139,.14);
}
.paper-inset{
  background:linear-gradient(135deg,var(--paper),var(--paper-dk));
  border-radius:8px;
  box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,.85), inset -1.5px -1.5px 0 rgba(140,105,61,.35);
}
.wood-cell{display:inline-block; border-radius:22%;
  background:linear-gradient(135deg,#FFDCA4,var(--wood2));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.9), inset -1px -1px 0 rgba(126,74,30,.6);}
.wood-cell.dark{background:linear-gradient(135deg,#573A20,var(--wal1));
  box-shadow:inset 1px 1px 0 rgba(247,201,139,.18), inset -1px -1px 0 rgba(0,0,0,.6);}

/* ===== 通用控件 ===== */
button{font-family:inherit;}
.btn{border:0; border-radius:9px; padding:8px 12px; font-size:13px; font-weight:700;
  cursor:pointer; background:var(--panel2); color:var(--dim);}
.btn.accent{color:var(--accent);}
.btn.primary{background:var(--kcol); color:#fff; font-size:17px; font-weight:800;}
.btn.primary.stop{background:var(--lcol);}
.btn.outline-accent{background:transparent; border:1px solid var(--accent); color:var(--accent);}
.btn.outline-red{background:var(--panel2); border:1px solid var(--lcol); color:var(--lcol);}
.btn:disabled{opacity:.4; cursor:default;}

.back-btn{background:var(--panel2); color:var(--accent); border:0; border-radius:10px;
  width:46px; height:36px; font-size:19px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;}

/* 學生頁 ⇄ Creator Studio 身分切換掣（兩邊頂部）*/
.switch-btn{background:var(--panel2); color:var(--accent); border:0; border-radius:10px;
  height:36px; padding:0 12px; font-size:13px; font-weight:700; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center;}
.switch-btn[hidden]{display:none;}

/* SegControl */
.seg{display:flex; align-items:center; gap:8px;}
.seg .seg-title{font-size:11px; color:var(--dim);}
.seg-box{display:flex; background:var(--panel2); border-radius:10px; overflow:hidden;
  border:1px solid var(--line); flex:1;}
.seg-box button{border:0; background:transparent; color:var(--dim); font-size:12px; font-weight:600;
  padding:0 8px; min-height:40px; flex:1; cursor:pointer; white-space:nowrap;}
.seg-box button.on{background:var(--accent); color:#111;}

/* ToggleChip */
.toggle-chip{display:inline-flex; align-items:center; gap:6px; background:transparent; border:0;
  color:var(--txt); font-size:12px; cursor:pointer; padding:4px 2px;}
.toggle-chip .box{width:15px; height:15px; border-radius:4px; border:1.5px solid var(--dim);
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#111;}
.toggle-chip.on .box{background:var(--accent); border-color:var(--accent);}

/* slider */
input[type=range]{accent-color:var(--accent); height:28px;}

/* mini stepper */
.stepper{display:inline-flex; align-items:center; gap:2px; background:var(--panel2);
  border-radius:8px; padding:4px 6px; font-size:11px; color:var(--dim);}
.stepper button{border:0; background:none; color:var(--accent); font-size:16px; font-weight:800;
  width:20px; cursor:pointer; padding:0;}
.stepper .val{color:var(--txt); font-weight:700; font-size:12px; min-width:20px; text-align:center;}

/* 浮層 */
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:80;
  display:flex; align-items:center; justify-content:center;}
.scrim.dark{background:rgba(0,0,0,.55);}
.sheet{background:linear-gradient(135deg,var(--wal1),var(--wal2)); border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(247,201,139,.14), 0 12px 40px rgba(0,0,0,.6); padding:24px;}

/* count-in 大字 */
#countin{position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.25); z-index:70; font-size:150px; font-weight:900; color:var(--accent);
  pointer-events:none; font-family:ui-rounded,-apple-system,sans-serif;}

/* 教學浮框 */
#teachScrim{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:100;
  display:none; align-items:center; justify-content:center;}
.teach-card{width:min(420px,90vw); padding:24px; text-align:center;
  background:linear-gradient(135deg,var(--wal1),var(--wal2)); border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(247,201,139,.14), 0 12px 40px rgba(0,0,0,.6);}
.teach-card .ticon{font-size:40px;}
.teach-card h3{margin:12px 0 0; font-size:20px; color:var(--txt);}
.teach-card p{margin:14px 0 0; font-size:15px; color:var(--dim); line-height:1.5; white-space:pre-line;}
.teach-card .tprog{margin-top:10px; font-size:11px; color:rgba(160,141,116,.7);}
.teach-card .trow{display:flex; gap:12px; margin-top:18px;}
.teach-card .trow button{flex:1; min-height:44px; border-radius:10px; font-size:14px; cursor:pointer;}
.teach-card .texit{background:var(--panel2); color:var(--dim); border:1px solid var(--line); font-weight:500;}
.teach-card .tgot{background:var(--accent); color:#111; border:0; font-weight:800;}

/* modal confirm（confirmationDialog 代替品）*/
.confirm-card{width:min(400px,90vw); padding:22px; text-align:center;}
.confirm-card p{color:var(--txt); font-size:14px; line-height:1.5; margin:0 0 18px;}
.confirm-card .crow{display:flex; gap:10px;}
.confirm-card .crow button{flex:1; min-height:42px; border-radius:10px; font-size:14px;
  font-weight:700; cursor:pointer; border:0;}
.confirm-card .cdanger{background:var(--lcol); color:#fff;}
.confirm-card .ccancel{background:var(--panel2); color:var(--txt);}

/* dropdown menu（Menu 代替品）*/
.dc-menu{position:fixed; z-index:95; background:linear-gradient(135deg,var(--wal1),var(--wal2));
  border-radius:12px; box-shadow:inset 0 0 0 1px rgba(247,201,139,.2), 0 10px 30px rgba(0,0,0,.6);
  padding:6px; min-width:190px;}
.dc-menu button{display:flex; width:100%; border:0; background:none; color:var(--txt);
  font-size:14px; padding:10px 12px; border-radius:8px; cursor:pointer; text-align:left; gap:8px; align-items:center;}
.dc-menu button:hover{background:var(--panel2);}
.dc-menu .sep{height:1px; background:var(--line); margin:4px 8px; opacity:.5;}
.dc-menu button .chk{width:16px; color:var(--accent);}

.dim-note{font-size:11px; color:var(--dim);}

/* ===== 法律入口（全站 footer）+ 條款提示（訂閱／開戶前）===== */
.legal-foot{display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:6px 16px; padding:18px 12px 0; font-size:11px; text-align:center;}
.legal-foot a{color:var(--dim); text-decoration:none;}
.legal-foot a:hover{color:var(--accent);}
.legal-note{font-size:11px; color:var(--dim); line-height:1.5; margin-top:12px; text-align:center;}
.legal-note a{color:var(--accent);}

/* ===== Drop 譜條（dropstaff_view.js 出嘅 DOM）=====
   學生端 drop feed 同創作者後台 drop 預覽用同一份 DOM，所以樣式都放喺呢度：
   兩邊各寫一份 CSS，創作者見到嘅同訂閱者見到嘅就會慢慢唔同。
   一個 bar 一個 canvas 橫向排，原生捲動（iPad 有慣性）。
   overscroll-behavior-x:contain —— 冇咗佢，iOS 拖到盡頭會觸發返上一頁手勢。 */
.drop-staff{display:flex; overflow-x:auto; overflow-y:hidden;
  overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.drop-staff::-webkit-scrollbar{display:none;}
.drop-staff canvas{flex:0 0 100%; width:100%; height:132px; display:block;
  scroll-snap-align:start;}
/* 提示放喺譜下面自己一行，唔會遮住塊譜；捲到盡頭箭嘴淡走 */
.drop-hint{display:none; align-items:center; justify-content:flex-end; gap:6px;
  padding:5px 2px 0; font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums;}
.drop-hint.on{display:flex;}
.drop-hint .arrow{color:var(--accent); font-size:15px; font-weight:800; line-height:1;}
.drop-hint .arrow.done{opacity:.2;}

/* ===== 平板／桌面 ≥521px：共用控件做返 44pt 可撳目標（HIG 最細掂到目標）=====
   手指撳唔係滑鼠篤，13px 字 + 8px padding 出嚟得 32px 高。
   規則全鎖喺 media query 內 —— 手機（≤520px）位緊，一律唔郁。
   range 要連 thumb 一齊放大：淨係加高 track 只會得個殼大，粒掣仲係細粒撳唔郁。 */
@media (min-width:521px){
  .btn{min-height:44px; min-width:44px; padding:10px 16px; font-size:15px;}
  .back-btn{height:44px; font-size:21px;}
  .switch-btn{height:44px; font-size:14px;}
  .seg-box button{min-height:44px; min-width:44px; font-size:14px;}
  input[type=range]{height:44px; -webkit-appearance:none; appearance:none; background:transparent;}
  input[type=range]::-webkit-slider-runnable-track{height:8px; border-radius:4px;
    background:var(--panel2); box-shadow:inset 0 0 0 1px var(--line);}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none;
    width:28px; height:28px; margin-top:-10px; border-radius:50%; background:var(--accent);
    box-shadow:0 2px 4px rgba(0,0,0,.5);}
  input[type=range]::-moz-range-track{height:8px; border-radius:4px; background:var(--panel2);}
  input[type=range]::-moz-range-thumb{width:28px; height:28px; border:0; border-radius:50%;
    background:var(--accent);}
}