:root{
  --bg:#fbfbfd; --card:#ffffff; --text:#111; --sub:#667; --line:#e9e9ef;
  --accent:#2f6fed; --shadow: 0 10px 30px rgba(0,0,0,.06);
  --r:16px; --p:16px;
}
[data-theme="dark"]{
  --bg:#0f1115; --card:#171a21; --text:#f5f7ff; --sub:#aab1c2; --line:#262b36;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial}
#app{min-height:100vh; padding-bottom:72px;}
.container{padding:var(--p); max-width:1100px; margin:0 auto;}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);}
.row{display:flex; gap:12px; align-items:center}
.btn{
  border:1px solid var(--line); background:var(--card); color:var(--text);
  border-radius:14px; padding:10px 12px; font-weight:600;
  transition: transform .12s ease, filter .12s ease;
}
.btn:active{ transform: scale(.98); filter: brightness(.98); }
.tabbar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(64px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  z-index: 10;
}
.tabbar .btn{ min-width:0; }
body{ padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
[data-theme="dark"] .tabbar{background:rgba(15,17,21,.75)}
/* responsive */
@media (min-width: 900px){
  #app{padding-bottom:0;}
}

/* Search */
.topbar{
  position: sticky; top: 0; z-index: 5;
  padding: 12px var(--p);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.searchbox{
  display:flex; gap:10px; align-items:center;
  background: var(--card); border:1px solid var(--line);
  border-radius: 18px; padding: 10px 12px;
}
.searchbox input{
  border:0; outline:0; background:transparent; color:var(--text);
  width:100%; font-size:15px;
}
#q{font-size: 16px !important;}
.grid{
  display:grid; gap:12px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px){
  .grid{ grid-template-columns: 1fr 1fr 1fr; }
}
.vcard{
  padding: 12px;
  display:flex; gap:12px; align-items:flex-start;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}
.vcard:active{ transform: scale(.99); filter: brightness(.99); }
.thumb{
  width: 132px; aspect-ratio: 16/9;
  border-radius: 14px;
  background: var(--line);
  overflow:hidden; flex: 0 0 auto;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.vmeta{ min-width:0; flex:1; }
.vtitle{
  font-weight: 800; font-size: 15px; line-height: 1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;
  overflow:hidden;
}
.vsub{ margin-top:6px; color:var(--sub); font-size: 13px; display:flex; gap:8px; flex-wrap:wrap; }
.vactions{ display:flex; gap:8px; margin-top:10px; }
.iconbtn{
  border:1px solid var(--line); background:var(--card);
  width:38px; height:38px; border-radius: 14px;
  display:grid; place-items:center;
  transition: transform .12s ease, filter .12s ease;
}
.iconbtn:active{ transform: scale(.97); filter: brightness(.98); }

/* Fullscreen Player Modal */
.modal{
  position: fixed; inset:0;
  background: rgba(0,0,0,.38);
  display:none; align-items:flex-end; justify-content:center;
  padding: 0; z-index: 1000;
}
.modal.show{ display:flex; }
.sheet{
  width: 100%;
  background: var(--bg);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow:hidden;
  max-height: 100vh;
}
@media (min-width: 900px){
  .modal{ align-items:center; padding: 24px; }
  .sheet{
    max-width: 980px;
    border-radius: 22px;
  }
}
.playerTop{
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 14px 10px 14px;
}
.playerTop .title{ font-weight: 900; font-size: 14px; color: var(--sub); }
.playerBody{
  padding: 0 14px 14px 14px;
  overflow:auto;
  max-height: calc(100vh - 70px);
  -webkit-overflow-scrolling: touch;
}
.pwrap{ border-radius: 18px; overflow:hidden; border:1px solid var(--line); background:#000; }
.pinfo{ margin-top:12px; }
.ptitle{ font-weight: 900; font-size: 18px; line-height: 1.2; }
.psub{ margin-top:6px; color: var(--sub); font-size: 13px; display:flex; gap:10px; flex-wrap:wrap; }
.pbtnrow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.pbtn{
  border:1px solid var(--line); background: var(--card);
  border-radius: 16px; padding: 10px 12px; font-weight: 800;
  transition: transform .12s ease, filter .12s ease;
}
.pbtn:active{ transform: scale(.98); filter: brightness(.98); }

.controlsRow{
  margin-top:12px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.pill{
  border:1px solid var(--line); background: var(--card);
  padding: 8px 10px; border-radius: 999px;
  font-weight: 800; font-size: 13px;
  display:flex; gap:8px; align-items:center;
  user-select:none;
  transition: transform .12s ease, filter .12s ease;
}
.pill:active{ transform: scale(.98); filter: brightness(.98); }
.pill.on{ border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
small.hint{ color: var(--sub); display:block; margin-top: 6px; }
.sgroup{display:grid; gap:12px;}
.sitem{
  padding:14px;
  display:flex; justify-content:space-between; align-items:center;
}
.seg{
  display:flex; gap:8px; flex-wrap:wrap;
}
.seg button{
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  border-radius:999px;
  padding:9px 12px;
  font-weight:900;
  transition: transform .12s ease, filter .12s ease;
}
.seg button:active{ transform: scale(.98); filter: brightness(.98); }
.seg button.on{
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
}
.timeRow{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.timeRow input{
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  font-weight:800;
}
.seg button.on{
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  background: color-mix(in srgb, var(--accent) 18%, var(--card));
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.dragHandle{ cursor: grab; user-select:none; }
.vcard[draggable="true"]{ -webkit-user-drag: element; }

/* Touch reorder */
.vcard.reordering { position: relative; z-index: 20; box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.vcard.reorder-placeholder { outline: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); }

/* Google button responsive */
#googleBtn{
  max-width: 240px;
  width: 100%;
  overflow: hidden;
}
@media (max-width: 430px){
  #googleBtn{ max-width: 240px; }
}
.sitem{ flex-wrap: wrap; gap: 12px; }

.loginWrap{ margin-top:12px; display:block; gap:10px; text-align: center;}
.googleRow{ width:100%; display:flex; justify-content:center; }
.logoutRow{ width:100%; display:flex; justify-content:center; }

/* giữ nút Google nằm gọn trong card */
#googleBtn{ width:100%;  overflow:hidden; display:inline-block; }
@media (max-width: 430px){
  #googleBtn{ max-width: 280px; }
}

body.noscroll{ overflow:hidden; }
.vcard.reordering{
  position: relative;
  z-index: 50;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  transform: translate3d(0,0,0);
}
.reorder-placeholder{
  border:2px dashed color-mix(in srgb, var(--accent) 60%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.sheetOverlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.35);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index: 999;
}
.sheet{
  width: min(560px, calc(100% - 18px));
  border-radius: 22px 22px 0 0;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 -20px 60px rgba(0,0,0,.18);
  max-height: calc(92vh - env(safe-area-inset-bottom));
  overflow:hidden;
}
.sheetHeader{
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.sheetBody{
  padding: 14px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.sheetBody input{
  border:1px solid var(--line);
  background: var(--card);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 800;
}
#tapToContinue .btn{ width:100%; justify-content:center; }